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

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="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

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