如何在 Bootstrap 中创建选项卡式、药丸和垂直药丸导航菜单？

在 Bootstrap 中创建选项卡式、药丸和垂直药丸导航菜单，你可以使用 Bootstrap 的导航组件和 CSS 类。下面是一些示例代码，可以帮助你开始：

1. 选项卡式导航菜单

<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="#">Services</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

2. 药丸导航菜单

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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="#">Services</a>
  </li>
</ul>

3. 垂直药丸导航菜单

<ul class="nav flex-column nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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="#">Services</a>
  </li>
</ul>

这些示例代码分别展示了如何在 Bootstrap 中创建选项卡式、药丸和垂直药丸导航菜单。你可以根据自己的需求修改和定制这些代码，以适应你的网站或应用程序的样式和功能。

请注意，为了正确显示和功能化这些组件，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以从 Bootstrap 的官方网站下载最新的版本，或者通过 CDN 链接到你的项目中。

希望这可以帮助你开始使用 Bootstrap 创建选项卡式、药丸和垂直药丸导航菜单！如果你有任何进一步的问题，请随时提问。