（1）、Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：
A、在图像周围添加带有 class .thumbnail 的 <a> 标签。
B、这会添加四个像素的内边距（padding）和一个灰色的边框。
C、当鼠标悬停在图像上时，会动画显示出图像的轮廓。
<div> <a href="#"> <img src="https://www.jb51.net/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </a> </div>
（2）、添加自定义的内容
现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
A、把带有 class .thumbnail 的 <a> 标签改为 <div>。
B、在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
C、如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
15、Bootstrap 警告（Alerts）
警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。
您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
<div>成功！很好地完成了提交。</div>
<div>信息！请注意这个信息。</div>
<div>警告！请不要提交。</div>
<div>错误！请进行一些更改。</div>
（1）、可取消的警告（Dismissal Alerts）
创建一个可取消的警告（Dismissal Alert）步骤如下：
A、通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
B、同时向上面的 <div> class 添加可选的 .alert-dismissable。
C、添加一个关闭按钮。
<div> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> 成功！很好地完成了提交。 </div>
（2）、警告（Alerts）中的链接
在警告（Alerts）中创建链接的步骤如下：
A、通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
B、使用 .alert-link 实体类来快速提供带有匹配颜色的链接。
<div>
<a href="#">成功！很好地完成了提交。</a>
</div>
16、Bootstrap 进度条
本章将讲解 Bootstrap 进度条。在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。
Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。
（1）、默认的进度条
创建一个基本的进度条的步骤如下：
A、添加一个带有 class .progress 的 <div>。
B、接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
C、添加一个带有百分比表示的宽度的 style 属性，例如; 表示进度条在 60% 的位置。
<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>40% 完成</span> </div> </div>
（2）、交替的进度条
创建不同样式的进度条的步骤如下：
A、添加一个带有 class .progress 的 <div>。
B、接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
C、添加一个带有百分比表示的宽度的 style 属性，例如; 表示进度条在 60% 的位置。
<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>90% 完成（成功）</span> </div> </div>
（3）、条纹的进度条
创建一个条纹的进度条的步骤如下：
A、添加一个带有 class .progress 和 .progress-striped 的 <div>。
B、接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
C、添加一个带有百分比表示的宽度的 style 属性，例如; 表示进度条在 60% 的位置。
<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>90% 完成（成功）</span> </div> </div>
（4）、动画的进度条
创建一个动画的进度条的步骤如下：
A、添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
B、接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
C、添加一个带有百分比表示的宽度的 style 属性，例如; 表示进度条在 60% 的位置。
这将会使条纹具有从右向左的运动感。
<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>40% 完成</span> </div> </div>
（5）、堆叠的进度条
您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠，
17、Bootstrap 多媒体对象（Media Object）