文档章节

bootstrap中的缩略图

9
 9秒教育
发布于 2015/12/05 15:55
字数 549
阅读 149
收藏 4

缩略图(一)

缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。

源码文件:

☑  LESS版本:对应文件thumbnails.less

☑  Sass版本:对应文件_thumbnails.scss

☑ 编译后版本:bootstrap.css文件第4402行~第4426行

使用方法:

通过“thumbnail”样式配合bootstrap的网格系统来实现。

前面也说过了,缩略图的实现是配合网格系统一起使用,假设我们一个产品列表,如下图所示:

555

先来看结构:

<div>     <div>         <div class="col-xs-6 col-md-3">             <a href="#" class="thumbnail">                 <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">             </a>         </div>     …     </div> </div>

上面的结构表示的是在宽屏幕(可视区域大于768px)的时候,一行显示四个缩略图:

在窄屏(可视区域小于768px)的时候,一行只显示两个缩略图:

实现原理:

布局实现的主要是依靠于Bootstrap框架的网格系统,而缩略图对应的样式代码:

/*bootstrap.css文件第4402行~第4426行*/ .thumbnail {   display: block;   padding: 4px;   margin-bottom: 20px;   line-height: 1.42857143;   background-color: #fff;   border: 1px solid #ddd;   border-radius: 4px;   -webkit-transition: all .2s ease-in-out;           transition: all .2s ease-in-out; } .thumbnail > img, .thumbnail a > img {   margin-right: auto;   margin-left: auto; } a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {   border-color: #428bca; } .thumbnail .caption {   padding: 9px;   color: #333; }

在仅有缩略图的基础上,添加了一个div名为“caption“的容器,在这个容器中放置其他内容,比如说标题,文本描述,按钮等:

<div>     <div>         <div class="col-xs-6 col-md-3">             <a href="#" class="thumbnail">                 <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt="">             </a>             <div class="caption">                 <h3>Bootstrap框架系列教程</h3>                 <p>Bootstrap框架是一个优秀的前端框,就算您是一位后端程序员或者你是一位不懂设计的前端人员,你也能依赖于Bootstrap制作做优美的网站...</p>                 <p>                     <a href="##" class="btn btn-primary">开始学习</a>                     <a href="##" class="btn btn-info">正在学习</a>                 </p>             </div>         </div>     …     </div> </div>


© 著作权归作者所有

共有 人打赏支持
9
粉丝 2
博文 24
码字总数 32297
作品 0
东城
私信 提问
Bootstrap 缩略图

本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带...

wybo521
2016/01/28
14
0
Bootstrap学习笔记(四):缩略图

上一篇博客说了一下组件,但是在最后一项缩略图方面说得并不是很清楚,今天自己试了一下,终于基本了解了。在网上看了一些缩略图的介绍,但是我自己在理解方面还是走了弯路,可能是因为大家觉...

TangJR
2013/09/13
0
0
Bootstrap响应式前端框架笔记十二——巨幕与缩略图

Bootstrap响应式前端框架笔记十二——巨幕与缩略图 巨幕用于创建一块区域,此区域可以用来展示网页页头或者需要重点提示的地方,使用jumbotron类来创建巨幕,示例如下: 效果如下: 除了使用...

珲少
2016/12/14
232
0
Bootstrap框架class="thumbnail"是什么意思?

在Bootstrap框架中查阅图灵计算机大词典: thumbnail adj. 极小的, 极短的; n. 大拇指的指甲, 极小之物; n. 拇指甲(草图);adj.简略的,缩略的(拇指甲大小的,小型的); n. 极小的图片, 小的...

sinat_34719507
2016/12/11
0
0
Twitter发布Bootstrap 2.0

Twitter今天其开发者博客正式发布了Bootstrap 2.0,源代码已在GitHub上公布。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作...

岭南六少
2012/02/03
12.6K
16

没有更多内容

加载失败,请刷新页面

加载更多

如何解决 homebrew 更新慢的问题

之前一直困扰于 Homebrew 的更新速度,曾试过修改更新源(清华、中科大等)的方式,但是并没什么卵用;也试过设置 curl 代理的方式,但是 brew 走的好像不是 curl 的方式,所以也没用。 通过...

whoru
12分钟前
0
0
TiDB EcoSystem Tools 原理解读系列(二)TiDB-Lightning Toolset 介绍

简介 TiDB-Lightning Toolset 是一套快速全量导入 SQL dump 文件到 TiDB 集群的工具集,自 2.1.0 版本起随 TiDB 发布,速度可达到传统执行 SQL 导入方式的至少 3 倍、大约每小时 100 GB,适合...

TiDB
14分钟前
0
0
【Visual Studio 扩展工具】如何在ComponentOneFlexGrid树中显示RadioButton

概述 在ComponentOne Enterprise .NET控件集中,FlexGrid表格控件是用户使用频率最高的控件之一。它是一个功能强大的数据管理工具,轻盈且灵动,以分层的形式展示数据(数据呈现更加直观)。...

葡萄城技术团队
16分钟前
0
0
Maven环境隔离

Maven环境隔离 1. 什么是Maven环境隔离 顾名思义,Maven环境隔离就是将开发中的环境与beat环境、生产环境分隔开,方便进行开发和维护。这个在实际项目中用的还是很多的,如果你的项目用的Mav...

蚂蚁-Declan
16分钟前
1
0
day182-2018-12-19-英语流利阅读-待学习

“性感”时代已去,维密将如何转身? Daniel 2018-12-19 1.今日导读 维多利亚的秘密(Victoria's Secret)这个内衣品牌,最近似乎步入了“中年危机”——曾经打遍天下的“性感”内衣,在主打...

飞鱼说编程
17分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部