在上篇文章給大家介紹了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組件之導航組件使用方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
