bootstrap組件之導(dǎo)航組件使用方法
更新時間：2017年01月19日 11:54:42 作者：zaichuanguanshui
Bootstrap 中的導(dǎo)航組件都依賴同一個 .nav 類和ul，狀態(tài)類也是共用的。改變修飾類可以改變樣式。接下來通過本文給大家介紹bootstrap 導(dǎo)航組件使用方法，一起看看吧
在上篇文章給大家介紹了bootstrap組件之按鈕式下拉菜單小結(jié)，下面通過本文給大家介紹bootstrap導(dǎo)航組件的使用方法，一起看看吧！
Bootstrap 中的導(dǎo)航組件都依賴同一個 .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就可以實現(xiàn)豎直方向上的導(dǎo)航
<ul class="nav nav-pills nav-stacked" role="tablist"> ... </ul>
4、禁用的鏈接
如果需要禁用某個導(dǎo)航選項，只需要在對應(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)航選項添加下拉菜單
如果需要導(dǎo)航的某個選項是下拉菜單可以修改對應(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)航組件使用方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
javascript構(gòu)造函數(shù)以及原型對象的理解
本文主要介紹了javascript構(gòu)造函數(shù)以及原型對象的理解。分享了有關(guān)它們的實例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了如何配置Webpack?SourceMap，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2024-03-03
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊列原理與用法實例詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊列原理與用法,較為詳細(xì)的說明了隊列的概念、原理,并結(jié)合實例形式分析了javascript實現(xiàn)與使用隊列的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了JavaScript高級定時器原理與用法,結(jié)合實例形式分析了javascript重復(fù)定時器相關(guān)問題與解決方法,并描述了函數(shù)節(jié)流的原理與相關(guān)操作方法,需要的朋友可以參考下2018-08-08
解決js相同的正則多次調(diào)用test()返回的值卻不同的問題
今天小編就為大家分享一篇解決js相同的正則多次調(diào)用test()返回的值卻不同的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
本篇文章主要介紹了淺談mint-ui 填坑之路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
6種JavaScript繼承方式及優(yōu)缺點(小結(jié))
這篇文章主要介紹了6種JavaScript繼承方式及優(yōu)缺點(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了微信小程序vant輸入框問題,本文給大家分享完美解決方案，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了js 圖片懶加載的實現(xiàn)，幫助大家更好的優(yōu)化自身網(wǎng)頁，提高網(wǎng)頁響應(yīng)速度，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了詳解JS異步加載的三種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03