进度条--带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>

运行效果如下：

还有一种特殊情形，当进度条处于开始位置，也就是进度条的值为0%时，内容是否会撑开一定的宽度，让进度条具有颜色呢？如果是，这不是我们需要的效果，如果不是，又是怎么实现的呢？我们先来看一个这样的示例：

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

运行效果如下：

原理分析：

效果告诉我们，当进度为0%，进度条颜色并没有显示出来，那是因为Bootstrap在样式上做了一定的处理。

如何给进度条自定义颜色？

直接加上style="width:80% ;background-color:pink"

进度条--层叠进度条

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-bar”上有一个左浮动的样式。也就是这个样式，在不增加任何样式代码就能实现上例的层叠效果。当然有一点需要注意，层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果（见右侧代码编辑器）：

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%

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

使用方法：

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

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

实现原理：

为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。

了解CSS3的同学都知道，@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画“progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效。

active加在progress-bar也可以实现动态

<div class="progress progress-striped ">

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

</div>

进度条--条纹进度条

在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲。

一起来看一下制作条纹进度条的结构：

<div 
    <div ></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" ></div>
</div>

进度条--彩色进度条

Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：

   progress-bar-info：表示信息进度条，进度条颜色为蓝色

   progress-bar-success：表示成功进度条，进度条颜色为绿色

   progress-bar-warning：表示警告进度条，进度条颜色为黄色

   progress-bar-danger：表示错误进度条，进度条颜色为红色

使用方法：

具体使用就非常简单了，只需要在基础的进度上增加对应的类名。如：

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

运行效果如下：

进度条--基本样式

Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。

使用方法：

Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单：

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

运行效果如下：

结构优化：

虽然这样实现了基本进度条效果，但对于残障人员浏览网页有点困难，所以我们可以将结构做得更好些（语义化更友好些）：

<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">40% Complete</span>
    </div>
</div>

1、role属性作用：告诉搜索引擎这个div的作用是进度条。

2、aria-valuenow="40"属性作用：当前进度条的进度为40%。

3、aria-valuemin="0"属性作用：进度条的最小值为0%。

4、aria-valuemax="100"属性作用：进度条的最大值为100%。

警示框--警示框的链接

有时候你可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。

实现方法：

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

具体使用如下：

<div class="alert alert-success" role="alert">     <strong>Well done!</strong>      You successfully read      <a href="#" class="alert-link">this important alert message</a>

警示框--可关闭的警示框

大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。

使用方法：

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

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

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

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

具体使用如下：

<div class="alert alert-success alert-dismissable" role="alert">     <button class="close" type="button" data-dismiss="alert">&times;</button>     恭喜您操作成功！ </div>

&times;的作用是什么呢？

是一个HTML转义字符，表示叉号

运行效果如下：

实现下拉菜单右对齐效果

在ul属性中增添 pull-right或者dropdown-menu-right即可

默认为左对齐

dropdown-header属性给下拉菜单添加头部

通过给li添加divider属性可以显示出下拉分割线效果

下拉菜单基本用法

使用一个类名为dropdown的容器包含著整个下拉菜单

使用button按钮作为父菜单，定义类名dropdown-toggle与添加data-toggle属性，值需要与最外容器一致

下拉菜单用ul来表示，定义类名dropdown-menu

警示框--默认警示框

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：

  1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

  2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

  3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

  4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

如下图示：

使用方法：

具体使用的时候，可以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框，只需要在“alert”基础上追加对应的类名，如下：

<div class="alert alert-success" role="alert">恭喜您操作成功！</div> <div class="alert alert-info" role="alert">请输入正确的密码</div> <div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div> <div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>

运行效果如下：

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>

<div class="alert alert-info" role="alert">请输入正确的密码</div>

缩略图（二）

上一小节，展示的仅只有缩略图的一种使用方式，除了这种方式之外，还可以让缩略图配合标题、描述内容，按钮等：

在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等：

<div class="container">     <div class="row">         <div class="col-xs-6 col-md-3">             <a href="#" class="thumbnail">                 <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg"  alt="">             </a>                           <h3>Bootstrap框架系列教程</h3>                 <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>                 <p>                     <a href="##" class="btn btn-primary">开始学习</a>                     <a href="##" class="btn btn-info">正在学习</a>                 </p>             </div>         </div>     …     </div> </div>

缩略图（一）

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

源码文件：

    LESS版本：对应文件thumbnails.less

    Sass版本：对应文件_thumbnails.scss

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

使用方法：

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

前面也说过了，缩略图的实现是配合网格系统一起使用，假设我们一个产品列表，如下图所示：

先来看结构：

<div class="container">     <div class="row">         <div class="col-xs-6 col-md-3">             <a href="#" class="thumbnail">                 <img src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png"  alt="">             </a>         </div>     …     </div> </div>

上面的结构表示的是在宽屏幕（可视区域大于768px）的时候，一行显示四个缩略图(单击全屏查看效果)：

在窄屏（可视区域小于768px）的时候，一行只显示两个缩略图：

实现原理：