Bootstrap中提供的导航栏分为两种模式，使用nav-tabs类可以创建页卡模式的导航栏，使用nav-pills类可以创建胶囊模式的导航栏，示例如下：
<p>导航分为两种，页卡模式和胶囊模式</p>
<p>页卡模式</p
<ul class="nav nav-tabs">
<li class="active"><a>主页</a></li>
<li><a>活动</a></li>
<li><a>留言</a></li>
</ul>
<hr />
<p>胶囊模式</p>
<ul class="nav nav-pills">
<li class="active"><a>主页</a></li>
<li><a>活动</a></li>
<li><a>留言</a></li>
</ul>
效果如下图：
针对胶囊式导航，也可以设置其排列方向为堆叠，添加nav-stacked类即可，示例如下：
<p>堆叠排列的胶囊导航</p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a>主页</a></li>
<li><a>活动</a></li>
<li><a>留言</a></li>
</ul>
效果如下：
导航中也可以进行下拉菜单的嵌套，示例如下：
<p>导航中嵌套下拉菜单</p>
<ul class="nav nav-pills">
<li><a>主页</a></li>
<li><a>活动</a></li>
<li><a>留言</a></li>
<li class="dropdown active">
<a class="dropdown-toggle">
更多
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a>个人中心</a></li>
<li><a>设置</a></li>
<li><a>退出</a></li>
</ul>
</li>
</ul>
效果如下图所示：
