Bootstrap5导航栏：快速实现响应式导航菜单

快速实现响应式导航菜单（Bootstrap5 导航栏基础用法）¶

1. 引入 Bootstrap5 资源¶

要使用 Bootstrap5 的导航栏，首先需要在 HTML 中引入 Bootstrap 的 CSS 和 JavaScript 文件。最快捷的方式是通过 CDN 链接，无需本地安装：

<!-- Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap5 JS (需放在body末尾或使用defer) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. 基本导航栏结构¶

Bootstrap5 导航栏的核心是 <nav> 标签配合 .navbar 类，并通过以下关键组件实现功能：

品牌标识：.navbar-brand（通常放 Logo 或网站名称）
导航链接容器：.navbar-nav（包裹导航项）
单个导航项：.nav-item（<li> 标签）
导航链接：.nav-link（<a> 标签）
移动端折叠按钮：.navbar-toggler（汉堡菜单按钮）
折叠内容：.collapse.navbar-collapse（导航链接折叠区域）

示例代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <!-- 品牌标识 -->
  <div class="container-fluid">
    <a class="navbar-brand" href="#">我的网站</a>

    <!-- 移动端折叠按钮 -->
    <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarContent" 
            aria-controls="navbarContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 折叠导航内容 -->
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">产品</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdownMenu" 
             role="button" data-bs-toggle="dropdown" aria-expanded="false">
            服务
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
            <li><a class="dropdown-item" href="#">服务1</a></li>
            <li><a class="dropdown-item" href="#">服务2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

3. 响应式折叠逻辑¶

通过 .navbar-expand-* 类控制导航栏在不同屏幕的显示状态：
- .navbar-expand-lg：在 lg（≥992px）及以上屏幕展开导航，小屏幕自动折叠为汉堡菜单。
- 断点说明：Bootstrap5 断点包括 sm(576px)、md(768px)、lg(992px)、xl(1200px)，可根据需求选择展开级别。

效果：小屏幕下点击汉堡按钮，导航链接会从顶部向下展开；大屏幕直接显示全部链接。

4. 导航栏样式定制¶

背景色：通过 .bg-* 类设置（如 bg-primary 蓝色、bg-light 浅灰）。
文字颜色：.navbar-dark（白色文字）或 .navbar-light（黑色文字）配合背景色使用。
激活状态：.active 类标记当前页导航项（自动高亮）。
下拉菜单：点击 .dropdown-toggle 按钮展开，默认带动画效果。

示例：

<!-- 黑色文字+浅灰背景导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 导航项高亮 -->
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a> <!-- active 类自动高亮 -->
  </li>
  <!-- 自定义背景色 -->
  <li class="nav-item">
    <a class="nav-link" href="#" style="background-color: #f0f0f0;">产品</a>
  </li>
</nav>

5. 常见扩展功能¶

固定顶部：给导航栏加 .fixed-top 类，使其滚动时始终固定在顶部：

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">

导航栏右侧内容：可添加搜索框、按钮等，用 .d-flex 控制对齐：

  <form class="d-flex">
    <input class="form-control me-2" type="search" placeholder="搜索">
    <button class="btn btn-outline-light" type="submit">搜索</button>
  </form>

导航栏间距：用 .my-3（上下边距）或 .px-4（左右边距）调整容器大小。

6. 注意事项¶

CDN 顺序：先引入 CSS，再引入 JS（或放在 body 末尾）。
折叠状态验证：确保 data-bs-target 与折叠容器的 id 一致。
无障碍属性：添加 aria-controls、aria-expanded 等属性，提升屏幕阅读器兼容性。

通过以上内容，你已掌握 Bootstrap5 导航栏的核心用法。只需复制示例代码，替换内容即可快速实现响应式导航菜单，无需从零编写 CSS！