Bootstrap5 导航栏

Bootstrap 5 导航栏

导航栏是网站最重要的导航组件，Bootstrap 5提供了强大而灵活的导航栏系统。

基本导航栏 响应式导航栏

什么是导航栏？

导航栏（Navbar）是Bootstrap中功能最强大的导航组件，通常作为网站的主导航放置在页面顶部。

导航栏可以包含：

  • 网站品牌/Logo
  • 导航链接
  • 下拉菜单
  • 搜索表单
  • 按钮和其他控件

Bootstrap 5的导航栏是完全响应式的，在移动设备上会自动折叠成汉堡菜单。

导航栏演示

这是一个基本导航栏示例。尝试调整浏览器窗口大小，查看响应式效果。

基本导航栏

默认导航栏

使用 .navbar 和 .navbar-expand-{breakpoint} 创建基本导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <div class="collapse navbar-collapse" id="navbarBasic">
      <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">
          <a class="nav-link" href="#">服务</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

深色导航栏

使用 .navbar-dark 和深色背景类创建深色导航栏：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <div class="collapse navbar-collapse" id="navbarDark">
      <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">
          <a class="nav-link" href="#">服务</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

彩色导航栏

使用Bootstrap的颜色类创建彩色导航栏：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <div class="collapse navbar-collapse" id="navbarColor">
      <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">
          <a class="nav-link" href="#">服务</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

响应式导航栏

带折叠按钮的导航栏

使用 .navbar-toggler 创建移动设备上的折叠按钮：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navbarToggler">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarToggler">
      <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>
        <!-- 其他导航项 -->
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="搜索">
        <button class="btn btn-outline-success" type="submit">搜索</button>
      </form>
    </div>
  </div>
</nav>

导航栏中的下拉菜单

在导航栏中添加下拉菜单：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"
             id="navbarDropdownMenu" role="button"
             data-bs-toggle="dropdown">
            产品
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">产品类别1</a></li>
            <li><a class="dropdown-item" href="#">产品类别2</a></li>
            <li><a class="dropdown-item" href="#">产品类别3</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">服务</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

导航栏中的表单

在导航栏中添加搜索表单或其他表单元素：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <div class="collapse navbar-collapse" id="navbarForm">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">产品</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">服务</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="搜索">
        <button class="btn btn-outline-success" type="submit">搜索</button>
      </form>
    </div>
  </div>
</nav>

定位和固定导航栏

固定顶部导航栏

使用 .fixed-top 类创建固定在顶部的导航栏：

页面内容

滚动此区域，观察固定顶部导航栏的效果。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">固定顶部导航栏</a>
    <!-- 导航内容 -->
  </div>
</nav>

粘性顶部导航栏

使用 .sticky-top 类创建粘性导航栏：

页面内容

滚动此区域，观察粘性顶部导航栏的效果。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

<nav class="navbar navbar-expand-lg navbar-dark bg-success sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">粘性顶部导航栏</a>
    <!-- 导航内容 -->
  </div>
</nav>

高级导航栏功能

导航栏与滚动监听

结合滚动监听插件，创建高亮当前部分的导航栏：

第一部分

这是第一部分的内容。滚动时观察导航栏中对应链接的高亮效果。

第二部分

这是第二部分的内容。滚动时观察导航栏中对应链接的高亮效果。

第三部分

这是第三部分的内容。滚动时观察导航栏中对应链接的高亮效果。

<nav id="navbar-scrollspy" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">滚动监听导航</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#section1">第一部分</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">第二部分</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">第三部分</a>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-scrollspy"
     data-bs-offset="0" class="scrollspy-example">
  <h4 id="section1">第一部分</h4>
  <!-- 内容 -->
</div>

导航栏中的图标

在导航栏中使用Bootstrap图标：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <i class="bi bi-house-fill me-2"></i>
      网站名称
    </a>
    <div class="collapse navbar-collapse" id="navbarIcons">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#">
            <i class="bi bi-house me-1"></i>
            首页
          </a>
        </li>
        <!-- 其他带图标的导航项 -->
      </ul>
      <form class="d-flex">
        <button class="btn btn-outline-light" type="button">
          <i class="bi bi-search"></i>
        </button>
      </form>
    </div>
  </div>
</nav>

导航栏设计最佳实践

选择合适的样式
  • 根据网站风格选择合适的颜色主题
  • 考虑使用固定或粘性导航栏提高可用性
  • 确保导航栏在所有设备上表现良好
  • 使用适当的断点控制导航栏的折叠行为
内容组织
  • 保持导航结构简单直观
  • 使用下拉菜单组织相关链接
  • 将重要操作放在显眼位置
  • 考虑使用搜索功能提高用户体验
可访问性
  • 为导航栏添加适当的ARIA属性
  • 确保键盘导航正常工作
  • 为屏幕阅读器提供清晰的导航结构
  • 使用高对比度颜色确保可读性
性能优化
  • 避免在导航栏中使用过多大型资源
  • 考虑使用图标代替文字节省空间
  • 优化移动设备上的导航体验
  • 测试导航栏在各种设备上的加载性能

掌握导航栏后，下一步学习其他Bootstrap组件

Bootstrap 5提供了丰富的组件库，包括表单、按钮、卡片、模态框等。

学习表单组件 查看所有组件
上一章: 导航 下一章: 轮播