<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>
B、垂直的胶囊式导航菜单
您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>
（3）、两端对齐的导航
您可以在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul> <ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul>
(4)、禁用链接
对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS（禁用链接）</a></li> </ul> <ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">VB.Net（禁用链接）</a></li> </ul>
(5)、下拉菜单
导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。
A、带有下拉菜单的标签
向标签添加下拉菜单的步骤如下：
以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。
添加带有 .dropdown-menu class 的无序列表。
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li>
<a data-toggle="dropdown" href="#">
Java <span></span>
</a>
<ul>
<li><a href="#">Swing</a></li>
<li></li>
<li><a href="#">分离的链接</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>
B、带有下拉菜单的胶囊
步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills。
7、Bootstrap 导航栏
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
（1）、默认的导航栏
创建一个默认的导航栏的步骤如下：
A、向 <nav> 标签添加 class .navbar、.navbar-default。
B、向上面的元素添加 role="navigation"，有助于增加可访问性。
C、向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
D、为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <ul> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li> <a href="#" data-toggle="dropdown"> Java <b></b> </a> <ul> <li></li> <li><a href="#">分离的链接</a></li> <li></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </nav>
（2）、响应式的导航栏