以'nav-pills 类引导程序 - Html'作主题

介绍

nav-pills是Bootstrap中的组件之一，用于创建具有操作选项卡的导航栏。

使用nav-pills可以创建水平导航栏、垂直导航栏以及丰富的选项卡标签等。

用法

nav-pills使用HTML结构定义，需要在ul元素中添加nav和nav-pills类来启用该组件。

水平导航栏

以下代码演示如何创建一个水平导航栏：

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">选项卡1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">选项卡2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">选项卡3</a>
  </li>
</ul> 

上面的代码创建了一个包含三个选项卡标签的水平导航栏。使用active类可以指定默认激活项。

垂直导航栏

以下代码演示如何创建一个垂直导航栏：

<ul class="nav flex-column nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">选项卡1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">选项卡2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">选项卡3</a>
  </li>
</ul>

上面的代码创建了一个包含三个选项卡标签的垂直导航栏。使用flex-column类可以设置垂直方向。

选项

nav-pills提供了多个选项可以进行定制，以下是一些常用选项：

• nav-link类：指定标签项链接的样式。
• active类：指定默认激活的标签项。
• disabled类：指定禁用的标签项。
• fade类：指定标签项是启用过渡动画效果的。
• show类：指定标签项可见。
• dropdown-toggle类：指定标签项为下拉菜单。
• data-toggle属性：指定触发选项卡的方式（如点击、鼠标悬停等）。

总结

使用nav-pills可以快速创建具备操作选项卡的导航栏，实现页面的导航和交互。在实际项目中，可以根据需求进行调整和定制。