编程 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 相关文章推荐

XP折叠菜单&仿QQ2006菜单

Dec 16 Javascript

Js点击弹出下拉菜单效果实例

Aug 12 Javascript

JavaScript排序算法之希尔排序的2个实例

Apr 04 Javascript

jQuery中:contains选择器用法实例

Dec 30 Javascript

jquery使用经验小结

May 20 Javascript

jQuery实现dialog设置focus焦点的方法

Jun 10 Javascript

微信小程序参数传递详解

Oct 24 Javascript

js实现手机web图片左右滑动效果

Dec 29 Javascript

js实现图片无缝循环轮播

Oct 28 Javascript

关于vue2强制刷新,解决页面不会重新渲染的问题

Oct 29 Javascript

vue中使用WX-JSSDK的两种方法(推荐)

Jan 18 Javascript

JavaScript类的继承多种实现方法

May 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上传图片客户端和服务器端实现方法

2015/03/30 PHP

PHP中如何判断exec函数执行成功？

2016/08/04 PHP

PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)

2016/09/11 PHP

php版微信自动登录并获取昵称的方法

2016/09/23 PHP

PHP批量删除jQuery操作

2017/07/23 PHP

php mysql PDO 查询操作的实例详解

2017/09/23 PHP

PHP PDOStatement::setAttribute讲解

2019/02/01 PHP

js中的referrer返回上一页使用介绍

2013/09/26 Javascript

node.js中的events.emitter.removeListener方法使用说明

2014/12/10 Javascript

jQuery实现统计输入文字个数的方法

2015/03/11 Javascript

jQuery检测输入的字符串包含的中英文的数量

2015/04/17 Javascript

jquery插件hiAlert实现网页对话框美化

2015/05/03 Javascript

利用D3.js实现最简单的柱状图示例代码

2016/12/09 Javascript

基于jQuery实现文字打印动态效果

2017/04/21 jQuery

webpack构建vue项目的详细教程（配置篇）

2017/07/17 Javascript

Thinkphp5微信小程序获取用户信息接口的实例详解

2017/09/26 Javascript

jQuery实现的简单前端搜索功能示例

2017/10/28 jQuery

Vue父组件如何获取子组件中的变量

2019/07/24 Javascript

JavaScript ECMA-262-3 深入解析（二）：变量对象实例详解

2020/04/25 Javascript

es6函数之尾调用优化实例分析

2020/04/25 Javascript

[48:21]林俊杰圣堂刺客超神杀戮秀

2014/10/29 DOTA

Python实现的矩阵类实例

2017/08/22 Python

Python中修改字符串的四种方法

2018/11/02 Python

详解pandas安装若干异常及解决方案总结

2019/01/10 Python

浅谈Pycharm中的Python Console与Terminal

2019/01/17 Python

python实现狄克斯特拉算法

2019/01/17 Python

详解Python用三种方式统计词频的方法

2019/07/29 Python

pytorch索引查找 index_select的例子

2019/08/18 Python

python pptx复制指定页的ppt教程

2020/02/14 Python

教师师德教育的自我评价

2013/10/31 职场文书

党风廉政建设责任书

2014/04/14 职场文书

超市创业计划书

2014/04/24 职场文书

党员学习中共十八大思想报告

2014/09/12 职场文书

民事和解协议书格式

2014/11/29 职场文书

党员学习中国梦心得体会

2016/01/05 职场文书

Redis 操作多个数据库的配置的方法实现

2022/03/23 Redis