编程 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的合并表格中相同文本的相邻单元格的代码

Apr 06 Javascript

获取div编辑框，textarea，input text的光标位置兼容IE，FF和Chrome的方法介绍

Nov 08 Javascript

js同比例缩放图片的小例子

Oct 30 Javascript

Javascript浅谈之this

Dec 17 Javascript

javascript实现数字验证码的简单实例

Feb 10 Javascript

BootStrap下拉框在firefox浏览器界面不友好的解决方案

Aug 18 Javascript

JavaScript轻松创建级联函数的方法示例

Feb 10 Javascript

vue.js的安装方法

May 12 Javascript

jQuery实现checkbox的简单操作

Nov 18 jQuery

200行代码实现blockchain 区块链实例详解

Mar 14 Javascript

vue中利用Promise封装jsonp并调取数据

Jun 18 Javascript

JS 设计模式之：工厂模式定义与实现方法浅析

May 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 中文乱码解决办法总结分析

2009/07/30 PHP

简单的移动设备检测PHP脚本代码

2011/02/19 PHP

深入Apache与Nginx的优缺点比较详解

2013/06/17 PHP

php实现webservice实例

2014/11/06 PHP

PHP中使用数组指针函数操作数组示例

2014/11/19 PHP

php中实现获取随机数组列表的自定义函数

2015/04/02 PHP

PHP实现的文件浏览器功能简单示例

2019/09/12 PHP

详解no input file specified 三种解决方法

2019/11/29 PHP

Javascript中的for in循环和hasOwnProperty结合使用

2013/06/05 Javascript

分享javascript实现的冒泡排序代码并优化

2016/06/05 Javascript

AngularJS ng-bind 指令简单实现

2016/07/30 Javascript

BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法

2016/12/01 Javascript

jQuery实现文字自动横移

2017/01/08 Javascript

React + webpack 环境配置的方法步骤

2017/09/07 Javascript

浅谈webpack对样式的处理

2018/01/05 Javascript

JS中自定义事件的使用与触发操作实例分析

2019/11/01 Javascript

浅谈nuxtjs校验登录中间件和混入(mixin)

2020/11/06 Javascript

js实现随机点名功能

2020/12/23 Javascript

[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07

2020/11/09 DOTA

[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21

2020/11/24 DOTA

python使用内存zipfile对象在内存中打包文件示例

2014/04/30 Python

Python三级目录展示的实现方法

2016/09/28 Python

Python中协程用法代码详解

2018/02/10 Python

详解python读取和输出到txt

2019/03/29 Python

django-csrf使用和禁用方式

2020/03/13 Python

python 装饰器的使用示例

2020/10/10 Python

使用python把xmind转换成excel测试用例的实现代码

2020/10/12 Python

纯CSS3实现给头像加个光芒四射且旋转的背景动画效果

2014/05/07 HTML / CSS

宏碁西班牙官网：Acer西班牙

2021/01/08 全球购物

2014年三八妇女节活动总结

2014/03/01 职场文书

消防安全责任书

2014/04/14 职场文书

2014年重阳节活动策划方案书

2014/09/16 职场文书

起诉书范文

2015/05/20 职场文书

婚宴新郎致辞

2015/07/28 职场文书

《活见鬼》教学反思

2016/02/24 职场文书

2019消防宣传标语！

2019/07/10 职场文书