bootstrap二级菜单导航栏

Bootstrap是一个流行的前端开发框架，它提供了一系列预设的样式和组件，包括导航栏。Bootstrap的导航栏组件支持创建复杂的菜单结构，二级菜单就是其中一种常见的布局。在Bootstrap中，你可以使用`<nav>`标签配合`<ul>`和`<li>`元素以及`.dropdown`类来实现二级菜单。

以下是一个基本的Bootstrap二级菜单导航栏示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
          主菜单
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li><a class="dropdown-item" href="#">选项1</a></li>
          <li><a class="dropdown-item" href="#">选项2</a></li>
          <!-- 更多选项... -->
        </ul>
      </li>
    </ul>
  </div>
</nav>

在这个例子中，当用户点击主菜单按钮时，`.dropdown`类会让`<ul>`下拉显示二级菜单。`.dropdown-toggle`和`<a>`标签一起创建了一个下拉链接，`data-bs-toggle="dropdown"`则是Bootstrap的自定义属性，用于激活下拉菜单。