Bootstrap 缩略图
大多数站点都需要在网格中布局图像、视频、文本等。 Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：
1.在图像周围添加带有 class .thumbnail 的 <a> 标签。
2.这会添加四个像素的内边距（padding）和一个灰色的边框。
3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。
代码实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
<!--
row样式：栅格布局，设置column的排列
col-sm-6样式：在小型屏幕上栅格占6位
col-md-3样式：在中型屏幕上栅格占6位
thumbnail样式：设置略缩图
-->
<!--<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../img/phone.jpg" alt="通用的占位符缩略图" >
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../img/phone.jpg" alt="通用的占位符缩略图" >
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../img/phone.jpg" alt="通用的占位符缩略图" >
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../img/phone.jpg" alt="通用的占位符缩略图" >
</a>
</div>
</div>-->
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../img/phone.jpg" alt="通用的占位符缩略图">
</a>
<div class="caption">
<h3>缩略图标签</h3>
<p>一些描述的文字，一些描述的文字</p>
<p>
<a href="#" class="btn btn-success">购买</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../img/phone.jpg" alt="通用的占位符缩略图">
</a>
<div class="caption">
<h3>缩略图标签</h3>
<p>一些描述的文字，一些描述的文字</p>
<p>
<a href="#" class="btn btn-primary">购买</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../img/phone.jpg" alt="通用的占位符缩略图">
</a>
<div class="caption">
<h3>缩略图标签</h3>
<p>一些描述的文字，一些描述的文字</p>
<p>
<a href="#" class="btn btn-warning">购买</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../img/phone.jpg" alt="通用的占位符缩略图">
</a>
<div class="caption">
<h3>缩略图标签</h3>
<p>一些描述的文字，一些描述的文字</p>
<p>
<a href="#" class="btn btn-danger">购买</a>
</p>
</div>
</div>
</div>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>显示效果：
