编程 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之自定义类型

May 04 Javascript

jq实现酷炫的鼠标经过图片翻滚效果

Mar 12 Javascript

Jquery 获取指定标签的对象及属性的设置与移除

May 29 Javascript

JavaScript sort数组排序方法和自我实现排序方法小结

Jun 06 Javascript

如何使用Vuex+Vue.js构建单页应用

Oct 27 Javascript

pc加载更多功能和移动端下拉刷新加载数据

Nov 07 Javascript

浅谈Node.js：理解stream

Dec 08 Javascript

懒加载实现的分页&&网站footer自适应

Dec 21 Javascript

浅谈jQuery操作类数组的工具方法

Dec 23 Javascript

如何抽象一个Vue公共组件

Oct 17 Javascript

Webpack中loader打包各种文件的方法实例

Sep 03 Javascript

react组件基本用法示例小结

Apr 27 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的命令行命令使用指南

2015/08/18 PHP

PHP面向对象程序设计组合模式与装饰模式详解

2016/12/02 PHP

php图像验证码生成代码

2017/06/08 PHP

Laravel框架使用Redis的方法详解

2018/05/30 PHP

js 提交和设置表单的值

2008/12/19 Javascript

JavaScript 字符串乘法

2009/08/20 Javascript

javascript options属性集合操作代码

2009/12/28 Javascript

js中关于String对象的replace使用详解

2011/05/24 Javascript

javascript阻止浏览器后退事件防止误操作清空表单

2013/11/22 Javascript

jquery实现tr元素的上下移动示例代码

2013/12/20 Javascript

Javascript基础教程之while语句

2015/01/18 Javascript

javascript正则表达式之search()用法实例

2015/01/19 Javascript

谈谈JavaScript中的几种借用方法

2016/08/09 Javascript

js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数

2016/10/25 Javascript

js仿京东轮播效果选项卡套选项卡使用

2017/01/12 Javascript

基于Vue实现页面切换左右滑动效果

2020/06/29 Javascript

JavaScript输入分钟、秒倒计时技巧总结（附代码）

2017/08/17 Javascript

Vue2.0父子组件传递函数的教程详解

2017/10/16 Javascript

浅谈Emergence.js 检测元素可见性的 js 插件

2017/11/18 Javascript

40行代码把Vue3的响应式集成进React做状态管理

2020/05/20 Javascript

[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示

2018/05/25 DOTA

python搭建微信公众平台

2016/02/09 Python

vscode 远程调试python的方法

2017/12/01 Python

Python socket实现简单聊天室

2018/04/01 Python

python pandas dataframe 行列选择,切片操作方法

2018/04/10 Python

python pandas 组内排序、单组排序、标号的实例

2018/04/12 Python

Python绘制频率分布直方图的示例

2019/07/08 Python

Python符号计算之实现函数极限的方法

2019/07/15 Python

Python3 虚拟开发环境搭建过程(图文详解)

2020/01/06 Python

python使用OpenCV模块实现图像的融合示例代码

2020/04/10 Python

浅谈Django前端后端值传递问题

2020/07/15 Python

2014最新房贷收入证明范本

2014/09/12 职场文书

党的群众路线教育实践活动对照检查材料思想汇报（党员篇）

2014/09/25 职场文书

会计实训报告范文

2014/11/04 职场文书

汶川大地震感悟

2015/08/10 职场文书

零基础学java之带参数以及返回值的方法

2022/04/10 Java/Android