缩略图
缩略图是对Bootstrap栅格系统的扩展，将图片、视频、文本等加入到缩略图中，就可以很容易地以网格形式展示图片、视频、商品列表等。
默认缩略图
Boostrap中的默认缩略图设计非常简单，只需把图片、视频、文本等放入 .thumbnail 的 <a> 标签中，就能展示带链接的图片。如：
<a href="#" class="thumbnail"><img src="img/cat.jpg"></a>
Bootstrap会给图片加上 4 像素的内边距和一个灰色边框。而且，鼠标悬停时，图片四周还会出现动态光晕。效果如图 3‑69所示：
自定义缩略图
缩略图的扩展性也非常好，只需添加一点点额外的标签，就可以把任何类型的 HTML 内容，如标题、段落或按钮，加入缩略图组件中。
在定义稍微复杂的缩略图时，需要把标题、段落或按钮等内容让在一个 .caption 的容器中，再把它和图片、视频等统统放入 .thumbnail 的容器中即可。如：
<div class="thumbnail"><img src="img/cat.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Cras justo odio, dapibus ac ... ut id elit.</p><p><a href="#" class="btn btn-primary">Button</a><a href="#" class="btn btn-default">Button</a></p></div></div>
效果如图 3‑70所示：
缩略图列表
要定义缩略图的列表，也很简单，你只需将一系列的缩略图放入Bootstrap的网格系统中即可。如：
<div class="row"><div class="col-sm-6 col-md-4"><div class="thumbnail">...</div></div><div class="col-sm-6 col-md-4"><div class="thumbnail">...</div></div><div class="col-sm-6 col-md-4"><div class="thumbnail">...</div></div></div>
效果如图 3‑71所示：
图3-71 缩略图列表
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
