Bootstrap 导航条

导航条 (Navbars)

导航条 (navbar) 是一种响应式导航头部，通常放置在页面顶部。它可以包含品牌标识、导航链接、表单等内容。

在 Bootstrap 5 中，导航条结合使用了 flexbox 工具类和 collapse 插件来实现响应式行为。它们会根据屏幕尺寸进行调整，在小屏幕上折叠成汉堡菜单。

标准的导航条使用 <nav class="navbar"> 元素创建。通常会添加 .navbar-expand-{breakpoint} (例如，.navbar-expand-lg) 来控制导航条内容何时折叠。使用 .navbar-light 或 .navbar-dark 等类以及背景颜色工具类 (例如，bg-light、bg-primary) 来应用配色方案。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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>

<div class="container mt-3">
  <p>Content below the navbar...</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

| | 关键导航条组件：

.navbar：导航条的基础类。
.navbar-expand-{breakpoint}：决定导航条内容在哪个屏幕尺寸折叠 (例如，navbar-expand-md)。
.navbar-brand：用于你的公司、产品或项目名称。
.navbar-toggler：在小屏幕上出现的按钮，用于切换可折叠内容。
.navbar-toggler-icon：位于 toggler 按钮内的汉堡图标。
data-bs-toggle="collapse" 和 data-bs-target="#idOfCollapsibleContent"：toggler 按钮上的属性，用于控制折叠行为。
.collapse.navbar-collapse：可折叠导航条内容的包装器。
.navbar-nav：用于导航链接列表。
.nav-link：单个导航链接的类。 | | --- | --- |

深色导航条

要创建一个带有深色文本和亮色背景（例如，在深色背景上使用）的导航条，请使用 .navbar-dark 以及像 bg-dark 或 bg-primary 这样的深色背景工具类。

<!DOCTYPE html>
<html lang="en">
<body>
<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="#navbarNavDark" aria-controls="navbarNavDark" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDark">
      <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>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- 需要 Bootstrap CSS 和 JS -->
</body>
</html>

.navbar-dark 类会调整文本和 toggler 图标的颜色，以便在深色背景上获得更好的对比度。相反地，.navbar-light（在第一个示例中与 bg-light 一起使用）用于浅色背景。

固定导航条

你可以将导航条固定在视口的顶部或底部。固定的导航条会保持在固定位置可见，不受页面滚动影响。

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

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
  <!-- 导航条内容 -->
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
  <!-- 导航条内容 -->
</nav>

注意：固定的导航条可能会覆盖其他内容。你可能需要为 <body> 添加填充（例如，为 .fixed-top 添加 padding-top）以防止内容被遮挡。填充量取决于导航条的高度。

另一个选项是 .sticky-top，它会使导航条随页面一起滚动，直到到达顶部时固定在那里。

带下拉菜单的导航条

导航条也可以包含下拉菜单，用于更复杂的导航结构。

<!DOCTYPE html>
<html lang="en">
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-info">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">WebSiteName</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" aria-current="page" 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
          </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>
<!-- 需要 Bootstrap CSS 和 JS -->
</body>
</html>

导航条下拉菜单的关键元素包括：.nav-item.dropdown、带有 data-bs-toggle="dropdown" 属性的 .nav-link.dropdown-toggle，以及包含 .dropdown-item 链接的 ul.dropdown-menu。

对齐导航条内容

你可以使用 flexbox 工具类来控制导航条内容的对齐方式。例如，要将一组导航链接推到右侧，你可以将 ms-auto (margin-start: auto，在 LTR 中即 margin-left) 添加到 ul.navbar-nav。

<!DOCTYPE html>
<html lang="en">
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">WebSiteName</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavRight" aria-controls="navbarNavRight" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavRight">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <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="#">About</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- 需要 Bootstrap CSS 和 JS -->
</body>
</html>

在此示例中，第一个 ul.navbar-nav 带有 me-auto (margin-end: auto)，它将后续项目推向右侧。如果你想让第二个 ul 被推到最右侧，如果它是品牌标识后的第一个元素，或者前面的 ul 没有 me-auto，则可以为其添加 ms-auto。上面的示例中，第二个 ul 自然地紧随第一个 ul 之后，而第一个 ul 填充了其右侧的可用空间。

注意：Glyphicons 已不再是 Bootstrap 的一部分。对于图标，请考虑使用 SVG、其他图标库（如 Font Awesome）或 Bootstrap Icons（一个单独的库）。为了简单起见，此处显示的是文本链接。

折叠导航条

如第一个示例所示，导航条的折叠性由 .navbar-expand-{breakpoint} 类、.navbar-toggler 按钮以及 .collapse.navbar-collapse div 控制。在小于指定断点的屏幕上，.navbar-collapse 中的内容会被隐藏，并替换为 toggler 按钮。点击按钮将显示内容。

toggler 按钮上的 data-bs-target 属性必须与 .collapse.navbar-collapse div 的 id 匹配。