Bootstrap框架class="thumbnail"是什么意思？

最新推荐文章于 2024-07-23 06:02:58 发布

置顶唐娜玛丽

最新推荐文章于 2024-07-23 06:02:58 发布

阅读量1.5w

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap class css thumbnail container

本文链接：https://blog.csdn.net/sinat_34719507/article/details/53576257

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

Bootstrap框架中的`thumbnail`类用于创建缩略图效果。它常与`<a>`标签和`<img>`标签结合使用，展示一组整齐排列的图片预览。在HTML结构中，`thumbnail`类应用在`<a>`标签上，通过`<div class="col-xs-6 col-md-3">`来控制响应式布局，确保在不同设备尺寸下图片能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Bootstrap框架中查阅图灵计算机大词典：
thumbnail

adj. 极小的, 极短的；

n. 大拇指的指甲, 极小之物；

n. 拇指甲(草图);adj.简略的，缩略的(拇指甲大小的,小型的)；

n. 极小的图片, 小的代表大的更多细节的图片 (计算机用语)；
thumbnail 在Bootstrap框架中真实含义：
n.【计】缩略图。
thumbnail在美工用来具体表现布局方式表达：
大致相当亦为效果图及缩略图，很小（大约为3×4英寸），缩略了细节比较粗糙，是最基本的东西。
直线或水波纹表示正文的位置，方框表示图形的位置。然后，中选的小样再进一步发展。

以下举个案例：
a元素超链接thumbnail呈缩略图构成 <div class="col-xs-6 col-md-3"> </div>：
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;">
            </a>
        </div>
    </div>
</div>