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

JavaScript是否可实现多线程深入理解JavaScript定时机制

Dec 22 Javascript

js 异步处理进度条

Apr 01 Javascript

Javascript改变CSS样式(局部和全局)

Dec 18 Javascript

jQuery中appendTo()方法用法实例

Jan 08 Javascript

jQuery使用$.ajax进行即时验证的方法

Dec 08 Javascript

Function.prototype.apply()与Function.prototype.call()小结

Apr 27 Javascript

Node.JS文件系统解析实例详解

May 15 Javascript

koa2实现登录注册功能的示例代码

Dec 03 Javascript

微信小程序实现分享商品海报功能

Sep 30 Javascript

vue3实现v-model原理详解

Oct 09 Javascript

Node.js中文件系统fs模块的使用及常用接口

Mar 06 Javascript

记一次vue跨域的解决

Oct 21 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网站在线人数统计

2008/04/09 PHP

请离开include_once和require_once

2013/07/18 PHP

ThinkPHP实现更新数据实例详解(demo)

2016/06/29 PHP

php封装的数据库函数与用法示例【参考thinkPHP】

2016/11/08 PHP

深入学习微信网址链接解封的防封原理visit_type

2019/08/15 PHP

PHP常用函数之根据生日计算年龄功能示例

2019/10/21 PHP

JS模拟多线程

2007/02/07 Javascript

通过jQuery源码学习javascript(三)

2012/12/27 Javascript

键盘上一张下一张兼容IE/google/firefox等浏览器

2014/01/28 Javascript

JS实现将人民币金额转换为大写的示例代码

2014/02/13 Javascript

JS+CSS实现可拖动的弹出提示框

2015/02/16 Javascript

JavaScript函数节流概念与用法实例详解

2016/06/20 Javascript

JS获取随机数和时间转换的简单实例

2016/07/10 Javascript

实例解析Array和String方法

2016/12/14 Javascript

NodeJS实现客户端js加密

2017/01/09 NodeJs

微信小程序 request接口的封装实例代码

2017/04/26 Javascript

JS实现table表格固定表头且表头随横向滚动而滚动

2017/10/26 Javascript

react组件从搭建脚手架到在npm发布的步骤实现

2019/01/09 Javascript

Vue.js获取手机系统型号、版本、浏览器类型的示例代码

2020/05/10 Javascript

[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25

2020/11/25 DOTA

Python中AND、OR的一个使用小技巧

2015/02/18 Python

从源码解析Python的Flask框架中request对象的用法

2016/06/02 Python

python实现的正则表达式功能入门教程【经典】

2017/06/05 Python

Python 反转字符串(reverse)的方法小结

2018/02/20 Python

利用python为运维人员写一个监控脚本

2018/03/25 Python

python实现简单银行管理系统

2019/10/25 Python

解决jupyter notebook 前面书写后面内容消失的问题

2020/04/13 Python

Python 利用flask搭建一个共享服务器的步骤

2020/12/05 Python

python中Pexpect的工作流程实例讲解

2021/03/02 Python

Kendra Scott官网：美国领先的时尚配饰品牌

2020/10/22 全球购物

sealed修饰符是干什么的

2012/10/23 面试题

教育专业个人求职信

2013/12/02 职场文书

无房证明范本

2014/09/17 职场文书

《一面五星红旗》教学反思

2016/02/23 职场文书

MySQL中存储时间的最佳实践指南

2021/07/01 MySQL

使用vuex-persistedstate本地存储vuex

2022/04/29 Vue.js