Bootstrap多级导航栏(级联导航)的实现代码

一、 Bootstrap 多级导航栏简介

Bootstrap 是一款流行的前端框架，提供了丰富的常用 UI 组件。其中，多级导航栏是一个非常实用的组件，可以帮助用户快速地找到所需的信息。Bootstrap 的多级导航栏也被称为级联导航。

Bootstrap 的多级导航栏分为两种类型：下拉式菜单和嵌套菜单。

下拉式菜单是主菜单和子菜单以下拉列表的形式呈现，用户点击主菜单时可以展开子菜单选择所需的内容。

嵌套菜单是主菜单和子菜单以嵌套的形式呈现，用户点击主菜单时，子菜单会融入到主菜单中，点击主菜单上的子菜单项，可以展开子菜单继续选择。

二、 Bootstrap 多级导航栏 (下拉式菜单) 的实现代码

Bootstrap 多级导航栏 (下拉式菜单) 的实现代码如下所示：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Submenu 1</a></li>
              <li><a class="dropdown-item" href="#">Submenu 2</a></li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>

在此代码中，nav 元素代表导航栏，navbar 类表示该导航栏基于 Bootstrap 框架。navbar-expand-lg 类表示在屏幕宽度大于 992 像素时，导航栏会扩展到屏幕宽度并显示全部菜单项。

通过 Bootstrap 提供的下拉菜单实现多级导航栏。dropdown 类用于包含具有下拉菜单样式的主菜单项，dropdown-menu 类用于包含下拉菜单内的项。

在此代码中，dropdown 类用于导航栏中的“Dropdown”项，它是一个下拉式菜单。包含 dropdown-submenu 类的 div 元素表示子菜单，内部嵌套一个下拉菜单，可以实现多级导航栏的功能。

三、 Bootstrap 多级导航栏 (嵌套菜单) 的实现代码

Bootstrap 多级导航栏 (嵌套菜单) 的实现代码如下所示：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li>
            <a class="dropdown-item" href="#">Action</a>
          </li>
          <li>
            <a class="dropdown-item" href="#">Another action</a>
          </li>
          <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Submenu 1</a></li>
              <li><a class="dropdown-item" href="#">Submenu 2</a></li>
              <li class="dropdown-submenu">
                <a class="dropdown-item dropdown-toggle" href="#">Submenu 3</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Submenu 3-1</a></li>
                  <li><a class="dropdown-item" href="#">Submenu 3-2</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

在此代码中，nav 元素代表导航栏，navbar 类表示该导航栏基于 Bootstrap 框架。

与下拉式菜单不同，这里使用 ul 和 li 元素实现嵌套菜单。

dropdown-submenu 类表示子菜单。子菜单也是一个嵌套的 ul 元素。在此例子中，子菜单 Submenu 3 包含两个子菜单项，这些项是 li 元素。

四、 结语

以上是关于 Bootstrap 多级导航栏的实现方法，需要注意的地方是，导航栏要包含固定的类和元素，以确保整个导航栏的外观和功能都是符合预期的。Bootstrap 多级导航栏最多支持三级导航栏（即包括两个子菜单），如果要实现更深层次的导航栏，需要使用自定义的 JavaScript 代码实现。