English 中文 العربية 日本語 Português

Bootstrap: 导航栏、下拉菜单与 Offcanvas

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Bob 的公司网站需要在桌面端显示完整水平导航，在手机端折叠为汉堡菜单——如果用原生 HTML/CSS/JS 实现响应式导航栏，需要大量代码处理布局、事件和断点。

(4) 解法

用 Bootstrap 的 navbar-expand-* 加上汉堡按钮，10 行代码即可实现。Bootstrap 的导航栏组件集成了响应式折叠、下拉菜单和侧滑面板，一套代码适配移动端和桌面端。

理解方式： 导航栏 = 容器 + 品牌标识 + 折叠面板 + 可交互组件（下拉/搜索/按钮）。navbar-expand-* 控制何时展开为水平导航，断点以下自动折叠。

(5) 收益

使用 Bootstrap 导航栏后，Bob 只用十几行代码就完成了完整的响应式导航——桌面端水平展开、手机端折叠为汉堡菜单，还内置了下拉菜单支持。

2. 导航栏基础结构

HTML 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</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 ms-auto">
        <li class="nav-item"><a class="nav-link active" 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 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 关键组件

组件 class 作用
导航容器 navbar 声明导航栏，提供 flex 布局
展开断点 navbar-expand-lg lg 及以上水平展开，以下折叠
品牌 navbar-brand logo / 站点名
汉堡按钮 navbar-toggler 手机端显示，点击触发折叠
折叠面板 collapse navbar-collapse 被汉堡按钮控制的菜单面板
导航列表 navbar-nav 导航链接列表（flex）
链接项 nav-item / nav-link 单个导航链接

▶ 示例：主题色导航栏

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Alice's Site</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navDark">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navDark">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg bg-primary navbar-dark mt-2">
    <div class="container">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLight">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navLight">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>Resize the browser to see the navbar collapse on smaller screens.</p>
  </div>

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

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 主题色方案： | 背景 | 文字 | 效果 | |:-----|:-----|:------| | bg-dark navbar-dark | 浅色文字 | 深色导航栏 | | bg-light navbar-light | 深色文字 | 浅色导航栏 | | bg-primary navbar-dark | 浅色文字 | 彩色品牌导航栏 |

3. 导航栏增强内容

HTML 
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="https://via.placeholder.com/30x30" alt="Logo" class="d-inline-block align-text-top me-2">
      Bootstrap
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navExt">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navExt">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
      </ul>
      <form class="d-flex mx-2" role="search">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
      <a href="#" class="btn btn-success">Sign Up</a>
    </div>
  </div>
</nav>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

4. 下拉菜单

HTML 
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    Dropdown
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</li>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

元素 class 说明
触发器 dropdown-toggle 带箭头指示器的下拉按钮
菜单容器 dropdown-menu 下拉面板
菜单项 dropdown-item 单个选项
分隔线 dropdown-divider 菜单分组分隔
禁用项 dropdown-item disabled 灰色不可点

(1) 下拉变体

HTML 
<div class="btn-group dropup">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Dropup</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
  </ul>
</div>

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Account</h6></li>
  <li><a class="dropdown-item" href="#">Profile</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><h6 class="dropdown-header">Help</h6></li>
  <li><a class="dropdown-item" href="#">FAQ</a></li>
</ul>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

5. Offcanvas 侧滑面板

HTML 
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Offcanvas Nav</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="offcanvasNav">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title text-white">Menu</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">More</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">About</a></li>
              <li><a class="dropdown-item" href="#">Contact</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) Offcanvas vs 折叠导航

对比维度 collapse navbar-collapse offcanvas
动画方向 垂直展开/收起 从侧边滑入
遮罩层 无 有（半透明背景）
适用场景 简单链接（3-5 项） 多级菜单 + 搜索 + 用户面板

(2) Offcanvas 方向

class 方向 场景
offcanvas-start 左侧滑出 侧栏导航
offcanvas-end 右侧滑出 购物车、通知（默认）
offcanvas-top 顶部滑出 搜索面板
offcanvas-bottom 底部滑出 移动端筛选

6. 导航栏组件图与参考

(1) 导航栏组件层级

100% 
graph TD
    subgraph navbar
        A[.navbar] --> B[.container]
        B --> C[.navbar-brand 品牌标识]
        B --> D[.navbar-toggler 汉堡按钮]
        B --> E[.collapse .navbar-collapse 折叠面板]
        E --> F[.navbar-nav 导航列表]
        F --> G[.nav-item 链接项]
        G --> H[.nav-link 链接]
        G --> I[.dropdown 下拉菜单]
        I --> J[.dropdown-menu]
        J --> K[.dropdown-item]
        E --> L[搜索表单 / 按钮等]
    end
    subgraph 配色
        A --> M[bg-* 背景色]
        A --> N[navbar-dark / navbar-light 文字色]
    end
    subgraph 定位
        A --> O[fixed-top / fixed-bottom / sticky-top]
    end

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(2) 导航栏断点行为参考

navbar-expand 值 折叠行为 水平展开屏幕 典型场景
不写 始终折叠 无 手机端专用导航
navbar-expand-sm <576px 折叠 >=576px 大屏手机+
navbar-expand-md <768px 折叠 >=768px 平板+
navbar-expand-lg <992px 折叠 >=992px 桌面+ (最常用)
navbar-expand-xl <1200px 折叠 >=1200px 大屏桌面
navbar-expand-xxl <1400px 折叠 >=1400px 超大屏

▶ 示例：固定顶部导航栏

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Top Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { padding-top: 56px; }
    .scroll-content { height: 1500px; background: linear-gradient(#f8f9fa, #e9ecef); }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">顶部导航</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navFixed">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navFixed">
        <ul class="navbar-nav ms-auto">
          <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>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container scroll-content d-flex justify-content-center align-items-center">
    <p class="text-muted">fixed-top 固定在视口顶部，滚动页面时始终可见。</p>
  </div>

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

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：导航栏含搜索和按钮

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar with Search</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">MyApp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navSearch">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navSearch">
        <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 me-2" role="search">
          <input class="form-control me-2" type="search" placeholder="搜索..." aria-label="Search">
          <button class="btn btn-outline-primary" type="submit">搜索</button>
        </form>
        <a href="#" class="btn btn-primary">登录</a>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>导航栏包含搜索框和登录按钮，折叠时全部收进汉堡菜单。</p>
  </div>

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

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：Mega Menu 下拉菜单

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mega Dropdown</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .mega-menu { min-width: 400px; padding: 1rem; }
    @media (max-width: 991.98px) { .mega-menu { min-width: auto; } }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Mega Shop</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMega">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMega">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">商品分类</a>
            <div class="dropdown-menu mega-menu p-4">
              <div class="row g-3">
                <div class="col-6">
                  <h6 class="dropdown-header">电子产品</h6>
                  <a class="dropdown-item" href="#">手机</a>
                  <a class="dropdown-item" href="#">电脑</a>
                  <a class="dropdown-item" href="#">耳机</a>
                  <a class="dropdown-item" href="#">配件</a>
                </div>
                <div class="col-6">
                  <h6 class="dropdown-header">生活家居</h6>
                  <a class="dropdown-item" href="#">家具</a>
                  <a class="dropdown-item" href="#">厨具</a>
                  <a class="dropdown-item" href="#">家纺</a>
                  <a class="dropdown-item" href="#">收纳</a>
                </div>
              </div>
            </div>
          </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>

  <div class="container mt-4">
    <p>Mega Menu 使用 <code>dropdown-menu</code> + 内部 Grid 实现多列布局，适合分类较多的导航。</p>
  </div>

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

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：透明导航栏在 Hero 上

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transparent Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background: rgba(0,0,0,0.3); backdrop-filter: blur(4px);">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navTrans">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navTrans">
        <ul class="navbar-nav ms-auto">
          <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>
        </ul>
      </div>
    </div>
  </nav>

  <div class="d-flex justify-content-center align-items-center text-white" style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="text-center">
      <h1 class="display-3 fw-bold">创意设计工作室</h1>
      <p class="lead">我们用设计讲述品牌故事</p>
      <a href="#" class="btn btn-light btn-lg mt-3">了解更多</a>
    </div>
  </div>

  <div class="container py-5">
    <p>透明导航栏叠加在 Hero 背景上，滚动时与内容重叠。<code>backdrop-filter: blur(4px)</code> 增强可读性。</p>
  </div>

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

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

❓ 常见问题

Q navbar-expand-lg 在 lg 以下折叠，但我想让它提前在 md 以下就折叠怎么办？
A 把断点改小即可：navbar-expand-md 表示 md 及以上水平展开，md 以下折叠。可选值：sm / md / lg / xl / xxl。不写 navbar-expand-* 则始终折叠。
Q 导航栏的下拉菜单在手机端怎么点不开？
A 确保下拉触发器是 <a> 或 <button> 标签且包含 data-bs-toggle="dropdown"，并且页面底部引入了 Bootstrap JS 包。
Q Offcanvas 和 Modal 有什么区别？
A Offcanvas 是侧滑面板，不阻挡主内容区（桌面端仍可见），适合导航/筛选。Modal 是居中弹窗，完全遮挡背景，适合确认对话框/表单填写。
Q 导航栏能固定顶部吗？
A 可以。加 fixed-top 类即可固定到视口顶部，此时需要给 body 添加 padding-top 补偿高度。还有 sticky-top 选项：正常滚动直到滑出视口才固定。
Q 导航栏的无障碍（Accessibility）需要注意什么？
A 要点：(1) 用 <nav> 标签并加 aria-label 描述导航用途；(2) 汉堡按钮使用 aria-controls 指向折叠面板 ID；(3) 当前页面链接加 aria-current="page"；(4) 下拉菜单触发器使用 aria-expanded 状态。Bootstrap 的 JS 组件会自动处理大部分 ARIA 属性。

📖 小节

📝 作业

  1. ⭐ 创建一个完整的企业站导航栏：深色背景、左侧品牌 Logo、右侧菜单链接（Home / About / Services / Contact）、Services 含下拉子菜单。
  2. ⭐⭐ 将导航栏的折叠方式改为 Offcanvas（侧边滑出），在 Offcanvas 面板内添加搜索框和用户登录按钮。
  3. ⭐⭐⭐ 创建一个底部工具栏：使用 fixed-bottom 固定定位，包含 4 个图标链接，模拟手机 App 底部导航。

上一课： Grid 网格 · 下一课： 按钮与按钮组

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏