频道栏目
首页 > 资讯 > HTML/CSS > 正文

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

16-12-15        来源:[db:作者]  
收藏   我要投稿

在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>
相关TAG标签
上一篇:台积电:绝大多数7nm客户都会转向6nm_IT新闻_博客园
下一篇:最后一页
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站