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个精彩的专题:

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

Javascript 相关文章推荐
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
node.js中 stream使用教程
Aug 28 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
详解Layer弹出层样式
Aug 21 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
JavaScript流程控制(分支)
Dec 06 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
You might like
生成卡号php代码
2008/04/09 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python实现学生成绩测评系统
2020/06/22 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
实用求职信范文分享
2013/12/25 职场文书
公司门卫岗位职责
2014/03/15 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
招标授权委托书样本
2014/09/23 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
学校党支部承诺书
2015/04/30 职场文书
爱心捐款活动总结
2015/05/09 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript