编程 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具有类似Lambda表达式编程能力的代码(改进版)

Sep 14 Javascript

Document:getElementsByName()使用方法及示例

Oct 28 Javascript

jQuery中操控hidden、disable等无值属性的方法

Jan 06 Javascript

写出高效jquery代码的19条指南

Mar 19 Javascript

href下载文件根据id取url并下载

May 28 Javascript

node.js实现逐行读取文件内容的代码

Jun 27 Javascript

原生js实现吸顶效果

Mar 13 Javascript

解析Vue 2.5的Diff算法

Nov 28 Javascript

深入理解JS中Number()，parseInt()，parseFloat()三者比较

Aug 24 Javascript

解决vuex刷新状态初始化的方法实现

Aug 15 Javascript

layer.open的自适应及居中及子页面标题的修改方法

Sep 05 Javascript

Openlayers+EasyUI Tree动态实现图层控制

Sep 28 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 mb_convert_encoding 获取字符串编码类型实现代码

2009/04/26 PHP

PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式

2014/05/04 PHP

jQuery获取json后使用zy_tmpl生成下拉菜单

2015/03/27 PHP

Zend Framework动作助手Url用法详解

2016/03/05 PHP

Yii框架Session与Cookie使用方法示例

2019/10/14 PHP

实测jquery data()如何存值

2013/08/18 Javascript

多种方法实现load加载完成后把图片一次性显示出来

2014/02/19 Javascript

javascript读写json示例

2014/04/11 Javascript

JavaScript基础篇（6）之函数表达式闭包

2015/12/11 Javascript

javascript图片延迟加载实现方法及思路

2015/12/31 Javascript

原生js实现网页顶部自动下拉/收缩广告效果

2017/01/20 Javascript

如何使用angularJs

2017/05/08 Javascript

jQuery实现可兼容IE6的滚动监听功能

2017/09/20 jQuery

基于VUE.JS的移动端框架Mint UI的使用

2017/10/11 Javascript

javascript trie前缀树的示例

2018/01/29 Javascript

微信小程序之自定义组件的实现代码（附源码）

2018/08/02 Javascript

详解jQuery获取特殊属性的值以及设置内容

2018/11/14 jQuery

原生JS无缝滑动轮播图

2019/10/22 Javascript

nginx配置域名后的二级目录访问不同项目的配置操作

2020/11/06 Javascript

vue绑定class的三种方法

2020/12/24 Vue.js

[01:23]一分钟告诉你 DOTA2为什么叫信仰2

2014/06/20 DOTA

Windows系统下安装Python的SSH模块教程

2015/02/05 Python

python自然语言编码转换模块codecs介绍

2015/04/08 Python

python获取时间及时间格式转换问题实例代码详解

2018/12/06 Python

python装饰器常见使用方法分析

2019/06/26 Python

Python字符串处理的8招秘籍(小结)

2019/08/13 Python

win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题

2019/10/24 Python

农业资源与环境专业自荐信范文

2013/12/30 职场文书

大学生活动总结怎么写

2014/04/29 职场文书

给客户的感谢信

2015/01/21 职场文书

综合素质评价思想道德自我评价

2015/03/09 职场文书

2015年纪检监察工作总结

2015/04/08 职场文书

新闻简讯格式及范文

2015/07/22 职场文书

大学体育课感想

2015/08/10 职场文书

幽默口才训练经典句子（48句）

2019/08/19 职场文书

vscode中使用npm安装babel的方法

2021/08/02 Javascript