分页导航（翻页分页导航）

翻页分页导航和带页码的分页导航类似，为ul标签加入pager类。

默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：

      previous：让“上一步”按钮居左

      next：让“下一步”按钮居右

具体使用的时候，只需要在li标签上添加对应类名即可：

如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。你可以通过js来处理，或将a标签换成span标签。

在Bootstrap框架中提供了两种分页导航：

      带页码的分页导航

      带翻页的分页导航

使用方法：

Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法.

<ul class="pagination">

注意：要禁用当前状态和禁用状态不能点击，我们还要依靠js来实现，或者将这两状态下的a标签换成span标签。

大小设置：

在Bootstrap框架中，通过几个不同的情况来设置其大小。

1、通过“pagination-lg”让分页导航变大；

2、通过“pagination-sm”让分页导航变小：

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

    <div class="navbar-header">

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

    </div>

    <ul class="nav navbar-nav">

        <li class="active"><a href="">首页</a></li>

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

    </ul>

</div>

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

保证在窄屏时需要折叠的内容必须包裹在带一个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>

并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。

有可能出现导航条讲内容遮挡住，我们还有其他的解决方法，把固定导航条都放在页面内容前面：

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

固定导航条

设计师希望导航条固定在浏览器顶部或底部。

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

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

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

eg:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：

1、导航条中的按钮navbar-btn

2、导航条中的文本navbar-text

3、导航条中的普通链接navbar-link

但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单.

eg:

  <form action="##" class="navbar-form navbar-left" rol="search">

        <div class="form-group">

       <input type="text" class="form-control" placeholder="请输入关键词" />

        </div>

        <button type="submit" class="btn btn-default">搜索</button>

     </form>

“navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。

导航条状态、二级菜单

在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条，

 <ul class="nav navbar-nav">

 <li class="dropdown">

          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>

          <ul class="dropdown-menu">

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

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

        <li class="disabled"><a href="##">PHP</a></li>

          </ul>

</ul>

基础导航条

使用方法：

在制作一个基础导航条时，主要分以下几步：

第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

导航条

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

    <div class="navbar-header">

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

    </div>

    <ul class="nav navbar-nav">

        <li class="active"><a href="">home</a></li>

        <li class="dropdown">

            <a href="#" data-toggle="dropdown" class="dropdown-toggle">教程<span class="caret"></span></a>

            <ul class="dropdown-menu">

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

                <li class="disabled"><a href="#">css1</a></li>

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

            </ul>

        </li>

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

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

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

    </ul>

</div>

面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。

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

在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，

eg:

<ul class="nav nav-pills">
<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>
        </ul>

可以用分隔线，那么在二级导航中是可以的,只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以了。

自适应导航

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

eg:1.<ul class="nav nav-tabs nav-justified">

eg:2.<ul class="nav nav-pills nav-justified">