1.选项卡导航
添加类nav-tabs
如下:
<h1>选项卡式导航</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
2. 胶囊式导航
添加类nav-pills
如下:
<h1>胶囊式导航</h1>
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
3. 胶囊垂直式导航
添加类nav-stacked
如下:
<h1>垂直式导航</h1>
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
</div>
4.垂直导航添加分隔符
只要给ul中li的下面一行添加<li class="nav-divider"></li>
代表分割线,如下:
<h1>垂直式分隔符导航</h1>
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li class="nav-divider"></li>
<li><a href="#">首页</a></li>
<li class="nav-divider"></li>
<li><a href="#">首页</a></li>
<li class="nav-divider"></li>
<li><a href="#">首页</a></li>
</ul>
</div>
</div>
5.自适应导航
自适应导航占满整个容器,无论横着还是垂直。添加类nav-justified
如下:
<h1>自适应导航</h1>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
6. 二级导航
<h1>二级导航</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">首页</a>
<ul class="dropdown-menu" >
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>