Bootstrap 组件：缩略图组件（thumbnail）

作者:WangMin
格言:努力做好自己喜欢的每一件事

缩略图用于给图片、视频、文本等加入栅格功能，很适合以网格形式展示图片、视频、商品列表等。默认的缩略图非常简单，只需把图片放在 class="thumbnail" 的 a 标签中即可。

默认样式的实例

Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。
单张图片缩略图如下：

<a href="##" class="thumbnail">
    <img src='../img/timg.jpg' alt=""/>
</a>

多张图片缩略图如下（结合栅格系统）：

<div class="row">
     <div class="col-xs-6 col-md-3">
        <a href="##" class="thumbnail">
               <img src='../img/timg.jpg' alt=""/>
         </a>
     </div>
         <div class="col-xs-6 col-md-3">
          <a href="##" class="thumbnail">
              <img src='../img/timg.jpg' alt=""/>
          </a>
     </div>
     <div class="col-xs-6 col-md-3">
          <a href="##" class="thumbnail">
              <img src='../img/timg.jpg' alt=""/>
          </a>
     </div>
     <div class="col-xs-6 col-md-3">
          <a href="##" class="thumbnail">
              <img src='../img/timg.jpg' alt=""/>
          </a>
    </div>
</div>

自定义内容

如果要在缩略图中自定义HTML内容，如添加标题、段落、按钮等，也很简单，只需把上述的 a 替换成 div 就行了。

<div class="row">
     <div class="col-xs-6 col-md-3">
        <div href="##" class="thumbnail">
               <img src='../img/timg.jpg' alt=""/>
            <div class="caption">
                <h3>标题</h3>
                <p>图片描述</p>
                <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p>
            </div>
         </div>
    </div>
    <div class="col-xs-6 col-md-3">
         <div href="##" class="thumbnail">
              <img src='../img/timg.jpg' alt=""/>
               <div class="caption">
                  <h3>标题</h3>
                  <p>图片描述</p>
                   <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p>
               </div>
         </div>
     </div>
    <div class="col-xs-6 col-md-3">
        <div href="##" class="thumbnail">
             <img src='../img/timg.jpg' alt=""/>
             <div class="caption">
                 <h3>标题</h3>
                 <p>图片描述</p>
                 <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p>
            </div>
        </div>
    </div>
     <div class="col-xs-6 col-md-3">
         <div href="##" class="thumbnail">
              <img src='../img/timg.jpg' alt=""/>
              <div class="caption">
                  <h3>标题</h3>
                  <p>图片描述</p>
                  <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p>
              </div>
        </div>
    </div>
</div>

注意： 缩略图类会随着屏幕拉动改变图片的大小，更好的展示在页面中。

就先分享到这里!! :smile: 后续继续更新!!