freeCodeCamp/guide/chinese/bootstrap/tabs-and-pills/index.md

title	localeTitle
Tabs and 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> 

丸

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> 

药片堆积

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

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

Bootstrap标签/药丸合理

通过使用.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>