案例菜单

Bootstrap 案例：添加导航菜单

Bootstrap 中的导航菜单

大多数网站和应用程序都需要某种形式的导航。Bootstrap 提供了灵活的组件来创建各种类型的导航菜单。

在 HTML 中，菜单通常使用无序列表 <ul> 构建。Bootstrap 使用特定的类来样式化这个结构。

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

Bootstrap 提供了几种导航样式，例如 Tabs（标签页）和 Pills（药丸形）。

Tabs（标签页）

通过为 <ul> 元素添加 .nav-tabs 类来创建标签页。单独的项目使用 .nav-item，链接使用 .nav-link。

提示：使用 .active 类和 aria-current=“page” 标记当前页面链接以提高可访问性。

以下示例创建了导航标签页：

<ul class="nav nav-tabs">
  <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="#">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 3</a>
  </li>
</ul>

带下拉菜单的标签页

标签页也可以包含下拉菜单。在 <li class=“nav-item”> 上使用 .dropdown 类和 Bootstrap 的下拉菜单 JavaScript 插件属性。

以下示例为“Menu 1”添加了一个下拉菜单：

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu 1</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Submenu 1-1</a></li>
      <li><a class="dropdown-item" href="#">Submenu 1-2</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 3</a>
  </li>
</ul>

<!-- 请确保包含 Bootstrap JS 以实现下拉菜单功能 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->

Pills（药丸形）

通过为 <ul> 元素添加 .nav-pills 来创建药丸形导航。在 .nav-link 上使用 .active 和 aria-current=“page” 标记当前页面。

<ul class="nav nav-pills">
  <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="#">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 3</a>
  </li>
</ul>

垂直药丸形导航

通过为 .nav-pills 元素添加 .flex-column 工具类，药丸形导航可以垂直显示。

以下示例放置了一个垂直药丸形菜单。这种布局本身就是响应式的。您可以根据需要将其放置在网格列中。

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills flex-column">
        <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="#">Menu 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 3</a>
        </li>
      </ul>
    </div>
    <div class="col-md-9">
      <!-- 右侧内容区域 -->
      <p>主内容区域...</p>
    </div>
  </div>
</div>

带下拉菜单的药丸形导航

药丸形导航也可以包含下拉菜单，类似于标签页。

以下示例在垂直药丸形导航中为“Menu 1”添加了一个下拉菜单：

<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu 1</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Submenu 1-1</a></li>
      <li><a class="dropdown-item" href="#">Submenu 1-2</a></li>
      <li><a class="dropdown-item" href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 3</a>
  </li>
</ul>

<!-- 请确保包含 Bootstrap JS 以实现下拉菜单功能 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->

有关导航组件的更多详细信息，包括对齐、填充和对齐选项，以及与 Navbar 组件的集成，请查阅官方 Bootstrap 5 关于 Navs 和 Tabs 的文档。

案例 菜单