Bootstrap缩略图

对于一个 Web 应用程序来说，缩略图是一个很方便的方式来在一个空间有限的区域中展示一组图片。Bootstrap 的缩略图组件能够很方便地帮助我们实现缩略图的展示。

基本用法

缩略图组件的基本用法非常简单，只需要在代码中添加样式类 thumbnail 即可。下面是一个例子：

<img src="image.jpg" alt="thumbnail" class="thumbnail">

带标题的缩略图

如果需要在缩略图上添加标题，我们可以在缩略图容器中嵌套一个标题元素。在 Bootstrap 中，我们可以使用样式类 caption 来定义标题。下面是一个例子：

<div class="thumbnail">
  <img src="image.jpg" alt="thumbnail">
  <div class="caption">
    <h3>标题</h3>
    <p>描述内容</p>
  </div>
</div>

按钮式缩略图

Bootstrap 还提供了一种通过缩略图来实现按钮的方式。我们可以使用样式类 btn 来定义按钮。下面是一个例子：

<div class="thumbnail">
  <img src="image.jpg" alt="thumbnail">
  <div class="caption">
    <h3>标题</h3>
    <p>描述内容</p>
    <p>
      <button class="btn btn-primary">按钮</button>
    </p>
  </div>
</div>

响应式脚手架

在响应式设计中，我们需要确保我们的网站能够在不同的屏幕大小下正常显示。Bootstrap 的缩略图组件内置了响应式脚手架，你只需要添加样式类 img-responsive 即可，如下所示：

<img src="image.jpg" alt="thumbnail" class="thumbnail img-responsive">

总结

Bootstrap 的缩略图组件能够很方便地帮助我们实现缩略图的展示，支持带标题、按钮等多种方式。同时，它还内置了响应式脚手架，能够很好地适应不同的屏幕大小。