进度条--带Label的进度条

上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。

实现方法：

只需要在进度条中添加你需要的值，如：

<div class="progress">     <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >20%</div> </div>

进度条--层叠进度条

Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：

<div class="progress">     <div class="progress-bar progress-bar-success" ></div>     <div class="progress-bar progress-bar-info" ></div>     <div class="progress-bar progress-bar-warning" ></div>     <div class="progress-bar progress-bar-danger" ></div> </div>

进度条--动态条纹进度条

使用方法：

在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：

<div class="progress progress-striped active">     <div class="progress-bar progress-bar-success" ></div> </div>

进度条

<div class="progress">

    <div class="progress-bar progress-bar-success" ></div>

</div> 

警示框的连接---alert-link

实现方法：

Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。

具体使用如下：

使用方法：

只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：

  1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

  2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

  3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

具体使用如下：

警示框

在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示：

thumbnail

缩略图（一）

缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。

源码文件：

    LESS版本：对应文件thumbnails.less

    Sass版本：对应文件_thumbnails.scss

   编译后版本：bootstrap.css文件第4402行～第4426行

使用方法：

通过“thumbnail”样式配合bootstrap的网格系统来实现。

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<a href="#">Inbox <span class="badge">42</span></a>

运行效果见右侧结果窗口。

实现原理：

主要将其设置为椭圆形，并且加了一个背景色：

那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。

既然他是一个独立的组件，当然在不同的版本下有不同的文件：

      LESS版本：对应的源文件label.less

      Sass版本：对应的源文件_label.scss

      编译后版本：bootstrap.css文件第4261行～第4327行

使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

<h3>Example heading <span class="label label-default">New</span></h3>

对齐样式设置：

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

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

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

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

<ul class="pager">
   <li class="previous"><a href="#">&laquo;上一页</a></li>
   <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>

运行效果见右侧结果窗口。

实现原理：

实现原理很简单，就是一个进行了左浮动，一个进行了右浮动：

/*bootstrap.css文件第4245行～第4252行*/

.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}

分页导航（带页码的分页导航）

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：

      带页码的分页导航

      带翻页的分页导航

带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。在Bootstrap框架为开发者提供不同的版本：

      LESS版本：对应的源文件pagination.less

      Sass版本：对应的源文件_pagination.scss

      编译后版本：对应bootstrap.css文件第4130行～第4222行

使用方法：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

反色导航条

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

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代码段：

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>

也可以这么写，需要折叠的div代码段：

<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时要显示的图标：

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