文档章节

bootstrap中的缩略图

9
 9秒教育
发布于 2015/12/05 15:55
字数 549
阅读 143
收藏 4
点赞 0
评论 0

缩略图(一)

缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。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 ⋅ 0

Bootstrap学习笔记(四):缩略图

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

TangJR ⋅ 2013/09/13 ⋅ 0

Bootstrap响应式前端框架笔记十二——巨幕与缩略图

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

珲少 ⋅ 2016/12/14 ⋅ 0

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

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

sinat_34719507 ⋅ 2016/12/11 ⋅ 0

Bootstrap学习笔记(三):基础CSS&组件

因为基础CSS与组件在官方文档中描述得非常清楚,所以在这里只是粗略的讲一下,有些自己有见解的地方,和大家一起分享一下。 1. 在水平布局表单中,有些时候仅仅是想要它的对齐方式,例如: ...

TangJR ⋅ 2013/09/12 ⋅ 0

Twitter发布Bootstrap 2.0

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

岭南六少 ⋅ 2012/02/03 ⋅ 16

Bootstrap中实现圆角、圆形头像和响应式图片/css3圆角、图片阴影效果总结

1、Bootstrap提供了四种用于类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角 .img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整...

wx599c47c7bdcad ⋅ 04/13 ⋅ 0

基于 Yii 开发的 CMS 系统--FirCMS

FirCMS 基于 Yii Framework 框架开发,采用 Apache-2.0 开源协议。 新版重新简化架构,使用框架原生目录架构。 测试账号:fircms fircms 需要在根目录下建立 assets 目录 protected 目录下建...

poctsy ⋅ 2013/10/08 ⋅ 1

bootstrap起步

全局性的样式文件,用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。 常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。...

CK-琳 ⋅ 2013/05/19 ⋅ 2

Bootstrap响应式前端框架笔记二——排版标签与类

Bootstrap响应式前端框架笔记二——排版标签与类 Bootstrap中对h标签的字体和字号进行了微调,开发者除了可以直接使用这些标签进行标题的修饰外,还可以使用.h1到.h6类来将其他元素的字体进行...

珲少 ⋅ 2016/12/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

数据结构与算法之双向链表

一、双向链表 1.双向链表的结点结构 typedef struct DualNode{ ElemType data; struct DualNode *prior; // 前驱结点 struct DualNode *next; // 后继结点}DualNode, *DuL...

aibinxiao ⋅ 13分钟前 ⋅ 0

五大最核心的大数据技术

大数据技术有5个核心部分,数据采集、数据存储、数据清洗、数据挖掘、数据可视化。关于这5个部分,有哪些核心技术?这些技术有哪些潜在价值?看完今天的文章就知道了。 大数据学习群:7165810...

董黎明 ⋅ 14分钟前 ⋅ 0

PhpStorm 头部注释、类注释和函数注释的设置

首先,PhpStorm中文件、类、函数等注释的设置在:setting-》Editor-》FIle and Code Template-》Includes下设置即可,其中方法的默认是这样的: /**${PARAM_DOC}#if (${TYPE_HINT} != "v...

nsns ⋅ 14分钟前 ⋅ 0

spring.net AOP

http://www.springframework.net/doc-latest/reference/html/aop-quickstart.html https://www.cnblogs.com/wujy/archive/2013/04/06/3003120.html...

whoisliang ⋅ 19分钟前 ⋅ 0

【HAVENT原创】创建 Dockerfile 生成新的镜像,并发布到 DockerHub

注意:Win7 与 Win10 的版本存在差异,Win7 版本使用 Docker Quickstart Terminal 进入控制台,Win10下面直接用管理员权限打开控制台或者 PowerShell 即可;另外 Win7 下面只能访问 C盘,/ap...

HAVENT ⋅ 19分钟前 ⋅ 0

pom.xml出现web.xml is missing ...解决方案

提示信息应该能看懂。也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了。 搜索了一下,Stack Overflow上的答案解决了问题,分享一下。 目前被顶次数最多的回答原文如下: This...

源哥L ⋅ 20分钟前 ⋅ 0

js时间戳与日期格式之间相互转换

1. 将时间戳转换成日期格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己...

Jack088 ⋅ 25分钟前 ⋅ 0

web添加log4j

添加xml配置log4j.properties # Global logging configuration---root日志设置#log4j.rootLogger=info,dailyRollingFile,stdoutlog4j.rootLogger=debug,stdout,dailyRollingFile---......

黄柳淞 ⋅ 26分钟前 ⋅ 0

如何解决生产环境宕机问题

写在前面:该篇宕机问题的排查难度远比上一篇(记一次解决线上OOM的心路历程)大的太多,上一篇中内存泄漏的问题是有迹可循的,本次的宕机在业务日志上没有任何征兆,另外本文有许多值得深挖...

寰宇01 ⋅ 38分钟前 ⋅ 0

Redis查漏补缺:最易错过的技术要点大扫盲

作者介绍 孤独烟,中国平安研发工程师,目前负责规则云平台架构设计以及需求研发工作。毕业后一直从事Java开发工作,在Web开发、架构设计上有多年的实战经验。在MySQL性能优化、JVM调优、分布...

kim_o ⋅ 39分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部