Bootstrap缩略图样式使用方法

默认Bootstrap缩略图样式

因为缩略图可能要牵涉到链接，所以需要在图片外面加入一个a标签，缩略图样式直接写入这个a标签即可，使用起来非常方便：<a href="#" class="thumbnail">  <img src="/imgs/test.jpg" alt="Bootstrap缩略图样式"></a>通过对a标签引入thumbnail样式，就可以实现Bootstrap缩略图的样式，而且hover还有对应的交互效果，非常不错，另外，为了符合SEO搜索引擎优化原则，你需要在img中添加alt属性。

自定义缩略图内容

知道如何调用缩略图样式之后，我们就可以将缩略图与其他HTML元素相互结合。
例如我们可以将缩略图和栅格布局相结合，再加上一定的排版和按钮元素，就能够实现例如作者介绍之类的功能：<div class="row">  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="/images/author.jpg" alt="专栏作者">      <div class="caption">        <h3>本杰明</h3>        <p>本杰明是我们的特邀作者</p>        <p>          <a href="#" class="btn btn-primary" role="button">关注</a>          <a href="#" class="btn btn-success" role="button">联系</a>        </p>      </div>    </div>  </div></div>

Bootstrap缩略图样式与图片样式的区别

在前面一篇Bootstrap图片样式中，我们也提到了其中一种样式img-thumbnail，那么它们之间有什么区别呢？
最大的区别在于它们的display样式不同，img-thumbnail主要是inline-block，所以能够与其他图片在同一个容器平行排列，更加适合多图片的情况。
而Bootstrap缩略图主要是单张图片的情况，该图片往往都占据了整个父容器的宽度。