导航是所有组件的重点。对于导航有套用的预置类.nav，但是它并不生产直观样式，只是各种导航实现的前提条件。导航的结构和正常差不多，本质是通过ul-li体系实现。组件的动效依赖jquery。
选项卡：<ul><li role="presentation"></li></ul>
胶囊式导航：<ul>
堆叠式导航（垂直标签页）：<ul>
自适应导航（两端对齐）：<ul>
1.选项卡—— .nav-tabs
实现方式：
<div> <ulclass="nav nav-tabs"> <li><ahref="#">Home</a></li> <li><ahref="#">Pofile</a></li> <liclass="active"><ahref="#">Message</a></li> </ul> </div>
样式如下，配合.active来使用message当前处于激活状态。
2.胶囊式导航——nav-pills
很生动形象的词。上面代码中，把ul的class改为nav-pills就可以实现了。
3.垂直标签——nav-stacked
同样也是应用在ul上。但注意，.active样式在此不生效，图中只是悬停的效果。
4.两端对齐
整个nav占据了屏幕的一行，同时自动分配宽度。当屏幕较小时，自动垂直排列。同样，途中的阴影只是鼠标悬停的效果，
5. 初步小结：
（1）以上四类可以混搭使用。要想使用.active类样式，可以在tab/pills的框架下使用。
比如class="nav nav-pills nav-justified"
【例4.3】拼凑一个二级导航：
任务描述：在一个胶囊内拼凑一个耳机导航，实现下拉菜单功能：
根据框架可以写出下列代码
<div> <h2>这是胶囊式导航 <small>class="nav nav-pills"</small></h2> <ul> <li><a data-toggle="tab" href="#">Home</a></li> <li><a data-toggle="tab" href="#">Pofile</a></li> <li> <a data-toggle="tab" href="#"> Message <span></span> </a> <ul> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> </ul> </li> </ul> </div>
但还是发现，第7行的data-toggle已经有了一个"tab",再添加“dropdown”导致双方都不生效。尝试使用分段式按钮，但是发现按钮的表现和胶囊按钮的区别还是有的。所以二者只能取一。至于active类，以后可以用js实现。
所以最终代码是：
<div> <h2>这是胶囊式导航 <small>class="nav nav-pills"</small></h2> <ul> <li><a href="#">Home</a></li> <li><a href="#">Pofile</a></li> <li> <a data-toggle="dropdown" href="#"> Message <span></span> </a> <ul> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> </ul> </li> </ul> </div>
进一步思考：在此基础上做出三级菜单。三级菜单需要.dropdown-submenu实现，但是bootstrap3已经删除了相关类。这时需要在css中引入旧版中.dropdown-submenu的样式：
.dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }
结构实现：（关键语句在第17行）