---

Bootstrap5 导航技术文档

概述

Bootstrap是一种流行的前端框架，可以轻松构建适应不同设备的响应式网站。Bootstrap的导航栏是网站的重要组成部分之一。Bootstrap5 导航栏增加了一些新的特性，比如新的样式类，颜色变量以及 JavaScript 事件。

基本结构

Bootstrap5 导航栏包括以下结构：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <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="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

• navbar - 导航栏的父容器。
• navbar-brand - 网站的logo或品牌名称。
• navbar-toggler - 触发导航栏折叠的按钮。
• navbar-nav - 导航链接的盒子容器。

紧凑型导航

Bootstrap5 添加了一个“紧凑型”（compact）导航栏选项，当屏幕小于 576 像素时，导航栏将自动使用紧凑型布局。此外，我们还可以通过添加 navbar-expand-sm 类来强制使用紧凑型导航。

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  ...
</nav>

响应式断点

在Bootstrap5中，之前的4个响应式断点已被替换为以下断点：

• sm - 小屏幕，宽度大于或等于576像素。
• md - 中等屏幕，宽度大于或等于768像素。
• lg - 大屏幕，宽度大于或等于992像素。
• xl - 超大屏幕，宽度大于或等于1200像素。

我们可以通过在class中添加对应的前缀navbar-expand-{sm|md|lg|xl}来控制导航栏与屏幕的对应。

颜色变量

Bootstrap5 中引入了颜色变量，这意味着您可以轻松地更改导航栏的颜色、背景颜色或悬停颜色。以下是一些可用的颜色变量：

--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;

通过定义以下样式，可以更改导航栏的颜色：

.navbar {
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

.navbar .nav-link {
  color: var(--bs-light);
}

.navbar .nav-link:hover {
  background-color: var(--bs-light);
  color: var(--bs-primary);
}

JavaScript 事件

Bootstrap5提供了一些新的JavaScript事件，用于响应导航栏的不同交互。

隐藏导航栏事件

以下两个事件将在隐藏导航时触发：

• hide.bs.dropdown
• hidden.bs.dropdown

例如，要在导航栏收起时显示一个警告框：

let dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
let dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

let navbar = document.querySelector('.navbar')
navbar.addEventListener('hide.bs.dropdown', function (event) {
  alert('The dropdown will be hidden.')
})

显示导航栏事件

以下两个事件将在显示导航时触发：

• show.bs.dropdown
• shown.bs.dropdown

例如，要在导航栏展开时进行一些操作:

let dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
let dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

let navbar = document.querySelector('.navbar')
navbar.addEventListener('show.bs.dropdown', function (event) {
  console.log('The dropdown will be shown.')
})

总结

Bootstrap5 导航栏是一个十分重要和灵活的组件，可以根据不同需求和设备灵活布局实现响应式和个性化导航交互。Bootstrap5 持续更新和完善，使用新特性和技术也能为您的项目带来更多选择和优势。