BootStrap笔记17

缩略图

1.相册风格

在图像周围添加带有 class .thumbnail 的 a 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。

<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="kittens.jpg"
                 alt="通用的占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="kittens.jpg"
                 alt="通用的占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="kittens.jpg"
                 alt="通用的占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="kittens.jpg"
                 alt="通用的占位符缩略图">
        </a>
    </div>
</div>

2.自定义

把带有 class .thumbnail 的 a 标签改为 div。
在该 div 内，可以添加任何想要添加的东西。由于这是一个div，可以使用默认的基于 span 的命名规则来调整大小。
如果想要给多个图像进行分组，把它们放置在一个无序列表中，且每个列表项向左浮动。

<div class="col-sm-6 col-md-3">
         <div class="thumbnail">
            <img src="kittens.jpg" 
             alt="通用的占位符缩略图">
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些示例文本。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按钮
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按钮
                    </a>
                </p>
            </div>
         </div>
    </div>