Bootstrap 缩略图

缩略图（Thumbnail）把图片封装成带圆角边框的小卡片，常用来展示相册、商品或视频封面。它不只是"缩小图片"，还能在图片下方附加标题与说明文字，与栅格系统配合后可整齐排成多列画廊。

单张缩略图

给图片加上 .thumbnail 类即可得到带边框的缩略图：

<a href="#" class="thumbnail">
  <img src="demo.jpg" alt="示例图片">
</a>

效果：图片四周出现一圈浅灰色圆角边框；整张图作为链接，点击可跳转到对应详情页。

带说明内容的缩略图

在 .thumbnail 容器内放入 .caption，就可以在图片下方排布任意内容：

<div class="thumbnail">
  <img src="demo.jpg" alt="风景图">
  <div class="caption">
    <h3>山间日出</h3>
    <p>拍摄于清晨五点，云海与霞光交叠。</p>
    <p><a href="#" class="btn btn-primary">查看大图</a></p>
  </div>
</div>

效果：图片下方出现带内边距的说明区，内含标题、简介与按钮，构成一张完整的信息卡片。

与栅格组合成画廊

把缩略图放进栅格列中，即可自动排成整齐的多列画廊：

<div class="row">
  <div class="col-sm-4"><div class="thumbnail"><img src="a.jpg" alt="图片一"><div class="caption"><p>图片一</p></div></div></div>
  <div class="col-sm-4"><div class="thumbnail"><img src="b.jpg" alt="图片二"><div class="caption"><p>图片二</p></div></div></div>
  <div class="col-sm-4"><div class="thumbnail"><img src="c.jpg" alt="图片三"><div class="caption"><p>图片三</p></div></div></div>
</div>

效果：在中等宽度及以上的屏幕中三张卡片并排一行、间距均匀；屏幕变窄后自动逐张堆叠，无需额外代码即可适配手机。

小结：.thumbnail 是"图片 + 可选说明"的通用卡片，单用可以做相册，套进栅格列就能拼出响应式画廊，注意图片宽度应充满容器以免留白。