Bootstrap 缩略图

缩略图

缩略图用于给图片、视频、文本等加入栅格功能，很适合以网格形式展示图片、视频、商品列表等。

默认的缩略图非常简单，只需把图片放在 class="thumbnail" 的 <a> 标签中即可。如：

<a href="#" class="thumbnail">
<img src="img/260x180.jpg" alt="">
</a>

如果要定义缩略图的列表，使用类为 .thumbnails 的 <ul> 包裹任意数量的 <li> 元素，并使用 .span* 来控制缩略图的尺寸，再把上述的 <a> 标签放到 <li> 中即可。如：

<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="img/cat.jpg" alt="">
</a>
</li>
...
</ul>

Bootstrap会给图片加上 4 像素的内边距和一个灰色边框。而且，鼠标悬停时，图片四周还会出现动态光晕。效果如图 4‑51所示：

图4-51 Bootstrap缩略图组件thumbnail

如果要在缩略图中自定义HTML内容，如添加标题、段落、按钮等，也很简单，只需把上述的 <a> 替换成 <div> 就行了。如：

<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="img/cat2.jpg" alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
...
</ul>

效果如图 4‑52所示：

图4-52 Bootstrap缩略图列表thumbnails

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap 缩略图相关推荐

Bootstrap缩略图.thumbnail
缩略图缩略图是对Bootstrap栅格系统的扩展,将图片.视频.文本等加入到缩略图中,就可以很容易地以网格形式展示图片.视频.商品列表等. 默认缩略图 Boostrap中的默认缩略图设计非常简单,只 ...
Bootstrap缩略图
使用 Bootstrap 创建缩略图 : (1)在图像周围添加带有 .thumbnail 的 <a> 标签. (2)这会添加四个像素的内边距(padding)和一个灰色的边框. (3)当鼠 ...
bootstrap 元素
Bootstrap 笔记元素学习网址:http://www.runoob.com/bootstrap/bootstrap-tutorial.html Bootstrap CSS Bootstrap ...
Bootstrap学习 (一)
Bootstrap学习(一) 准备 1.需要下载的资源 2.参考资源 1. HBuilder快捷键设置 2. Bootstrap的使用 2.1 01-BootStrap的页面模板代码 2.2 参考A ...
【笔记】《Bootstrap实战》——第6章单页营销网站
文章目录一.概况二.初始文件三.了解页面内容四.调整导航条五.定制高清图六.美化功能列表七.装饰用户评论区 1.定位及美化说明 2.调整说明元素的位置 3.添加 Bootstrap 的网 ...
oracle 脚本命令集合,Oracle命令行模式，批量执行SQL脚本
Android 摇一摇功能的注意事项 /**开始重力传感器的检测*/ public void start() { // 获得传感器管理器 sensorManager = (SensorManager) ...
bootstrapt学习指南_bootstrap-知识点梳理-学习入门篇
一.Bootstrap CSS 1.Bootstrap 网格系统 2.Bootstrap 排版 3.Bootstrap 代码 4.Bootstrap 表格 5.Bootstrap 表单 6.Boots ...
Bootstrap组件_巨幕，页头，缩略图
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板
1 缩略图缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息. Bootstrap框架将这一部独立成一个模块组件.并通过&q ...

Bootstrap 缩略图

缩略图

Bootstrap 缩略图相关推荐

最新文章

热门文章