响应式导航条：

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。 2、保证在窄屏时要显示的图标样式（固定写法）： <button class="navbar-toggle" type="button" data-toggle="collapse">  <span class="sr-only">Toggle Navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> </button> 3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定 如下代码：

<div class="navbar navbar-default">

        <div class="navrbar-header">

            <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->

            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">

                <span class="sr-only">Toggle Navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->

            <a href="#" class="navbar-brand">慕课网</a>

        </div>

        <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->

        <div class="collapse navbar-collapse navbar-responsive-collapse">

            <ul class="nav navbar-nav">

                <li><a href="#">慕课网首页</a></li>

                <li><a href="#">系列教程</a></li>

                <li><a href="#">名师介绍</a></li>

                <li><a href="#">关于我们</a></li>

            </ul>

        </div>

    </div>

将bootstrap button 宽度填满  btn-block

btn-lg 超大

btn-sm 小

btn-xs超小

固定导航条的使用方法：

使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

固定导航条：

很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式：

     .navbar-fixed-top：导航条固定在浏览器窗口顶部

     .navbar-fixed-bottom：导航条固定在浏览器窗口底部

导航条中的按钮、文本和链接 1、导航条中的按钮navbar-btn 2、导航条中的文本navbar-text 3、导航条中的普通链接navbar-link <div class="navbar navbar-default">   <div class="nav navbar-nav"> <a href="##" class="navbar-text">Navbar Text</a>

在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现，如下代码：

  <div class="navbar navbar-default">

    <div class="navbar-header">

        <a href="#" class="navbar-brand">慕课网</a>

    </div>

        <ul class="nav navbar-nav">

            <li ><a href="##">网站首页</a></li>

            <li><a href="##">系列教程</a></li>

            <li class="active"><a href="##">名师介绍</a></li>

            <li><a href="##">成功案例</a></li>

            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">关于我们

                <span class="caret"></span>

            </a>

              <ul class="dropdown-menu">

                <li><a href="##">公司简介</a></li>

                <li class="disabled"><a href="##">企业文化</a></li>

                <li><a href="##">客服服务</a></li>

              </ul>

        </li>

        </ul>

   </div>

面包屑导航原理：

.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}

.breadcrumb> li {
display: inline-block;
}

.breadcrumb> li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}

.breadcrumb> .active {
color: #999;
}

注意：

li + li:before

在低版本的IE中不兼容

面包导航：

使用方式就很简单，为ol加入breadcrumb类

二级导航

1.在Bootstrap框架中制作二级导航将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul 2.只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以制作分割线，如下代码：

<ul class="nav nav-tabs">

    <li><a href="#">首页</a></li>

    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">教程

    <span class="caret"></span></a>

      <ul class="dropdown-menu">

          <li><a href="#">CSS3</a></li>

          <li><a href="#">Sass</a></li>

          <li class="nav-divider"></li>

          <li><a href="#">jquery</a></li>

          <li><a href="#">js</a></li>

      </ul>

    </li>

    <li><a href="#">关于我们</a></li>

 </ul>

“nav-tabs”和“nav-justified”配合在一起使用，也就是自适应选项卡导航

自适应导航

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

垂直堆叠导航

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

按钮的向下向上三角形 按钮的向下三角形，我们是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”: <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button> 有的时候我们的下拉菜单会向上弹起，这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。

按钮下拉菜单 按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。 按钮下拉菜单其实就是普通的下拉菜单，只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。如下所示： <div class="btn-group">      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>      <ul class="dropdown-menu">          <li><a href="##">按钮下拉菜单项</a></li>          <li><a href="##">按钮下拉菜单项</a></li>          <li><a href="##">按钮下拉菜单项</a></li>          <li><a href="##">按钮下拉菜单项</a></li>      </ul> </div>