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