Bootstrap为样式导航元素提供了一些不同的选项.它们共享相同的标记和基类， .nav . Bootstrap还提供了一个帮助类，用于共享标记和状态.交换修饰符类以在每种样式之间切换.
创建选项卡式导航菜单 :
从基本无序列表开始，基类为 .nav
添加课程 .nav-tabs .
以下示例演示了这个和减号;
<p>Tabs Example</p> <ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
要将标签变为药片，请按照上述相同步骤使用.nav-pills类而不是.nav-tabs。
以下示例演示了:
<p>Pills Example</p> <ul class = "nav nav-pills"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
您可以使用类.nav-stacked以及类和减号来垂直堆叠药丸。 .nav，.nav-pills。
以下示例演示了此:
<p>Vertical Pills Example</p> <ul class = "nav nav-pills nav-stacked"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
您可以使用类.nav-justified以及.nav，.nav-tabs或.nav，.nav-pills分别制作宽度超过768px的屏幕，其宽度相等的制表符或药丸。 在较小的屏幕上，导航链接是堆叠的。
以下示例演示了这一点:
<p>Justified Nav Elements Example</p> <ul class = "nav nav-pills nav-justified"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul> <br> <br> <br> <ul class = "nav nav-tabs nav-justified"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
对于每个.nav类，如果添加.disabled类，它将创建一个灰色链接，该链接也会禁用:hover状态，如下例所示:
<p>Disabled Link Example</p> <ul class = "nav nav-pills"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li class = "disabled"><a href = "#">iOS(disabled link)</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul> <br> <br> <ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
这个类只会改变<a>的外观，而不是它的功能。 使用自定义JavaScript在此处禁用链接。
导航菜单与下拉菜单共享类似的语法。 默认情况下，您有一个列表项，其中一个锚点与一些数据属性一起使用，以触发带有.dropdown-menu类的无序列表。
向标签添加下拉列表:
从基本无序列表开始，基类为.nav
添加类.nav-tabs。
现在添加一个带有.dropdown-menu类的无序列表。
<p>Tabs With Dropdown Example</p> <ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li class = "dropdown"> <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Java <span class = "caret"></span> </a> <ul class = "dropdown-menu"> <li><a href = "#">Swing</a></li> <li><a href = "#">jMeter</a></li> <li><a href = "#">EJB</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </li> <li><a href = "#">PHP</a></li> </ul>
要用Pills做同样的事情，只需将 .nav-tabs 类交换为 .nav-pills ，如下例所示.
<p>Pills With Dropdown Example</p> <ul class = "nav nav-pills"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li class = "dropdown"> <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Java <span class = "caret"></span> </a> <ul class = "dropdown-menu"> <li><a href = "#">Swing</a></li> <li><a href = "#">jMeter</a></li> <li><a href = "#">EJB</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </li> <li><a href = "#">PHP</a></li> </ul>
