Bootstrap缩略图

最新推荐文章于 2022-10-13 22:35:52 发布

Dannii_

最新推荐文章于 2022-10-13 22:35:52 发布

阅读量1.3k

点赞数

分类专栏： bootstrap 文章标签： bootstrap 缩略图

本文链接：https://blog.csdn.net/qq_36748278/article/details/60763941

版权

bootstrap 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用 Bootstrap 创建缩略图：
（1）在图像周围添加带有 .thumbnail 的 <a> 标签。
（2）这会添加四个像素的内边距（padding）和一个灰色的边框。
（3）当鼠标悬停在图像上时，会动画显示出图像的轮廓。

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

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

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

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

这里写图片描述

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

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

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

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

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