Bootstrap 4导航栏 - 响应式菜单设计指南

最后编辑于2025-04-14 12:38:12.5950933 +0800 CST

Bootstrap 4 导航栏

导航栏是网站中最重要的导航组件之一，通常放置在页面的顶部。Bootstrap 4提供了强大的导航栏组件，可以轻松创建响应式导航，在不同设备上展现最佳效果。

基本导航栏结构

一个基本的Bootstrap 4导航栏由以下部分组成：

  1. .navbar 类 - 定义导航栏容器
  2. .navbar-expand-* 类 - 控制响应式行为
  3. .navbar-nav 类 - 定义导航栏中的导航列表
  4. .nav-item 和 .nav-link 类 - 定义导航项和链接样式

以下是创建基本导航栏的代码：

html 
 1<nav class="navbar navbar-expand-sm bg-light">
 2  <!-- 导航链接 -->
 3  <ul class="navbar-nav">
 4    <li class="nav-item">
 5      <a class="nav-link" href="#">首页</a>
 6    </li>
 7    <li class="nav-item">
 8      <a class="nav-link" href="#">产品</a>
 9    </li>
10    <li class="nav-item">
11      <a class="nav-link" href="#">关于我们</a>
12    </li>
13  </ul>
14</nav>

在上面的代码中，.navbar-expand-sm 表示在小屏幕及以上（≥576px）水平显示导航链接，在超小屏幕上垂直堆叠显示。

垂直导航栏

如果要创建垂直导航栏，只需删除 .navbar-expand-* 类：

html 
 1<nav class="navbar bg-light">
 2  <ul class="navbar-nav">
 3    <li class="nav-item">
 4      <a class="nav-link" href="#">首页</a>
 5    </li>
 6    <li class="nav-item">
 7      <a class="nav-link" href="#">产品</a>
 8    </li>
 9    <li class="nav-item">
10      <a class="nav-link" href="#">关于我们</a>
11    </li>
12  </ul>
13</nav>

导航栏颜色方案

Bootstrap 4提供了多种预定义的颜色方案，可以通过背景色类和文本颜色类来控制：

  1. 背景色类：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-dark, .bg-light等
  2. 文本颜色类：.navbar-dark (白色文本) 和 .navbar-light (黑色文本)
html 
 1<!-- 浅色背景、深色文本 -->
 2<nav class="navbar navbar-expand-sm bg-light navbar-light">
 3  <!-- 导航内容 -->
 4</nav>
 5
 6<!-- 深色背景、浅色文本 -->
 7<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 8  <!-- 导航内容 -->
 9</nav>
10
11<!-- 主题色背景、浅色文本 -->
12<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
13  <!-- 导航内容 -->
14</nav>

.navbar-brand 类用于突出显示网站的品牌或Logo：

html 
1<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
2  <!-- 文字标识 -->
3  <a class="navbar-brand" href="#">网站名称</a>
4  
5  <!-- 导航内容 -->
6</nav>

也可以使用图片作为品牌标识：

html 
1<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
2  <a class="navbar-brand" href="#">
3    <img src="logo.png" alt="Logo" style="width:40px;">
4  </a>
5  
6  <!-- 导航内容 -->
7</nav>

折叠导航栏

在移动设备上，通常会将导航菜单折叠起来，通过汉堡按钮展开。创建折叠导航栏需要以下几个部分：

  1. 品牌标识
  2. 折叠按钮，带有 .navbar-toggler 类和 data-toggle="collapse" 属性
  3. 可折叠内容，带有 .collapse 和 .navbar-collapse 类
html 
 1<nav class="navbar navbar-expand-md bg-dark navbar-dark">
 2  <!-- 品牌标识 -->
 3  <a class="navbar-brand" href="#">Logo</a>
 4  
 5  <!-- 折叠按钮 -->
 6  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
 7    <span class="navbar-toggler-icon"></span>
 8  </button>
 9  
10  <!-- 导航链接 -->
11  <div class="collapse navbar-collapse" id="collapsibleNavbar">
12    <ul class="navbar-nav">
13      <li class="nav-item">
14        <a class="nav-link" href="#">首页</a>
15      </li>
16      <li class="nav-item">
17        <a class="nav-link" href="#">产品</a>
18      </li>
19      <li class="nav-item">
20        <a class="nav-link" href="#">服务</a>
21      </li>
22    </ul>
23  </div>
24</nav>

在上面的代码中：

  • .navbar-expand-md 表示在中等屏幕及以上(≥768px)水平显示导航链接，在小屏幕上折叠显示
  • .navbar-toggler 定义折叠按钮的样式
  • data-target="#collapsibleNavbar" 指定要折叠/展开的目标元素
  • .collapse.navbar-collapse 定义可折叠的内容

导航栏中的下拉菜单

导航栏中可以包含下拉菜单，使用 .dropdown 和 .dropdown-menu 类：

html 
 1<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 2  <!-- 品牌标识 -->
 3  <a class="navbar-brand" href="#">Logo</a>
 4  
 5  <!-- 导航链接 -->
 6  <ul class="navbar-nav">
 7    <li class="nav-item">
 8      <a class="nav-link" href="#">首页</a>
 9    </li>
10    <li class="nav-item">
11      <a class="nav-link" href="#">关于</a>
12    </li>
13    
14    <!-- 下拉菜单 -->
15    <li class="nav-item dropdown">
16      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
17        产品服务
18      </a>
19      <div class="dropdown-menu">
20        <a class="dropdown-item" href="#">产品1</a>
21        <a class="dropdown-item" href="#">产品2</a>
22        <a class="dropdown-item" href="#">服务项目</a>
23      </div>
24    </li>
25  </ul>
26</nav>

导航栏位置

Bootstrap 4导航栏可以放在页面的不同位置：

1. 固定在顶部

使用 .fixed-top 类可以将导航栏固定在页面顶部：

html 
1<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
2  <!-- 导航内容 -->
3</nav>

2. 固定在底部

使用 .fixed-bottom 类可以将导航栏固定在页面底部：

html 
1<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
2  <!-- 导航内容 -->
3</nav>

3. 粘性导航栏

使用 .sticky-top 类可以创建粘性导航栏，初始位置正常，滚动到其位置时固定在顶部：

html 
1<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
2  <!-- 导航内容 -->
3</nav>

导航栏中的表单

导航栏中添加表单是常见需求，例如搜索框或登录表单：

html 
 1<nav class="navbar navbar-expand-lg navbar-light bg-light">
 2  <a class="navbar-brand" href="#">网站名称</a>
 3  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
 4    <span class="navbar-toggler-icon"></span>
 5  </button>
 6  
 7  <div class="collapse navbar-collapse" id="navbarContent">
 8    <ul class="navbar-nav mr-auto">
 9      <li class="nav-item active">
10        <a class="nav-link" href="#">首页</a>
11      </li>
12      <li class="nav-item">
13        <a class="nav-link" href="#">产品</a>
14      </li>
15    </ul>
16    
17    <!-- 搜索表单 -->
18    <form class="form-inline my-2 my-lg-0">
19      <input class="form-control mr-sm-2" type="search" placeholder="搜索">
20      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
21    </form>
22  </div>
23</nav>

导航栏中的文本

使用 .navbar-text 类可以在导航栏中添加垂直居中的文本：

html 
 1<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 2  <a class="navbar-brand" href="#">Logo</a>
 3  <ul class="navbar-nav mr-auto">
 4    <li class="nav-item">
 5      <a class="nav-link" href="#">首页</a>
 6    </li>
 7  </ul>
 8  <span class="navbar-text">
 9    欢迎访问我们的网站
10  </span>
11</nav>

导航栏容器

导航栏可以使用不同类型的容器来控制内容宽度：

默认容器（固定宽度）

html 
1<nav class="navbar navbar-expand-lg navbar-light bg-light">
2  <div class="container">
3    <!-- 导航内容 -->
4  </div>
5</nav>

全宽容器

html 
1<nav class="navbar navbar-expand-lg navbar-light bg-light">
2  <div class="container-fluid">
3    <!-- 导航内容 -->
4  </div>
5</nav>

响应式行为

Bootstrap 4导航栏的响应式行为由 .navbar-expand-* 类控制，其中 * 可以是：

  • sm - 小屏幕及以上展开(≥576px)
  • md - 中等屏幕及以上展开(≥768px)
  • lg - 大屏幕及以上展开(≥992px)
  • xl - 超大屏幕及以上展开(≥1200px)

选择合适的断点取决于导航项的数量和网站设计需求。

样式定制技巧

以下是一些常用的导航栏样式定制技巧：

  1. 调整内边距：使用 .py-0、.py-1 等类控制垂直内边距
  2. 阴影效果：添加 .shadow-sm 类为导航栏添加浅阴影
  3. 导航项间距：使用 .mx-2 等间距类控制导航项之间的间距
  4. 活动状态：为当前页面的导航项添加 .active 类
  5. 禁用状态：为不可点击的项目添加 .disabled 类
html 
 1<nav class="navbar navbar-expand-md navbar-dark bg-primary shadow-sm py-1">
 2  <div class="container">
 3    <a class="navbar-brand" href="#">网站名称</a>
 4    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
 5      <span class="navbar-toggler-icon"></span>
 6    </button>
 7    <div class="collapse navbar-collapse" id="navbarNav">
 8      <ul class="navbar-nav">
 9        <li class="nav-item active mx-2">
10          <a class="nav-link" href="#">首页</a>
11        </li>
12        <li class="nav-item mx-2">
13          <a class="nav-link" href="#">产品</a>
14        </li>
15        <li class="nav-item mx-2">
16          <a class="nav-link disabled" href="#">即将推出</a>
17        </li>
18      </ul>
19    </div>
20  </div>
21</nav>

最佳实践与常见问题

最佳实践

  1. 始终使用 navbar-expand-* 类：确保在所有设备上都有良好的响应式体验
  2. 添加适当的颜色对比度：确保文本与背景之间有足够的对比度
  3. 使用 aria 属性：增强导航的可访问性
  4. 为当前页面添加 .active 类：提供视觉反馈

常见问题解决

  1. 导航栏在小屏幕上不折叠：检查是否正确添加了 .navbar-expand-* 类
  2. 折叠按钮不工作：确保已引入Bootstrap的JavaScript文件
  3. 导航项在大屏幕上垂直堆叠：检查 .navbar-nav 类是否正确添加
  4. 固定导航栏遮挡内容：为body添加适当的上内边距

完整导航栏示例

以下是一个功能完整的响应式导航栏示例，包含品牌标识、折叠菜单、下拉菜单和搜索表单：

html 
 1<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 2  <div class="container">
 3    <!-- 品牌标识 -->
 4    <a class="navbar-brand" href="#">
 5      <img src="logo.png" width="30" height="30" class="d-inline-block align-top mr-2" alt="">
 6      我的网站
 7    </a>
 8    
 9    <!-- 折叠按钮 -->
10    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
11      <span class="navbar-toggler-icon"></span>
12    </button>
13    
14    <!-- 可折叠内容 -->
15    <div class="collapse navbar-collapse" id="navbarContent">
16      <ul class="navbar-nav mr-auto">
17        <li class="nav-item active">
18          <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
19        </li>
20        <li class="nav-item">
21          <a class="nav-link" href="#">关于</a>
22        </li>
23        
24        <!-- 下拉菜单 -->
25        <li class="nav-item dropdown">
26          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
27            产品服务
28          </a>
29          <div class="dropdown-menu">
30            <a class="dropdown-item" href="#">网站开发</a>
31            <a class="dropdown-item" href="#">移动应用</a>
32            <div class="dropdown-divider"></div>
33            <a class="dropdown-item" href="#">咨询服务</a>
34          </div>
35        </li>
36        <li class="nav-item">
37          <a class="nav-link" href="#">联系我们</a>
38        </li>
39      </ul>
40      
41      <!-- 搜索表单 -->
42      <form class="form-inline my-2 my-lg-0">
43        <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
44        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
45      </form>
46    </div>
47  </div>
48</nav>

以上代码创建了一个功能完整的导航栏，它会在大屏幕上水平显示所有元素，在小屏幕上折叠成一个汉堡菜单按钮。