Bootstrap中文网

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>