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

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

Bootstrap 5 提供了强大的导航组件，帮助开发者快速构建响应式且美观的导航栏。

一、Bootstrap 5 导航组件概述

Bootstrap 5 提供了多种导航组件，主要包括：

导航栏（Navbar）：用于网站的主要导航区域，支持响应式设计。
导航（Nav）：基础的导航组件，可以用于标签页、导航菜单等。
面包屑导航（Breadcrumb）：显示当前页面的位置路径。

本指南将重点介绍 导航栏（Navbar） 和 导航（Nav） 的使用。

二、导航栏（Navbar）语法知识点

1. 基本结构

<nav class="navbar navbar-expand{-sm|-md|-lg|-xl|-xxl} navbar-light bg-light"><div class="container-fluid"><!-- 品牌/logo --><a class="navbar-brand" href="#">品牌</a><!-- 切换按钮（移动端） --><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航"><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" href="#" tabindex="-1" aria-disabled="true">禁用</a></li></ul></div></div>
</nav>

2. 主要类说明

navbar：基础类，定义导航栏。
navbar-expand{-sm|-md|-lg|-xl|-xxl}：控制导航栏在不同屏幕尺寸下的展开行为。
navbar-light / navbar-dark：设置导航栏的文字和图标颜色。
bg-light / bg-dark 等：设置导航栏的背景颜色。
navbar-brand：品牌或网站名称。
navbar-toggler：切换按钮，用于在移动端显示或隐藏导航链接。
navbar-collapse：包含导航链接的容器。
navbar-nav：导航链接的容器。
nav-item：单个导航项。
nav-link：导航链接。

3. 响应式设计

通过添加 navbar-expand-{breakpoint} 类，可以控制导航栏在不同屏幕尺寸下的显示方式。例如：

navbar-expand-sm：在小屏幕（≥576px）下展开。
navbar-expand-md：在中屏幕（≥768px）下展开。
navbar-expand-lg：在大屏幕（≥992px）下展开。
navbar-expand-xl：在超大屏幕（≥1200px）下展开。
navbar-expand-xxl：在超超大屏幕（≥1400px）下展开。

4. 导航栏颜色

Bootstrap 提供了多种预定义的颜色类：

navbar-light bg-light：浅色背景，文字为深色。
navbar-dark bg-dark：深色背景，文字为浅色。
其他颜色类如 bg-primary, bg-success, bg-danger 等也可使用。

5. 导航栏内容

导航栏可以包含以下内容：

品牌/logo：使用 navbar-brand。
导航链接：使用 nav-link。
下拉菜单：结合 dropdown 组件。
表单元素：如搜索框。
按钮：如登录按钮。

三、导航（Nav）语法知识点

1. 基本结构

<ul class="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><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a></li>
</ul>

2. 主要类说明

nav：基础类，定义导航。
nav-item：单个导航项。
nav-link：导航链接。
active：表示当前活动的链接。
disabled：禁用链接。

3. 对齐方式

左对齐（默认）：
```
<ul class="nav">...
</ul>
```

居中对齐：

<ul class="nav justify-content-center">...
</ul>

右对齐：

<ul class="nav justify-content-end">...
</ul>

4. 垂直导航

<ul class="nav flex-column">...
</ul>

5. 导航选项卡（Tabs）

<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">活动</a></li><li class="nav-item"><a class="nav-link" href="#">链接</a></li>...
</ul>

6. 导航药丸（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>

7. 填充和调整

填充：

<ul class="nav nav-pills nav-fill">...
</ul>

等宽：

<ul class="nav nav-pills nav-justified">...
</ul>

四、案例代码

以下是一个包含导航栏和导航链接的完整示例，代码中包含详细注释：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><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><!-- 导航栏 --><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container-fluid"><!-- 品牌 --><a class="navbar-brand" href="#">我的网站</a><!-- 切换按钮（移动端） --><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span></button><!-- 导航链接 --><div class="collapse navbar-collapse" id="navbarNav"><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 dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">服务</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><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><!-- 联系 --><li class="nav-item"><a class="nav-link" href="#">联系</a></li></ul><!-- 搜索表单 --><form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"><button class="btn btn-outline-success" type="submit">搜索</button></form></div></div></nav><!-- 主内容 --><div class="container mt-4"><h1>欢迎来到我的网站</h1><p>这是一个使用 Bootstrap 5 构建的导航栏示例。</p></div><!-- Bootstrap 5 JS 和依赖项 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代码说明

引入 Bootstrap 5 CSS 和 JS：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

使用 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件。

导航栏结构：
```
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">...
</nav>
```
- navbar-expand-lg：在大屏幕（≥992px）下展开。
- navbar-dark bg-dark：深色背景，文字为浅色。

品牌：

<a class="navbar-brand" href="#">我的网站</a>

设置导航栏的品牌名称。

切换按钮：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span>
</button>

在移动端显示一个切换按钮，用于展开或折叠导航链接。

导航链接：
```
<div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav me-auto mb-2 mb-lg-0">...</ul>...
</div>
```
- collapse navbar-collapse：包含导航链接的容器，支持响应式折叠。
- navbar-nav：导航链接的容器。
- me-auto：将导航链接推到左侧，右侧留出空间给搜索表单。

下拉菜单：

<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">服务</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">服务一</a></li>...</ul>
</li>

使用 dropdown 组件创建下拉菜单。

搜索表单：

<form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"><button class="btn btn-outline-success" type="submit">搜索</button>
</form>

使用 Bootstrap 的表单类创建一个搜索框和提交按钮。

主内容容器：
```
<div class="container mt-4">...
</div>
```
使用 container 类创建一个响应式容器，并添加顶部外边距。

五、扩展功能

1. 固定导航栏

固定顶部：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">...
</nav>

固定底部：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">...
</nav>

粘性顶部（在滚动时固定）：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">...
</nav>

2. 颜色主题

Bootstrap 提供了多种颜色主题，可以根据需要选择：

bg-primary：主要颜色。
bg-secondary：次要颜色。
bg-success：成功颜色。
bg-danger：危险颜色。
bg-warning：警告颜色。
bg-info：信息颜色。
bg-light：浅色。
bg-dark：深色。

3. 导航栏内容对齐

左侧对齐（默认）。

居中对齐：

<div class="navbar-nav mx-auto">...
</div>

右侧对齐：

<div class="navbar-nav ms-auto">...
</div>

4. 导航栏中添加按钮

<div class="collapse navbar-collapse" id="navbarNav">...<button class="btn btn-outline-light me-2" type="button">按钮</button><button class="btn btn-primary" type="button">注册</button>
</div>