缩略图：缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或者右侧）带有标题、描述信息。Bootstrap框架将这一部独立成一个模块组件，并通过thumbnail样式配合Bootstrap的网格系统来实现：
除了这种方式之外，还可以让缩略图配合标题、描述内容、按钮等：
<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" style="height: 180px; 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>
警示框：
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>
警示框----可关闭的警示框
使用方法：只需要在默认的警示框里面添加一个关闭按钮，然后进行三个步骤：
1.需要在警示框alert的基础上添加“alert-dismissable”样式；
2.在button标签上加上class= "close"类，实现警示框关闭按钮的样式；
3.要确保关闭按钮元素上设置了自定义属性，“data-dismiss= 'alert'”(因为可关闭警示框要借助js来检测该属性，从而控制警示框的关闭)。
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
恭喜您操作成功！
</div>
警示框----警示框的链接
有时候，你可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。
实现方法：Bootstrap框架是通过给警示框加的链接添加一个名为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>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong>
This
<a href="#" class="alert-link">alert needs your attention</a>
, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong>
Better check yourself, you're
<a href="#" class="alert-link">not looking too good</a>
.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong>
<a href="#" class="alert-link">Change a few things up</a>
and try submitting again.
</div>