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

Javascript写了一个清除“logo1_.exe”的杀毒工具（可扫描目录）

Feb 09 Javascript

jquery ajax 调用失败的原因示例介绍

Sep 27 Javascript

js实现网页随机切换背景图片的方法

Nov 01 Javascript

JavaScript实现更改网页背景与字体颜色的方法

Feb 02 Javascript

jquery实现简单的二级导航下拉菜单效果

Sep 07 Javascript

Bootstrap使用基础教程详解

Sep 05 Javascript

js 判断数据类型的几种方法

Jan 13 Javascript

JavaScript日期选择功能示例

Jan 16 Javascript

20个最常见的jQuery面试问题及答案

May 23 jQuery

在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

Sep 04 Javascript

vue基础之模板和过滤器用法实例分析

Mar 12 Javascript

vue中组件通信的八种方式（值得收藏！）

Aug 09 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

深入array multisort排序原理的详解

2013/06/18 PHP

php对csv文件的读取,写入,输出下载操作详解

2013/08/10 PHP

php根据操作系统转换文件名大小写的方法

2014/02/24 PHP

smarty模板引擎之分配数据类型

2015/03/30 PHP

centos7上编译安装php7以php-fpm方式连接apache

2018/11/08 PHP

javascript iframe中打开文件,并检测iframe存在否

2008/12/28 Javascript

javascript 四则运算精度修正函数代码

2010/05/31 Javascript

js 利用image对象实现图片的预加载提高访问速度

2013/03/29 Javascript

js 文本滚动效果的实例代码

2013/08/17 Javascript

jQuery多媒体插件jQuery Media Plugin使用详解

2014/12/19 Javascript

jQuery中each()、find()和filter()等节点操作方法详解(推荐)

2016/05/25 Javascript

js中的关联数组与普通数组详解

2016/07/27 Javascript

学习vue.js表单控件绑定操作

2016/12/05 Javascript

bootstrap组件之按钮式下拉菜单小结

2017/01/19 Javascript

微信小程序使用radio显示单选项功能【附源码下载】

2017/12/11 Javascript

单页面vue引入百度统计的使用方法示例详解

2018/10/13 Javascript

Vue CL3 配置路径别名详解

2019/05/30 Javascript

三步实现ionic3点击退出app程序

2019/09/17 Javascript

不刷新网页就能链接新的js文件方法总结

2020/03/01 Javascript

[00:57]林俊杰助阵DOTA2亚洲邀请赛

2015/01/28 DOTA

python 远程统计文件代码分享

2015/05/14 Python

Python面向对象编程之继承与多态详解

2018/01/16 Python

在python中用url_for构造URL的方法

2019/07/25 Python

为什么说python适合写爬虫

2020/06/11 Python

卡西欧G-SHOCK英国官网：防水防震手表

2018/01/08 全球购物

化验室技术员岗位职责

2013/12/24 职场文书

营销总经理岗位职责

2014/02/02 职场文书

体育教师个人的自我评价

2014/02/16 职场文书

聚美优品陈欧广告词

2014/03/14 职场文书

中学生逃课检讨书

2015/02/17 职场文书

感恩节寄语2015

2015/03/24 职场文书

浅谈Python实现opencv之图片色素的数值运算和逻辑运算

2021/06/23 Python

python接口测试返回数据为字典取值方式

2022/02/12 Python

分析SQL窗口函数之聚合窗口函数

2022/04/21 Oracle

python数字图像处理之对比度与亮度调整示例

2022/06/28 Python

mysql函数之截取字符串的实现

2022/08/14 MySQL