玩转Bootstrap（基础） -- （7.其他内置组件）

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

<div class="container">    <div class="row">        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">            </a>            <div class="caption">                <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>

2.警示框
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>

实现原理：
其中“alert”样式的源码主要是设置了警示框的背景色、边框、圆角和文字颜色。另外对其内部几个元素h4、p、ul和“.alert-link”做了样式上的特殊处理：

自带关闭功能的警示框
使用方法：
只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：
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>

原理分析：在样式上，需要在基本警示框“alert”的基础上添加“alert-dismissable”样式

链接方式
实现方法：
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>    .</div>

3.进度条
进度条–基本样式
使用方法：
Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单：
通过在style里面加上百分比来展现进度情况。

<div class="progress">       <div class="progress-bar" style="width:40%"></div></div>

进度条–彩色进度条
Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：
☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色
☑ progress-bar-success：表示成功进度条，进度条颜色为绿色
☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色
☑ progress-bar-danger：表示错误进度条，进度条颜色为红色
使用方法：
其实就是给进度条的css样式里面加上了颜色而已。
具体使用就非常简单了，只需要在基础的进度上增加对应的类名。如：

<div class="progress">    <div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress">    <div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress">    <div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress">    <div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

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

一起来看一下制作条纹进度条的结构：<div class="progress progress-striped">    <div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped">    <div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped">    <div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped">    <div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

进度条–动态条纹进度条
使用方法：
在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：

<div class="progress progress-striped active">    <div class="progress-bar progress-bar-success" style="width:40%"></div></div>

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

进度条–层叠进度条
Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：
在“progress-bar”上有一个左浮动的样式。也就是这个样式，在不增加任何样式代码就能实现上例的层叠效果。当然有一点需要注意，层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果

<div class="progress">    <div class="progress-bar progress-bar-success" style="width:20%"></div>    <div class="progress-bar progress-bar-info" style="width:10%"></div>    <div class="progress-bar progress-bar-warning" style="width:30%"></div>    <div class="progress-bar progress-bar-danger" style="width:15%"></div></div>

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

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

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

4.媒体对象
实现方法：
只需要在进度条中添加你需要的值，如：

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

5.面板–带有头和尾的面板

基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

☑ panel-heading：用来设置面板头部样式

☑ panel-footer：用来设置面板尾部样式

<div class="panel panel-default">    <div class="panel-heading">图解CSS3</div>    <div class="panel-body">…</div>    <div class="panel-footer">作者：大漠</div></div>

面板–彩色面板

在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

☑ panel-primary：重点蓝

☑ panel-success：成功绿

☑ panel-info:信息蓝

☑ panel-warning：警告黄

☑ panel-danger：危险红

使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名：

<div class="panel panel-default">    <div class="panel-heading">图解CSS3</div>    <div class="panel-body">…</div>    <div class="panel-footer">作者：大漠</div></div><div class="panel panel-primary">…</div><div class="panel panel-success">…</div><div class="panel panel-info">…</div><div class="panel panel-warning">…</div><div class="panel panel-danger">…</div>

运行效果如下：

面板–面板中嵌套表格

一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。首先来看嵌套表格的效果：

<div class="panel panel-default">    <div class="panel-heading">图解CSS3</div>    <div class="panel-body">    <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性    </p>    <table class="table table-bordered">        <thead>            <tr>                <th>＃</th>                <th>我的书</th>                <th>发布时间</th>            </tr>        </thead>        <tbody>            <tr>                <td>1</td>                <td>《图解CSS3》</td>                <td>2014-07-10</td>            </tr>        </tbody>    </table>    </div>    <div class="panel-footer">作者：大漠</div></div>

面板–面板中嵌套列表组

在上一节，我们介绍了如何在面板中放置表格，现在我们来学习如何在面板中放置列表组，我们简单的来看一个示例：

<div class="panel panel-default">    <div class="panel-heading">图解CSS3</div>    <div class="panel-body">        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性        </p>        <ul class="list-group">            <li class="list-group-item">我是列表项</li>            <li class="list-group-item">我是列表项</li>            <li class="list-group-item">我是列表项</li>        </ul>    </div>    <div class="panel-footer">作者：大漠</div></div>

运行效果如下：