Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：
在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
下面的实例演示了默认的缩略图：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 缩略图</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</a>
</div>
</div> </body>
</html>
结果如下所示：
添加自定义的内容
现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
把带有 class .thumbnail 的 <a> 标签改为 <div>。
在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
下面的实例演示了这点：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 自定义缩略图</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</div>
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</div>
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</div>
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</div>
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div> </body>
</html>
结果如下所示：
系列文章：
Bootstrap <基础一> css 概览
Bootstrap<基础二>网络系统
Bootstrap<基础三>排版
Bootstrap<基础四> 代码
Bootstrap <基础五>表格
Bootstrap<基础六> 表单
Bootstrap <基础七>按钮
Bootstrap <基础八>图片
Bootstrap<基础九>辅助类
Bootstrap<基础十> 响应式实用工具
Bootstrap<基础十一>字体图标(Glyphicons)
Bootstrap <基础十二>下拉菜单（Dropdowns）
Bootstrap<基础十三> 按钮组
Bootstrap<基础十四> 按钮下拉菜单
Bootstrap<基础十五> 输入框组
Bootstrap<基础十六> 导航元素
Bootstrap<基础十七>导航栏
Bootstrap <基础十八>面包屑导航（Breadcrumbs）
Bootstrap <基础十九>分页
Bootstrap<基础二十> 标签
Bootstrap <基础二十一>徽章（Badges）
Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap <基础二十三>页面标题（Page Header）
Bootstrap<基础二十四> 缩略图
Bootstrap <基础二十五>警告（Alerts）
Bootstrap <基础二十六>进度条
Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap <基础二十八>列表组
Bootstrap <基础二十九>面板（Panels）
Bootstrap <基础三十>Well
Bootstrap <基础三十一>插件概览
Bootstrap <基础三十二>模态框（Modal）插件
