Bootstrap3 缩略图( thumbnail )

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

在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。

   <ul><li class="col-xs-1"><a href="#" class="thumbnail"><img src="data:images/5.jpg"/></a></li><li class="col-xs-2"><a href="#" class="thumbnail"><img src="data:images/2.jpg"/></a></li><li class="col-xs-3"><a href="#" class="thumbnail"><img src="data:images/3.jpg"/></a></li><li class="col-xs-4"><a href="#" class="thumbnail"><img src="data:images/4.jpg"/></a></li></ul>

添加自定义的内容

我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：

把带有 class .thumbnail 的 <a> 标签改为 <div>。
在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

<ul class="list-unstyled"><li class="col-sm-4"><!--自定义 class .thumbnail 的 <a> 标签改为 <div>。--><div class="thumbnail"><!--class .thumbnail 的 <a> 标签。--><a href="#" class="thumbnail"><img src="data:images/11.jpg"/></a><h3>卡帕Kappa女鞋专场</h3><p><span class="label label-info">剩余</span>4天12时30分19秒</p><p class="btn btn-success">品牌介绍</p><p class="btn btn-default">详细介绍</p></div></li> <li class="col-sm-4"><!--自定义 class .thumbnail 的 <a> 标签改为 <div>。--><div class="thumbnail"><!--class .thumbnail 的 <a> 标签。--><a href="#" class="thumbnail"><img src="data:images/12.jpg"/></a><h3>韩都衣舍HSTYLE女上装专场</h3><p><span class="label label-info">剩余</span>4天12时30分19秒</p><p class="btn btn-success">品牌介绍</p><p class="btn btn-default">详细介绍</p></div></li>   <li class="col-sm-4"><!--自定义 class .thumbnail 的 <a> 标签改为 <div>。--><div class="thumbnail"><!--class .thumbnail 的 <a> 标签。--><a href="#" class="thumbnail"><img src="data:images/13.jpg"/></a><h3>HAZZYS男装专场 </h3><p><span class="label label-info">剩余</span>4天12时30分19秒</p><p class="btn btn-success">品牌介绍</p><p class="btn btn-default">详细介绍</p></div></li>   </ul>

Bootstrap3 缩略图( thumbnail )相关推荐

缩略图thumbnail
在菜鸟教程学bootstrap的时候,遇见缩略图,练习学习一下.以下是菜鸟教程的链接: http://www.runoob.com/bootstrap/bootstrap-thumbnails.htm ...
Bootstrap缩略图.thumbnail
缩略图缩略图是对Bootstrap栅格系统的扩展,将图片.视频.文本等加入到缩略图中,就可以很容易地以网格形式展示图片.视频.商品列表等. 默认缩略图 Boostrap中的默认缩略图设计非常简单,只 ...
iOS照片缩略图thumbnail模糊问题
使用ALAsset获取图片的缩略图,一般都有模糊的问题 [_imageView setImage:[UIImage imageWithCGImage:asset.thumbnail]]; 对于这种问题 ...
thumbnail的处理流程和读取缩略图thumbnail所在sample的index的方法
取得video thumbnail的处理流程如下图所示,取得image的thumbnail的处理流程类似,只是取得image thumbnail的函数变成了ThumbnailUtils.createI ...
php 图片生成视频,PHP基于ffmpeg实现转换视频，截图及生成缩略图的方法
本文实例讲述了PHP基于ffmpeg实现转换视频,截图及生成缩略图的方法.分享给大家供大家参考,具体如下: 这里把ffmpeg 和生成缩略图整合了一下: include("ImageRe ...
PHP做视频网站，让程序自动实现视频格式转换、设置视频大小、生成视频缩略图...
一.PHP实现转换在做视频网站的时候,最头痛的问题可能是格式转换.视频缩略图等.下面我将用PHP实现这一些功能.PHP是没有自带视频的函数,所以会用到第三方的软件工具来实现. 二.什么是FFmpeg ...
html 列表bootstrap,bootstrap都有哪些类？
Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签.那么bootstrap都有哪些类?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希 ...
Glide 的基本使用
导入引用: 项目中引入Glide 图片框架:repositories {mavenCentral() } dependencies {compile 'com.github.bumptech.glid ...
Python图像处理库：PIL中Image,ImageDraw等基本模块介绍
常用操作合成 Image.blend(i1,i2,a)/Image.composite(i1,i2,mask) 缩略图 thumbnail(size,filter=None) Modifies ...

Bootstrap3 缩略图( thumbnail )

添加自定义的内容

Bootstrap3 缩略图( thumbnail )相关推荐

最新文章

热门文章