案例导航条

Bootstrap 5 案例研究：添加导航栏

理解导航栏 (Navbars)

导航栏（navbar）是网站导航的关键组件，通常放置在页面顶部。Bootstrap 5 的导航栏是响应式的（responsive），这意味着它们可以根据屏幕尺寸调整布局（例如，折叠成汉堡菜单）。

标准的导航栏使用 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 创建。navbar-expand-lg 类表示导航栏将在大屏幕（lg 及以上）上展开（水平显示），在更小的屏幕上折叠。你可以将 lg 更改为 sm、md 或 xl 来控制它何时折叠。navbar-light 用于浅色背景（设置深色文本），bg-light 提供浅灰色背景。对于深色背景，请使用 navbar-dark 和深色的 bg-* 工具类。

以下示例展示了一个基本的响应式导航栏：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Navbar Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">WebSiteName</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Page 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Page 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Page content here -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

注意：navbar-toggler 按钮及其 data-bs-target（指向可折叠 div 的 ID）对于在小屏幕上实现折叠行为至关重要。navbar-toggler-icon 提供了汉堡菜单图标。

深色主题导航栏

要创建深色主题的导航栏，请使用 .navbar-dark 以及深色背景工具类，如 .bg-dark 或 .bg-primary。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">WebSiteName</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#darkNavbarNav" aria-controls="darkNavbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="darkNavbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

固定导航栏

你可以将导航栏固定到视口（viewport）的顶部或底部。无论页面如何滚动，它都会保持在原位。

使用 .fixed-top 将导航栏固定在顶部：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
  <!-- Navbar content -->
</nav>

使用 .fixed-bottom 将导航栏固定在底部：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
  <!-- Navbar content -->
</nav>

粘性顶部（Sticky Top）：你还可以使用 .sticky-top，它使导航栏随页面滚动，直到到达顶部，然后固定在那里。注意：固定/粘性定位有时可能需要调整页面内容的内边距（padding）以防止重叠。

带下拉菜单的导航栏

导航栏可以包含下拉菜单（dropdown menus），用于更复杂的导航结构。这需要 Bootstrap 的 JavaScript（包含在 bundle 中）。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Page 1 Options
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Page 1-1</a></li>
            <li><a class="dropdown-item" href="#">Page 1-2</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

关键元素：<li> 上的 .dropdown，<a> 上的 .dropdown-toggle 和 data-bs-toggle="dropdown"，以及嵌套 <ul> 上的 .dropdown-menu。

右对齐导航项

要将导航项右对齐，可以在包含要推到右侧的项目的 <ul> 元素上使用边缘工具类（margin utilities），例如 ms-auto（margin-start: auto，在 LTR 语言中即 margin-left）。

以下示例将登录/注册（Login/Sign Up）按钮放在右侧（使用 Bootstrap Icons 进行演示，请记住包含其 CSS）：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">WebSiteName</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Page 1</a></li>
      </ul>
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="bi bi-person-plus-fill"></i> Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="bi bi-box-arrow-in-right"></i> Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Make sure to include Bootstrap Icons CSS if using bi-* classes -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> -->

第一个 ul 上的 me-auto（margin-end: auto）将后续元素推向右侧。或者，第二个 ul 上的 ms-auto 将其推向右侧。

折叠导航栏（响应式行为）

如第一个示例所示，导航栏的折叠行为由 .navbar-expand-{breakpoint} 控制。在小于指定断点（breakpoint）的屏幕上，<div class="collapse navbar-collapse" id="..."> 中的内容将被隐藏在一个切换按钮（“汉堡”菜单）后面。

折叠功能的关键组件：

navbar-expand-{sm|md|lg|xl|xxl}：定义导航栏在哪个断点展开。
切换按钮（Toggler Button）：<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#uniqueNavbarID" ...>。
可折叠元素（Collapsible Element）：<div class="collapse navbar-collapse" id="uniqueNavbarID"> ... </div>。

应用场景：一个包含“首页”、“关于我们”、“服务”、“产品”、“联系方式”等多个版块的公司网站。在桌面端，这些链接是可见的。在移动端，它们会折叠成一个汉堡菜单以节省空间，提供简洁的用户界面。

常见陷阱：切换按钮上的 data-bs-target 与可折叠 div 的 id 不匹配。这两个必须完全匹配，切换功能才能正常工作。另外，确保包含 Bootstrap 的 JavaScript（bundle）。

案例 导航条