Bootstrap 中创建选项卡式药丸与垂直药丸导航菜单

在网页设计中，导航菜单起着至关重要的作用，它能引导用户轻松访问网站的不同内容。Bootstrap 作为流行的前端框架，提供了便捷的方式来创建选项卡式药丸与垂直药丸导航菜单，极大地提升了用户体验。

创建选项卡式药丸导航菜单

选项卡式药丸导航菜单在视觉上呈现为一系列类似药丸形状的标签，用户点击不同标签可切换显示相应内容。要在 Bootstrap 中创建它，首先需要构建 HTML 结构。在一个容器元素内，使用无序列表（<ul>）创建导航链接列表，每个列表项（<li>）代表一个导航项。为每个列表项添加 nav-item 类，为链接添加 nav-link 类。为激活状态的链接添加 active 类，以突出显示当前选中的选项卡。

例如：

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于我们</a>
  </li>
</ul>

接下来是关联选项卡内容。通过创建一个与导航项对应的内容区域，使用 tab-content 类来包裹所有内容块，每个内容块使用 tab-pane 类，并为其添加唯一的 id，该 id 需与导航链接的 href 属性值相对应。这样，当用户点击导航链接时，相应的内容就会显示出来。

创建垂直药丸导航菜单

垂直药丸导航菜单将药丸形状的导航项垂直排列，适合在侧边栏等位置使用。其基本原理与水平选项卡式药丸导航类似，但需要添加一些额外的类来实现垂直布局。

在上述代码基础上，将 nav-pills 类修改为 nav-pills flex-column。这样，导航项就会垂直排列。

<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于我们</a>
  </li>
</ul>

同时，确保内容区域的关联依然正确，以保证用户操作时能正常显示相应内容。

通过以上步骤，在 Bootstrap 中创建选项卡式药丸与垂直药丸导航菜单变得轻而易举。这不仅丰富了网页的导航形式，还为用户提供了更加直观、便捷的操作体验，助力打造更优质的网站界面。