首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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实现奇偶行赋值不同css值
Feb 17 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
Javascript学习笔记之函数篇（五） : 构造函数
Nov 23 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
element-ui table行点击获取行索引（index）并利用索引更换行顺序
Feb 27 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 #Javascript
浅谈Node.js：fs文件系统模块
Dec 08 #Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 #Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 #Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 #Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 #Javascript
opencv(7) DNA(2) compose(3) RNA(2) iOS16(1) iOS(1) iPhone(1) iOS15(1) Athens(1) moviepy(1)
You might like
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP count()函数讲解
2019/02/03 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
phpStorm2020 注册码
2020/09/17 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
详解Vue.js 作用域、slot用法（单个slot、具名slot）
2019/10/15 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
django批量导入xml数据
2016/10/16 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python常见工厂函数用法示例
2018/03/21 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python中append实例用法总结
2019/07/30 Python
python聚类算法解决方案（rest接口/mpp数据库/json数据/下载图片及数据）
2019/08/28 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
小学运动会入场口号
2015/12/24 职场文书
python实现简单的名片管理系统
2021/04/26 Python