Bootstrap 导航栏组件 #

导航栏是网站的核心导航组件。Bootstrap 提供了强大的导航栏组件，支持响应式设计、品牌标识、导航链接、下拉菜单等功能。

基础导航栏 #

基本结构 #

html

<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="#navbarNav">
      <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="#">首页</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 disabled">禁用</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

结构解析 #

元素	类名	作用
导航容器	`.navbar`	导航栏主容器
品牌标识	`.navbar-brand`	网站/应用名称或 Logo
折叠按钮	`.navbar-toggler`	移动端折叠按钮
折叠内容	`.navbar-collapse`	可折叠的导航内容
导航列表	`.navbar-nav`	导航链接列表
导航项	`.nav-item`	单个导航项
导航链接	`.nav-link`	导航链接

品牌标识 #

文字品牌 #

html

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌名称</a>
  </div>
</nav>

图片品牌 #

html

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.svg" alt="Logo" width="30" height="24">
    </a>
  </div>
</nav>

图片 + 文字 #

html

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top me-2">
      品牌名称
    </a>
  </div>
</nav>

响应式折叠 #

折叠断点 #

使用 .navbar-expand-* 类控制导航栏的折叠断点：

html

<!-- 始终折叠 -->
<nav class="navbar navbar-expand navbar-light bg-light">

<!-- 在 sm 断点展开 -->
<nav class="navbar navbar-expand-sm navbar-light bg-light">

<!-- 在 md 断点展开 -->
<nav class="navbar navbar-expand-md navbar-light bg-light">

<!-- 在 lg 断点展开 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<!-- 在 xl 断点展开 -->
<nav class="navbar navbar-expand-xl navbar-light bg-light">

<!-- 始终展开 -->
<nav class="navbar navbar-expand-xxl navbar-light bg-light">

<!-- 从不折叠 -->
<nav class="navbar navbar-light bg-light">

类名	展开断点
`.navbar-expand`	始终展开
`.navbar-expand-sm`	≥ 576px 展开
`.navbar-expand-md`	≥ 768px 展开
`.navbar-expand-lg`	≥ 992px 展开
`.navbar-expand-xl`	≥ 1200px 展开
`.navbar-expand-xxl`	≥ 1400px 展开
无	始终折叠

外部触发器 #

html

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent">
    切换导航
  </button>
</p>
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">折叠内容</h5>
    <span class="text-muted">这是外部折叠内容。</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌</a>
  </div>
</nav>

导航栏颜色 #

浅色主题 #

html

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">浅色导航栏</a>
  </div>
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">自定义浅色</a>
  </div>
</nav>

深色主题 #

html

<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">深色导航栏</a>
  </div>
</nav>

<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">主题色导航栏</a>
  </div>
</nav>

主题颜色 #

html

<nav class="navbar navbar-dark bg-primary">...</nav>
<nav class="navbar navbar-dark bg-secondary">...</nav>
<nav class="navbar navbar-dark bg-success">...</nav>
<nav class="navbar navbar-dark bg-danger">...</nav>
<nav class="navbar navbar-dark bg-warning">...</nav>
<nav class="navbar navbar-dark bg-info">...</nav>
<nav class="navbar navbar-dark bg-dark">...</nav>

导航内容 #

导航链接 #

html

<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">
      <ul class="navbar-nav">
        <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>
    </div>
  </div>
</nav>

下拉菜单 #

html

<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">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
            下拉菜单
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">操作一</a></li>
            <li><a class="dropdown-item" href="#">操作二</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">其他操作</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

表单元素 #

html

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="搜索">
      <button class="btn btn-outline-success" type="submit">搜索</button>
    </form>
  </div>
</nav>

按钮和文本 #

html

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌</a>
    <span class="navbar-text">
      导航栏文本内容
    </span>
    <button class="btn btn-outline-primary ms-2">按钮</button>
  </div>
</nav>

导航栏布局 #

左右分布 #

html

<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">
      <!-- 左侧导航 -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <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>

居中导航 #

html

<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="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
      <ul class="navbar-nav">
        <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>

容器类型 #

html

<!-- 固定宽度容器 -->
<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">品牌</a>
  </div>
</nav>

<!-- 流式容器 -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌</a>
  </div>
</nav>

固定导航栏 #

固定在顶部 #

html

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">固定顶部</a>
  </div>
</nav>

固定在底部 #

html

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">固定底部</a>
  </div>
</nav>

粘性定位 #

html

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">粘性定位</a>
  </div>
</nav>

类名	说明
`.fixed-top`	固定在视口顶部
`.fixed-bottom`	固定在视口底部
`.sticky-top`	滚动时粘性定位

注意：固定定位的导航栏会覆盖页面内容，需要给 <body> 添加 padding-top 或 padding-bottom。

折叠按钮样式 #

默认样式 #

html

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
  <span class="navbar-toggler-icon"></span>
</button>

自定义图标 #

html

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
  <span class="navbar-toggler-icon"></span>
</button>

<!-- 浅色主题图标 -->
<nav class="navbar navbar-light bg-light">
  <button class="navbar-toggler" type="button">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<!-- 深色主题图标 -->
<nav class="navbar navbar-dark bg-dark">
  <button class="navbar-toggler" type="button">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

实战案例 #

企业网站导航 #

html

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">企业名称</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <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="#">首页</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>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
      </ul>
      <div class="d-flex">
        <a class="btn btn-outline-primary me-2" href="#">登录</a>
        <a class="btn btn-primary" href="#">免费试用</a>
      </div>
    </div>
  </div>
</nav>

电商网站导航 #

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">商城</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">分类</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">电子产品</a></li>
            <li><a class="dropdown-item" href="#">服装</a></li>
            <li><a class="dropdown-item" href="#">家居</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex me-3">
        <input class="form-control me-2" type="search" placeholder="搜索商品">
        <button class="btn btn-outline-light" type="submit">搜索</button>
      </form>
      <div class="d-flex">
        <a class="btn btn-link text-white position-relative" href="#">
          购物车
          <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
            3
          </span>
        </a>
        <a class="btn btn-link text-white" href="#">我的</a>
      </div>
    </div>
  </div>
</nav>

后台管理导航 #

html

<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">后台管理</a>
    <ul class="navbar-nav me-auto">
      <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>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
          管理员
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">个人设置</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">退出登录</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

双层导航 #

html

<!-- 顶部工具栏 -->
<nav class="navbar navbar-dark bg-secondary py-1">
  <div class="container">
    <div class="navbar-nav flex-row">
      <a class="nav-link small" href="#">帮助中心</a>
      <a class="nav-link small" href="#">联系我们</a>
    </div>
    <div class="navbar-nav flex-row">
      <a class="nav-link small" href="#">登录</a>
      <a class="nav-link small" href="#">注册</a>
    </div>
  </div>
</nav>

<!-- 主导航 -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand" href="#">品牌</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto">
        <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>

JavaScript 方法 #

切换导航 #

javascript

var navbar = new bootstrap.Collapse(document.getElementById('myNavbar'), {
  toggle: true
});

显示/隐藏 #

javascript

// 显示
var navbar = new bootstrap.Collapse(document.getElementById('myNavbar'));
navbar.show();

// 隐藏
navbar.hide();

最佳实践 #

1. 响应式设计 #

html

<!-- 推荐：使用合适的断点 -->
<nav class="navbar navbar-expand-lg">

<!-- 根据内容量选择断点 -->
<!-- 内容少用 navbar-expand-sm -->
<!-- 内容多用 navbar-expand-lg -->

2. 可访问性 #

html

<nav class="navbar" role="navigation" aria-label="主导航">
  <div class="container-fluid">
    ...
  </div>
</nav>

3. 固定导航栏间距 #

css

body {
  padding-top: 70px; /* 导航栏高度 */
}

4. 移动端优化 #

html

<!-- 移动端隐藏某些项目 -->
<ul class="navbar-nav">
  <li class="nav-item d-none d-lg-block">
    <a class="nav-link" href="#">仅桌面显示</a>
  </li>
</ul>

常见问题 #

1. 折叠按钮不工作？ #

确保引入了 Bootstrap JavaScript：

html

<script src="bootstrap.bundle.min.js"></script>

2. 导航栏覆盖内容？ #

添加 body padding：

css

body { padding-top: 56px; }

3. 下拉菜单不显示？ #

检查 data-bs-toggle 属性：

html

<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">

下一步 #

现在你已经掌握了导航栏组件，接下来学习卡片组件，了解如何展示内容！