Bootstrap 5学习教程，从入门到精通，Bootstrap 5 导航栏语法知识点及案例（18）

Bootstrap 5 导航栏语法知识点及案例

一、导航栏基础语法

Bootstrap 5 的导航栏是一个响应式、可定制的导航组件，包含以下核心部分：

<nav class="navbar navbar-expand-[breakpoint] navbar-[color] bg-[color]"><div class="container-fluid"><!-- 品牌标志/名称 --><a class="navbar-brand" href="#">Navbar</a><!-- 移动端折叠按钮 --><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"><span class="navbar-toggler-icon"></span></button><!-- 导航内容 --><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li></ul><!-- 表单或其他内容 --><form class="d-flex"><input class="form-control me-2" type="search"><button class="btn btn-outline-success" type="submit">Search</button></form></div></div>
</nav>

二、完整语法知识点

1. 基础类

.navbar: 定义导航栏容器
.navbar-brand: 用于品牌标志或名称
.navbar-nav: 导航链接容器
.nav-item: 导航项容器
.nav-link: 导航链接

2. 响应式断点

.navbar-expand-sm|md|lg|xl|xxl: 指定从哪个断点开始不折叠
.navbar-expand: 始终展开不折叠

3. 颜色方案

.bg-*: 背景颜色 (primary, secondary, success, danger, warning, info, light, dark)
.navbar-dark: 深色导航栏 (浅色文字)
.navbar-light: 浅色导航栏 (深色文字)

4. 定位

.fixed-top: 固定在顶部
.fixed-bottom: 固定在底部
.sticky-top: 粘性定位在顶部

5. 其他组件

.navbar-toggler: 折叠按钮
.navbar-toggler-icon: 折叠按钮图标
.navbar-text: 导航栏中的文本
.dropdown: 下拉菜单
.offcanvas: 侧边栏导航

6. 间距与对齐

.me-auto: 左对齐 (margin-end auto)
.ms-auto: 右对齐 (margin-start auto)
.mx-auto: 水平居中
.my-*: 垂直间距

三、完整案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 导航栏示例</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><!-- 1. 基础导航栏示例 --><nav class="navbar navbar-expand-lg navbar-light bg-light mb-5"><div class="container-fluid"><!-- 品牌标志 --><a class="navbar-brand" href="#"><img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">Bootstrap 5</a><!-- 移动端折叠按钮 --><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarBasic"><span class="navbar-toggler-icon"></span></button><!-- 导航内容 --><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 dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 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><!-- 搜索表单 --><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><!-- 2. 深色固定顶部导航栏 --><nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top mb-5"><div class="container"><a class="navbar-brand" href="#">固定顶部</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDark"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarDark"><ul class="navbar-nav me-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 disabled" href="#" tabindex="-1" aria-disabled="true">禁用链接</a></li></ul><span class="navbar-text">当前用户: 访客</span></div></div></nav><!-- 内容占位，用于展示固定导航栏效果 --><div style="height: 1000px; padding-top: 60px;"><p class="container">向下滚动查看固定顶部导航栏效果</p></div><!-- 3. 粘性定位导航栏带下拉菜单 --><nav class="navbar navbar-expand-lg navbar-light bg-info sticky-top mb-5"><div class="container-fluid"><a class="navbar-brand" href="#">粘性导航</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSticky"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSticky"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">首页</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" 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></ul><ul class="navbar-nav ms-auto"><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><!-- 4. 响应式导航栏带Offcanvas --><nav class="navbar navbar-dark bg-primary mb-5"><div class="container-fluid"><a class="navbar-brand" href="#">Offcanvas导航</a><button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"><span class="navbar-toggler-icon"></span></button><div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasNavbarLabel">菜单</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button></div><div class="offcanvas-body"><ul class="navbar-nav justify-content-end flex-grow-1 pe-3"><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 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="#">操作1</a></li><li><a class="dropdown-item" href="#">操作2</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">其他操作</a></li></ul></li></ul><form class="d-flex mt-3"><input class="form-control me-2" type="search" placeholder="搜索"><button class="btn btn-outline-light" type="submit">搜索</button></form></div></div></div></nav><!-- 5. 自定义颜色导航栏 --><nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;"><div class="container"><a class="navbar-brand" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-code-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0zm2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0z"/></svg>自定义导航</a><div class="collapse navbar-collapse" id="navbarCustom"><div class="navbar-nav"><a class="nav-link" href="#">首页</a><a class="nav-link" href="#">文档</a><a class="nav-link" href="#">示例</a><a class="nav-link" href="#">关于</a></div></div></div></nav><!-- Bootstrap 5 JS 包（含 Popper） --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

四、关键点解析

响应式设计：通过navbar-expand-*类控制导航栏在不同屏幕尺寸下的展开/折叠行为
导航栏定位：
- fixed-top/fixed-bottom：始终固定在视口顶部/底部
- sticky-top：滚动到一定位置后固定在顶部
下拉菜单：需要配合dropdown类和JavaScript交互
Offcanvas组件：Bootstrap 5新增的侧边栏导航模式
颜色定制：
- 使用内置颜色类如bg-primary、navbar-dark
- 也可以使用自定义CSS覆盖样式
对齐控制：
- me-auto将内容推到左侧
- ms-auto将内容推到右侧
- 可以创建多个导航部分并分别控制对齐