Bootstrap - 导航元素

---

---

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 分别使选项卡或药丸的宽度与其父元素在宽度大于 768 像素的屏幕上相等。在较小的屏幕上，导航链接将堆叠。

以下示例演示了这一点：

<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 来禁用链接。

下拉菜单

导航菜单与下拉菜单具有相似的语法。默认情况下，您有一个列表项，其锚点与一些 data-属性一起工作，以触发带有 .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>

带有下拉菜单的药丸

要对药丸执行相同的操作，只需将 .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>