Bootstrap缩略图.thumbnail

缩略图

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

默认缩略图

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

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

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

图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所示：

图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 上开源。