编程 Javascript

Bootstrap基本组件学习笔记之缩略图(13)

Posted in Javascript onDecember 08, 2016

Bootstrap 通过缩略图为网站布局提供了一种简洁的解决方案。

直接看例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>缩略图</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>缩略图</h1>
 </div>
 <div class="col-xs-2">
 <div class="thumbnail">
  <img src="../../img/girl.jpg">
  <div class="caption">
  <p>我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生</p>
  <p><a href="#" class="btn btn-primary">查看详情</a></p>
  </div>
 </div>
 </div>
 <div class="col-xs-2">
 <div class="thumbnail">
  <img src="../../img/girl.jpg">
  <div class="caption">
  <p>我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生</p>
  <p><a href="#" class="btn btn-primary">查看详情</a></p>
  </div>
 </div>
 </div>
 <div class="col-xs-2">
 <div class="thumbnail">
  <img src="../../img/girl.jpg">
  <div class="caption">
  <p>我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生</p>
  <p><a href="#" class="btn btn-primary">查看详情</a></p>
  </div>
 </div>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本组件学习笔记之缩略图(13)

从上面例子可以看出，实现缩略图需要添加.thumbnail样式类，这样会在图片四周添加padding的边框，同时当鼠标悬停在图片上时，会动态显示出轮廓。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本组件学习笔记之缩略图(13)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery的强大选择器小结

Dec 27 Javascript

javascript动态添加表格数据行(ASP后台数据库保存例子)

May 08 Javascript

关于Jquery操作Cookie取值错误的解决方法

Aug 26 Javascript

离开当前页面前使用js判断条件提示是否要离开页面

May 02 Javascript

node.js操作mysql(增删改查)

Jul 24 Javascript

Bootstrap每天必学之弹出框（Popover）插件

Apr 25 Javascript

JS动态计算移动端rem的解决方案

Oct 14 Javascript

angular实现form验证实例代码

Jan 17 Javascript

详解vue-router 2.0 常用基础知识点之router-link

May 10 Javascript

jQuery实现文本显示一段时间后隐藏的方法分析

Jun 20 jQuery

Vue.js下拉菜单组件使用方法详解

Oct 19 Javascript

vue自定义指令实现仅支持输入数字和浮点型的示例

Oct 30 Javascript

Bootstrap基本组件学习笔记之分页(12)

Dec 08 #Javascript

浅谈Node.js：fs文件系统模块

Dec 08 #Javascript

Bootstrap基本插件学习笔记之模态对话框(16)

Dec 08 #Javascript

概述BootStrap中role="form"及role作用角色

Dec 08 #Javascript

Bootstrap基本插件学习笔记之标签切换(17)

Dec 08 #Javascript

Bootstrap基本插件学习笔记之Popover提示框(19)

Dec 08 #Javascript

JS焦点图,JS 多个页面放多个焦点图的实例

Dec 08 #Javascript

You might like

PHP加密扩展库Mcrypt安装和实例

2013/11/10 PHP

yii 2.0中表单小部件的使用方法示例

2017/05/23 PHP

PHP读取文件,解决中文乱码UTF-8的方法分析

2020/01/22 PHP

ThinkPHP 5 AJAX跨域请求头设置实现过程解析

2020/10/28 PHP

Knockout visible绑定使用方法

2013/11/15 Javascript

原生javascript实现的分页插件pagenav

2014/08/28 Javascript

基于javascript bootstrap实现生日日期联动选择

2016/04/07 Javascript

Bootstrap 折叠（Collapse）插件用法实例详解

2016/06/01 Javascript

各式各样的导航条效果css3结合jquery代码实现

2016/09/17 Javascript

BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法

2016/12/01 Javascript

vue.js实现单选框、复选框和下拉框示例

2017/07/18 Javascript

ejsExcel模板在Vue.js项目中的实际运用

2018/01/27 Javascript

vue之父子组件间通信实例讲解(props、$ref、$emit)

2018/05/22 Javascript

Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)

2018/08/24 Javascript

React如何解决fetch跨域请求时session失效问题

2018/11/02 Javascript

在SSM框架下用laypage和ajax实现分页和数据交互的方法

2019/09/27 Javascript

nodejs实现UDP组播示例方法

2019/11/04 NodeJs

JS 遍历 json 和 JQuery 遍历json操作完整示例

2019/11/11 jQuery

通过实例了解JS执行上下文运行原理

2020/06/17 Javascript

[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16

2019/08/18 DOTA

在Python的Django框架中获取单个对象数据的简单方法

2015/07/17 Python

Python实现Dijkstra算法

2018/10/17 Python

浅谈Python爬虫基本套路

2019/03/25 Python

如何使用python把ppt转换成pdf

2019/06/29 Python

OpenCV 轮廓检测的实现方法

2019/07/03 Python

Python实现RabbitMQ6种消息模型的示例代码

2020/03/30 Python

Python self用法详解

2020/11/28 Python

应届优秀本科大学毕业生自我鉴定

2014/01/21 职场文书

教育基金募捐倡议书

2014/05/14 职场文书

实验室的标语

2014/06/20 职场文书

离婚协议书怎么写的

2014/12/14 职场文书

同步小康驻村工作简报

2015/07/20 职场文书

团队拓展训练感想

2015/08/07 职场文书

高中16字霸气押韵班级口号集锦！

2019/06/27 职场文书

python爬虫之爬取笔趣阁小说

2021/04/22 Python

2022微信温控新功能上线

2022/05/09 数码科技