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>