Bootstrap缩略图

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

<div class="row"><div class="col-sm-6 col-md-3"><a href="#" class="thumbnail"><img src="bg.jpg" alt="通用的占位符缩略图"></a></div><div class="col-sm-6 col-md-3"><a href="#" class="thumbnail"><img src="bg.jpg" alt="通用的占位符缩略图"></a></div><div class="col-sm-6 col-md-3"><a href="#" class="thumbnail"><img src="bg.jpg" alt="通用的占位符缩略图"></a></div><div class="col-sm-6 col-md-3"><a href="#" class="thumbnail"><img src="bg.jpg" alt="通用的占位符缩略图"></a></div>
</div>

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

<div class="row"><div class="col-sm-6 col-md-3"><div class="thumbnail"><img src="bg.jpg" alt="通用的占位符缩略图"><div class="caption"><h3>缩略图标签</h3><p>一些示例文本</p><p><a href="#" class="btn btn-primary" role="button">按钮</a><a href="#" class="btn btn-primary" role="button">按钮</a></p></div></div></div><div class="col-sm-6 col-md-3"><div class="thumbnail"><img src="bg.jpg" alt="通用的占位符缩略图"><div class="caption"><h3>缩略图标签</h3><p>一些示例文本</p><p><a href="#" class="btn btn-primary" role="button">按钮</a><a href="#" class="btn btn-primary" role="button">按钮</a></p></div></div></div><div class="col-sm-6 col-md-3"><div class="thumbnail"><img src="bg.jpg" alt="通用的占位符缩略图"><div class="caption"><h3>缩略图标签</h3><p>一些示例文本</p><p><a href="#" class="btn btn-primary" role="button">按钮</a><a href="#" class="btn btn-primary" role="button">按钮</a></p></div></div></div><div class="col-sm-6 col-md-3"><div class="thumbnail"><img src="bg.jpg" alt="通用的占位符缩略图"><div class="caption"><h3>缩略图标签</h3><p>一些示例文本</p><p><a href="#" class="btn btn-primary" role="button">按钮</a><a href="#" class="btn btn-primary" role="button">按钮</a></p></div></div></div>
</div>

Bootstrap缩略图相关推荐

Bootstrap 缩略图
缩略图缩略图用于给图片.视频.文本等加入栅格功能,很适合以网格形式展示图片.视频.商品列表等. 默认的缩略图非常简单,只需把图片放在 class="thumbnail" 的 &l ...
Bootstrap缩略图.thumbnail
缩略图缩略图是对Bootstrap栅格系统的扩展,将图片.视频.文本等加入到缩略图中,就可以很容易地以网格形式展示图片.视频.商品列表等. 默认缩略图 Boostrap中的默认缩略图设计非常简单,只 ...
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缩略图相关推荐

最新文章

热门文章