Bootstrap缩略图样式使用方法

默认Bootstrap缩略图样式

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

自定义缩略图内容

知道如何调用缩略图样式之后，我们就可以将缩略图与其他HTML元素相互结合。
例如我们可以将缩略图和栅格布局相结合，再加上一定的排版和按钮元素，就能够实现例如作者介绍之类的功能：

 

   

           

       

本杰明

       

本杰明是我们的特邀作者

       

          关注          联系       

     

   

 

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

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