創(chuàng)建標(biāo)簽式導(dǎo)航
導(dǎo)航一般用 <ul>元素設(shè)置 .nav 創(chuàng)建
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
01.PNG
給導(dǎo)航條目添加圖標(biāo)
導(dǎo)航一般用 <ul> 元素設(shè)置 .nav 創(chuàng)建
<ul class="nav nav-tabs">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首頁</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 性能</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 消息</a></li>
</ul>
02.PNG
創(chuàng)建膠囊式標(biāo)簽
設(shè)置 .nav-pills 樣式
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
03.PNG
垂直堆疊式導(dǎo)航
設(shè)置 .nav-stacked 樣式
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
04.PNG
帶下拉菜單的導(dǎo)航
將導(dǎo)航項(xiàng)設(shè)置為下拉菜單即可
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
</ul>
05.PNG
兩端對(duì)齊的導(dǎo)航
使用 .nav-justified樣式
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
06.PNG
禁用導(dǎo)航條目
給需要禁用的條目設(shè)置 .disabled樣式
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li class="disabled"><a href="#">Admin</a></li>
</ul>
07.PNG
