BootStrap Tabs 和 Pills


标签和药丸是导航的形式。这意味着它们可以帮助最终用户以用户友好的方式浏览网站。

标签

要实现引导选项卡，首先需要一个分配了.nav类的元素。然后，您只需添加一个名为.nav-tabs的额外类。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
 </ul>

Pills

Bootstrap Pills的实现方式与Bootstrap Tabs相同，除了代替.nav-tabs ，使用.nav-pills 。

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
 </ul>

stacked

通过使用.nav stacked与.nav-pills一起堆叠，Bootstrap Pills也可以垂直堆叠。

<ul class="nav nav-pills nav-stacked">
  ...
 </ul>

Bootstrap Tabs和Pills对齐

通过使用.nav-justified类，Bootstrap Tabs和Pills在屏幕宽度超过768px时可以具有相同的父级宽度。在较小的屏幕上，导航链接是堆叠的。

<ul class="nav nav-tabs nav-justified">
  ...
 </ul>
 <ul class="nav nav-pills nav-justified">
  ...
 </ul>

禁用链接

对于任何导航组件（标签或药丸），为灰色链接添加.disabled ，不添加悬停效果

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
 </ul>

带下拉列表的标签

在导航标签中添加下拉菜单。

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
 </ul>

带下拉列表的标签

在导航丸中添加下拉菜单。

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
 </ul>

更多BootStrap教程

学习更多BootStrap教程