文档章节

bootstrap中的缩略图

9
 9秒教育
发布于 2015/12/05 15:55
字数 549
阅读 146
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

hive分区

hive为啥分区? hive为了避免全表扫描,从而引进分区技术来将数据进行划分。减少不必要数据的扫描,从而提高效率。 hive的分区和MySQL的分区的区别? mysql分区字段用的是表内字段;而hive分...

Mr_yul
27分钟前
1
0
log4j2发送消息至Kafka

title: 自定义log4j2发送日志到Kafka tags: log4j2,kafka 为了给公司的大数据平台提供各项目组的日志,而又使各项目组在改动上无感知。做了一番调研后才发现log4j2默认有支持将日志发送到kaf...

微笑向暖wx
31分钟前
0
0
LINUX中如何查看某个端口是否被占用(转发)

LINUX中如何查看某个端口是否被占用 之前查询端口是否被占用一直搞不明白,问了好多人,终于搞懂了,现在总结下: 1.netstat -anp |grep 端口号 如下,我以3306为例,netstat -anp |grep 33...

覃大光
今天
1
0
JBolt 1.5.0新版发布,升级到支持最新版JFinal和Jetty,实现了在线更新插件功能

JBolt是一个JFinal极速开发框架 定制版IDE插件 目前仅有Eclipse插件版,Idea插件版正在开发中。 JBolt的详细使用教程请移步到这里 =====版本1.5.0 更新内容 2018年10月13日10:41:52===== 注意...

山东-小木
今天
0
0
laravel 微信支付

1.composer加载laravel微信支付第三方文件 composer require "overtrue/laravel-wechat:~4.0" composer require simplesoftwareio/simple-qrcode 1.3.* //composer生成二维码文件 2.改confi......

vio小黑
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部