在本教程中，我们将学习Bootstrap中的缩略图。

默认情况下，在Bootstrap中，缩略图旨在制作链接的图像。
要在Bootstrap中创建缩略图，我们使用.thumbnail类。

链接缩略图

将.thumbnail类添加到包含图像的锚标记中。

<div class="row">
  <div class="col-xs-12 col-sm-2">
    <a href="#" class="thumbnail">
      <img src="/path/to/image.png"
           alt="profile-image">
    </a>
  </div>
</div>

图片缩略图

我们甚至可以在图像中添加.thumbnail类，使其具有粗边框并使其成为缩略图。

<div class="row">
  <div class="col-xs-4 col-sm-4">
    <img class="thumbnail"
         src="/path/to/image.png"
         alt="profile-image">
  </div>
  <div class="col-xs-4 col-sm-4">
    <img class="thumbnail"
         src="/path/to/image.png"
         alt="profile-image">
  </div>
  <div class="col-xs-4 col-sm-4">
    <img class="thumbnail"
         src="/path/to/image.png"
         alt="profile-image">
  </div>
</div>

自定义缩略图内容

我们甚至可以使用.thumbnail类来创建自定义卡片，例如缩略图。

<div class="row">
  <div class="col-xs-4 col-sm-2">
    <div class="thumbnail">
      <img src="/path/to/image.png"
           alt="profile-image">
      <div class="caption">
        <h3>Heading</h3>
        <p>Paragraph ... ... ... ... ... ... ... ...</p>
        <p>
          <a href="#" 
             class="btn btn-primary" 
             role="button">Edit</a>
          <a href="#" 
             class="btn btn-default"
             role="button">Detail</a>
        </p>
      </div>
    </div>
  </div>
</div>