大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式，通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件，比如 Masonry、Isotope 或 Salvattore。
默认样式的实例
Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。
使用 Bootstrap 创建缩略图的步骤如下：
- ◆ 在图像周围添加带有 class .thumbnail 的
<a> 标签。- ◆ 这会添加四个像素的内边距（padding）和一个灰色的边框。
- ◆ 当鼠标悬停在图像上时，会动画显示出图像的轮廓。
下面的实例演示了默认的缩略图：
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a></div>...
</div>
添加自定义的内容
添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>一些示例文本</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div></div></div></div>