Bootstrap缩略图.thumbnail

缩略图

缩略图是对Bootstrap栅格系统的扩展，将图片、视频、文本等加入到缩略图中，就可以很容易地以网格形式展示图片、视频、商品列表等。

默认缩略图

Boostrap中的默认缩略图设计非常简单，只需把图片、视频、文本等放入 .thumbnail 的 <a> 标签中，就能展示带链接的图片。如：

1. <a href="#" class="thumbnail">
2.   <img src="img/cat.jpg">
3. </a>

Bootstrap会给图片加上 4 像素的内边距和一个灰色边框。而且，鼠标悬停时，图片四周还会出现动态光晕。效果如图 3‑69所示：

图3-69 默认缩略图

自定义缩略图

缩略图的扩展性也非常好，只需添加一点点额外的标签，就可以把任何类型的 HTML 内容，如标题、段落或按钮，加入缩略图组件中。

在定义稍微复杂的缩略图时，需要把标题、段落或按钮等内容让在一个 .caption 的容器中，再把它和图片、视频等统统放入 .thumbnail 的容器中即可。如：

1. <div class="thumbnail">
2.   <img src="img/cat.jpg">
3.   <div class="caption">
4.     <h3>Thumbnail label</h3>
5.     <p>Cras justo odio, dapibus ac ... ut id elit.</p>
6.     <p>
7.       <a href="#" class="btn btn-primary">Button</a>
8.       <a href="#" class="btn btn-default">Button</a>
9.     </p>
10.   </div>
11. </div>

效果如图 3‑70所示：

图3-70 自定义缩略图

缩略图列表

要定义缩略图的列表，也很简单，你只需将一系列的缩略图放入Bootstrap的网格系统中即可。如：

1. <div class="row">
2.   <div class="col-sm-6 col-md-4">
3.     <div class="thumbnail">
4.     ...
5.     </div>
6.   </div>
7.   <div class="col-sm-6 col-md-4">
8.     <div class="thumbnail">
9.     ...
10.     </div>
11.   </div>
12.   <div class="col-sm-6 col-md-4">
13.     <div class="thumbnail">
14.     ...
15.     </div>
16.   </div>
17. </div>

效果如图 3‑71所示：

图3-71 缩略图列表

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。