欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

bootstrap組件之導(dǎo)航組件使用方法

 更新時(shí)間：2017年01月19日 11:54:42   作者：zaichuanguanshui  
Bootstrap 中的導(dǎo)航組件都依賴同一個(gè) .nav 類和ul，狀態(tài)類也是共用的。改變修飾類可以改變樣式。接下來通過本文給大家介紹bootstrap 導(dǎo)航組件使用方法，一起看看吧

在上篇文章給大家介紹了bootstrap組件之按鈕式下拉菜單小結(jié)，下面通過本文給大家介紹bootstrap導(dǎo)航組件的使用方法，一起看看吧！

Bootstrap 中的導(dǎo)航組件都依賴同一個(gè) .nav 類和ul，狀態(tài)類也是共用的。改變修飾類可以改變樣式。

1、標(biāo)簽頁

.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、膠囊式標(biāo)簽頁

.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、垂直的導(dǎo)航

只需要添加.nav-stacked就可以實(shí)現(xiàn)豎直方向上的導(dǎo)航

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

4、禁用的鏈接

如果需要禁用某個(gè)導(dǎo)航選項(xiàng)，只需要在對(duì)應(yīng)的li上添加.disabled就可以了

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

5、給導(dǎo)航選項(xiàng)添加下拉菜單

如果需要導(dǎo)航的某個(gè)選項(xiàng)是下拉菜單可以修改對(duì)應(yīng)的li

1)給li添加.dropdown

2)a標(biāo)簽當(dāng)做下拉菜單的觸發(fā)器，添加.dropdown-toggle 和 data-toggle=”dropdown”

3)a標(biāo)簽里面添加文字和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組件之導(dǎo)航組件使用方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論