1、导航（基础样式）

导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。比如一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式。

2、导航（标签形tab导航）

标签形导航，也称为选项卡导航。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。
标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名

3、导航（胶囊形(pills)导航）

胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”

4、导航（垂直堆叠的导航）

在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可

5、导航加下拉菜单（二级导航）

很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使类名“dropdown”，同时在li中嵌套另一个列表ul。

下拉菜单的标签页：
<ul class="nav nav-tabs">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">dropdwn
<span class=""></span></a>
<ul class=dropdown-menu>......</ul>

折叠菜单：标记可以在<a href="id">也可以在<button data-toggle="collapse" data-target="id">
                                <div class="nav-collapse collapse" id="">

6、响应式导航

<div class="navbar navbar-inverse " role="navigation">

            <div class="container">

                <!-- 导航条头部 -->
                <div class="navbar-header">

                    <a class="navbar-brand">![](http://upload-images.jianshu.io/upload_images/3132348-bef07ae342ff0ba1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>

                    <!-- 折叠菜单触发按钮 -->
                    <button data-toggle="collapse" data-target="#item1" class="navbar-toggle type=" button >
                    <span class="glyphicon glyphicon-list"></span>
                    
                  </button>

                </div>
                <a href="#" class="navbar-link navbar-right navbar-text">注册</a>

                    <span class="navbar-text navbar-right"> | </span>

                    <button type="button" class="btn btn-success navbar-btn navbar-right">登录</button>
                    
                    <form class="navbar-form navbar-right">

                        <div class="form-group has-feedback">

                            <label class="sr-only" for="kw">搜索：</label>
                            <input class="form-control" type="text" id="kw">
                            <span class="form-control-feedback glyphicon glyphicon-search"></span>
                        </div>

                    </form>
                <!-- 导航条折叠部分 -->
                <div id="item1" class="navbar-collapse">

                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">猪老板</a>
                        </li>
                        <li class="active">
                            <a href="#">屎老板</a>
                        </li>
                        <li>
                            <a href="#">黄老板</a>
                        </li>
                    </ul>

                    

    

                </div>

            </div>

        </div>