Bootstrap 导航栏与导航

几乎每个网站都有顶部导航。Bootstrap 的 navbar 组件自带"桌面横排、手机汉堡菜单"的自动切换——这是新手最头疼的部分,但用 Bootstrap 几行就能搞定。这一章彻底讲透导航相关组件。

1. 完整 navbar:带汉堡折叠菜单

这是生产环境最常用的 navbar 模板,直接复制改菜单项即可:

<!-- 完整 navbar:带汉堡折叠菜单 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <!-- 品牌 Logo -->
    <a class="navbar-brand" href="#">我的网站</a>

    <!-- 汉堡按钮:小屏点开菜单 -->
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#mainNav"
            aria-controls="mainNav" aria-expanded="false"
            aria-label="切换导航">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 可折叠菜单 -->
    <div class="collapse navbar-collapse" id="mainNav">
      <!-- 左侧菜单项:ms-auto 改成 ms-auto 可推到右侧 -->
      <ul class="navbar-nav ms-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 dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">更多</a>
          <ul class="dropdown-menu dropdown-menu-end">
            <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>
      <!-- 右侧搜索框 -->
      <form class="d-flex ms-3" role="search">
        <input class="form-control me-2" type="search" placeholder="搜索..." />
        <button class="btn btn-outline-light" type="submit">搜</button>
      </form>
    </div>
  </div>
</nav>

结构拆解:

navbar:基础 class。
navbar-expand-lg:在 lg(992px)及以上展开为横排,小屏折叠成汉堡菜单。改成 navbar-expand-md 可改断点。
navbar-dark bg-dark:深色背景 + 白色文字。
navbar-brand:左侧品牌区(Logo + 站名)。
navbar-toggler:汉堡按钮。data-bs-toggle="collapse" + data-bs-target="#mainNav" 告诉 JS 点击时展开哪个元素。
collapse navbar-collapse:可折叠的菜单容器,id 必须和 data-bs-target 一致。
navbar-nav ms-auto:菜单项列表。ms-auto(margin-start: auto)把它推到右侧。改成 me-auto 就推到左侧。

必须引入 Bootstrap JS bundle(包括 Popper)才能让折叠和下拉菜单生效。

2. navbar 配色

navbar 的配色由 navbar-dark/light + bg-* 组合控制:

<!-- navbar 配色:navbar-dark/light + bg-* -->
<nav class="navbar navbar-dark bg-primary">...</nav>
<nav class="navbar navbar-dark bg-dark">...</nav>
<nav class="navbar navbar-dark bg-success">...</nav>

<!-- 浅色背景用 navbar-light -->
<nav class="navbar navbar-light bg-light">...</nav>

<!-- Bootstrap 5.3 推荐:用 data-bs-theme 替代 -->
<nav class="navbar bg-dark" data-bs-theme="dark">...</nav>

规则:背景深 → 用 navbar-dark(白字);背景浅 → 用 navbar-light(黑字)。Bootstrap 5.3 引入了 data-bs-theme="dark" 作为更现代的写法,效果一样。

3. 品牌 Logo 和定位

navbar-brand 可以放图片、文字或两者组合:

<!-- navbar-brand:左侧 Logo 区 -->
<a class="navbar-brand" href="#">
  <img src="/logo.svg" alt="Logo" width="30" height="30" />
  我的网站
</a>

<!-- 纯文字 Logo -->
<a class="navbar-brand" href="#">简洁站名</a>

<!-- 固定在顶部:fixed-top -->
<nav class="navbar fixed-top navbar-dark bg-dark">...</nav>

<!-- 固定在底部:fixed-bottom -->
<nav class="navbar fixed-bottom navbar-light bg-light">...</nav>

<!-- 粘性吸顶:sticky-top(滚动时贴顶) -->
<nav class="navbar sticky-top navbar-dark bg-dark">...</nav>

fixed-top:固定在视口顶部,不随滚动移动。需要给 body 加 padding-top 否则内容会被遮住。
fixed-bottom:固定底部。
sticky-top:粘性吸顶。滚动到顶部时贴住,但不会遮内容(因为占文档流)。比 fixed-top 更优雅,推荐。

4. nav:基础导航组件

nav 是比 navbar 更轻量的导航组件,适合页面内的标签页、侧边栏菜单、设置面板:

<!-- nav:基础导航(选项卡风格) -->
<ul class="nav nav-tabs">
  <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 disabled">禁用</a>
  </li>
</ul>

<!-- nav-pills:胶囊风格 -->
<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
  <li class="nav-item"><a class="nav-link" href="#">产品</a></li>
</ul>

<!-- nav-fill / nav-justified:让 nav 占满父容器宽度 -->
<ul class="nav nav-pills nav-fill">
  <li class="nav-item"><a class="nav-link active" href="#">A</a></li>
  <li class="nav-item"><a class="nav-link" href="#">B</a></li>
  <li class="nav-item"><a class="nav-link" href="#">C</a></li>
</ul>

<!-- 垂直导航:加 flex-column -->
<ul class="nav nav-pills flex-column">
  <li class="nav-item"><a class="nav-link active" href="#">仪表盘</a></li>
  <li class="nav-item"><a class="nav-link" href="#">订单</a></li>
</ul>

nav-tabs:选项卡风格(下划线式)。
nav-pills:胶囊风格(选中项有背景色)。
nav-fill:均分父容器宽度(每项等宽)。
nav-justified:类似 fill,但所有项宽度相等(fill 是按内容等分)。
flex-column:垂直导航(侧边栏菜单常用)。

配合 data-bs-toggle="tab" 或 data-bs-toggle="pill" 还能实现真正的内容切换——点击不同 tab 显示不同面板。这是后台界面最常用的模式。

5. 面包屑:breadcrumb

面包屑显示当前页面的层级路径,常见于电商、文档站:

<!-- breadcrumb:面包屑路径 -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item"><a href="#">产品</a></li>
    <li class="breadcrumb-item active" aria-current="page">当前页</li>
  </ol>
</nav>

结构:每个 breadcrumb-item 是一层路径。最后一项加 active 表示当前页(不可点)。视觉上以 / 分隔(由 Bootstrap 自动加)。

6. 分页:pagination

列表、搜索结果、博客文章底部都需要分页:

<!-- pagination:分页 -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">下一页</a>
    </li>
  </ul>
</nav>

<!-- pagination-lg / pagination-sm 改尺寸 -->
<ul class="pagination pagination-lg">...</ul>

结构:pagination > 多个 page-item > page-link。
active:当前页(高亮)。
disabled:禁用(上一页/下一页边界)。
pagination-lg / sm:整组改尺寸。

无障碍要点:外层 nav 加 aria-label="Page navigation",让屏幕阅读器识别这是分页区。

7. 实战建议

navbar 默认靠左:要让菜单靠右,给 navbar-nav 加 ms-auto(Bootstrap 5 用 ms/me 替代了 ml/mr)。
移动端汉堡菜单默认右对齐:下拉改成右对齐时给 dropdown-menu 加 dropdown-menu-end。
sticky-top 在 iOS Safari 老版本有 bug:如果项目要兼容老 iOS,用 fixed-top + body padding 替代。
active 项要加 aria-current="page":让屏幕阅读器知道"这是当前页",提升无障碍。

小结

导航相关组件的要点:

navbar:响应式顶栏,navbar-expand-lg 控制折叠断点,汉堡菜单靠 data-bs-toggle="collapse"。
nav:轻量导航,tabs/pills 风格,flex-column 变垂直。
breadcrumb:层级路径。
pagination:分页,active/disabled 控制状态。

下一篇看表单——Bootstrap 表单样式和内置验证。

← 上一篇卡片、警告与徽章

下一篇表单与验证 →

✈️💬