4.14　缩略图

源码文件：thumbnails.less

CSS文件：bootstrap.css 4406行之后

在第3章中我们提到了图像展示的几种方式，这里将详细说明缩略图.thumbnail样式。结合12栅格系统，并使用.thumbnail样式，可以将图像、视频、文本展示得更加漂亮。使用方式如下：

<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img data-src="图像地址" alt="...">
        </a>
    </div>
    ...
</div>

运行效果如图4-67所示。

图4-67　缩略图运行效果

thumbnail样式的源码如下：

// 源码4406行
.thumbnail {
  display: block;               /*块级显示*/
  padding: 4px;         /* 图片外边设置4像素的边框间距 */
  margin-bottom: 20px;  /* 底部保留20像素的外边距 */
  line-height: 1.428571429; 
  background-color: #fff;       /* 白色背景 */
  border: 1px solid #ddd;       /* 灰色、1像素的边框 */
  border-radius: 4px;   /* 圆角设置 */
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  display: block;               /*块级显示*/
  max-width: 100%;      /* 如果img位于thumbnail样式内部，则自动填充100% */
  height: auto;         /*高度自适应*/
  margin-right: auto;   /*水平居中*/
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #428bca;        /*鼠标移动或焦点时（也包括高亮时）边框颜色设置*/
}
.thumbnail .caption {
  padding: 9px;         /* caption样式一般用于显示缩略图名称，再增加一点边框间距 */
  color: #333;
}

根据上述代码可知，如果想像label和badge一样扩展.thumbnail的样式，修改border: 1px solid #dddddd;代码即可。效果如图4-68所示。怎么样，简单吧！

图4-68　边框颜色扩展后的运行效果

另外，根据上述源码的定义，缩略图有两种使用方式，一种用于仅显示图片，另外一种利用容器将图片和标题显示在一起。示例如下：

<img src="..." class="thumbnail">
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img data-src="图片地址" alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
                <p>
                    <a href="#" class="btn btn-primary">Action</a>
                    <a href="#" class="btn btn-default">Action</a>
                </p>
            </div>
        </div>
    </div>
</div>

可以在.caption样式的元素容器内，添加任意风格的元素，比如按钮、链接等，效果如图4-69所示。

图4-69　带有caption样式的运行效果

注意

由于示例代码使用了col-sm-6和col-md-4样式，该样式在可视宽度大于768px的浏览器中才生效；如果浏览器是窄屏的话，该样式将失效，同时thumbnail样式的元素容器将充满全屏100%。