bootstrap組件中如何使用導航組件

這篇文章主要介紹了bootstrap組件中如何使用導航組件，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Bootstrap 中的導航組件都依賴同一個 .nav 類和ul，狀態類也是共用的。改變修飾類可以改變樣式。

1、標簽頁

.nav-tabs

<ul class="nav nav-tabs" role="tablist">
 <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>

2、膠囊式標簽頁

.nav-pills

<ul class="nav nav-pills" role="tablist">
 <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>

3、垂直的導航

只需要添加.nav-stacked就可以實現豎直方向上的導航

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

4、禁用的鏈接

如果需要禁用某個導航選項，只需要在對應的li上添加.disabled就可以了

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

5、給導航選項添加下拉菜單

如果需要導航的某個選項是下拉菜單可以修改對應的li

1)給li添加.dropdown

2)a標簽當做下拉菜單的觸發器，添加.dropdown-toggle 和 data-toggle=”dropdown”

3)a標簽里面添加文字和span

4)li里面還要添加ul，也就是dropdown-menu

<ul class="nav nav-tabs">
 ...
 <li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
   Dropdown 
   <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
   ...
  </ul>
 </li>
 ...
</ul>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“bootstrap組件中如何使用導航組件”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!