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 相关文章推荐
jQuery 中DOM 操作详解
Jan 13 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
js实现旋转的星空效果
Nov 01 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
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/01/10 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
js的event详解。
2006/09/06 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
js单例模式的两种方案
2013/10/22 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
晨会主持词
2014/03/17 职场文书
读书活动总结
2014/04/28 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
高中班主任评语
2014/12/30 职场文书
介绍信的格式
2015/01/30 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书