如何在 Bootstrap5 中创建 Pills 导航菜单？

在 Bootstrap5 中，Pills 导航菜单用于在网站或应用程序的不同部分之间进行导航。这是一种常见的导航样式，它可以显示当前选定的选项，让用户知道他们正在浏览哪个部分。

在本文中，我将向您展示如何使用 Bootstrap5 创建 Pills 导航菜单。

步骤 1：引入 Bootstrap5

首先，您需要将 Bootstrap5 引入您的项目中。

您可以通过以下方式引入：

<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>

或者您可以从 Bootstrap 官网下载 CSS 和 JS 文件，然后将它们引入您的项目。

步骤 2：创建 Pills 导航菜单

接下来，我们将创建 Pills 导航菜单。

<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="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

在这个例子中，我们使用了 nav-pills 类来创建 Pills 导航菜单。然后，我们为每个菜单项添加 nav-item 类，并且每个菜单项都使用 nav-link 类来指定链接。

我们还将 active 类添加到第一个菜单项上，以显示默认选项。

步骤 3：自定义 Pills 导航菜单

您可以使用 Bootstrap5 的许多样式与类来自定义 Pills 导航菜单。下面是一些示例：

<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="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </li>
</ul>

在上面的示例中，我们使用了以下类：

• disabled：用于禁用菜单项。
• dropdown：用于创建下拉菜单。
• dropdown-menu：下拉菜单的容器。
• dropdown-item：下拉菜单中的选项。
• dropdown-divider：用于添加菜单项之间的分隔符。

结论

现在您已经知道如何在 Bootstrap5 中创建 Pills 导航菜单了。使用 Bootstrap5 的各种类和样式，您可以轻松创建自定义的导航菜单。