Bootstrap 3 缩略图

Bootstrap 3 内置了 缩略图 效果外观用于在网格中布局图像、视频、文本

Bootstrap 3 提供了 .thumbnail CSS 类用于包裹一个缩略图

这个 CSS 类会在图片周围添加四个像素的内边距( padding ) 和一个灰色的边框

当鼠标悬停在图像上时，会动画显示出图像的轮廓

<div class="row">
    <div class="col-sm-4 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/static/i/img1.jpg">
        </a>
    </div>
    <div class="col-sm-4 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/static/i/img2.jpg">
        </a>
    </div>
</div>

运行范例 »

运行以上范例，输出结果如下

缩略图

添加自定义的内容

我们可以往缩略图添加各种 HTML 内容，比如标题、段落或按钮

把带有 class .thumbnail 的 <div> 标签改为 <div>
在 <div> 内，可以添加任何您想要添加的东西

由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小
如果想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动

<div class="row">
    <div class="col-sm-6 col-md-3">
         <div class="thumbnail">
            <img src="/static/i/img1.jpg">
            <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>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/static/i/img2.jpg">
            <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>
</div>

运行范例 »

运行以上范例，输出结果如下

自定义缩略图