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

IE8 引入跨站数据获取功能说明

Jul 22 Javascript

自己封装的javascript事件队列函数版

Jun 12 Javascript

jQuery实现跟随鼠标运动图层效果的方法

Feb 02 Javascript

Bootstrap编写导航栏和登陆框

May 30 Javascript

Vue Spa切换页面时更改标题的实例代码

Jul 15 Javascript

js基于FileSaver.js 浏览器导出Excel文件的示例

Aug 15 Javascript

Vue波纹按钮组件制作

Apr 30 Javascript

几个你不知道的技巧助你写出更优雅的vue.js代码

Jun 11 Javascript

如何用JavaScript实现功能齐全的单链表详解

Feb 11 Javascript

解决Layui当中的导航条动态添加后渲染失败的问题

Sep 25 Javascript

JS实现烟花爆炸效果

Mar 10 Javascript

JS实现按比例缩小图片宽高

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

通过dbi使用perl连接mysql数据库的方法

2014/04/16 PHP

PHP多态代码实例

2015/06/26 PHP

基于Laravel 多个中间件的执行顺序详解

2019/10/21 PHP

Tinymce+jQuery.Validation使用产生的BUG

2010/03/29 Javascript

js对象数组按属性快速排序

2011/01/31 Javascript

JS 去前后空格大全(IE9亲测)

2013/07/15 Javascript

JS替换文本域内的回车示例

2014/02/18 Javascript

为jquery的ajaxfileupload增加附加参数的方法

2014/03/04 Javascript

javascript使用正则获取url上的某个参数

2014/09/04 Javascript

jQuery oLoader实现的加载图片和页面效果

2015/03/14 Javascript

jQuery移动web开发中的页面初始化与加载事件

2015/12/03 Javascript

多种js图片预加载实现方式分享

2016/02/19 Javascript

node.js版本管理工具n无效的原理和解决方法

2016/11/24 Javascript

Angular X中使用ngrx的方法详解（附源码）

2017/07/10 Javascript

利用vue.js实现被选中状态的改变方法

2018/02/08 Javascript

微信小程序按钮去除边框线分享页面功能

2018/08/27 Javascript

解决Vue 项目打包后favicon无法正常显示的问题

2018/09/01 Javascript

express express-session的使用小结

2018/12/12 Javascript

JS实现求5的阶乘示例

2019/01/21 Javascript

[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17

2018/08/20 DOTA

[10:05]DOTA2-DPC中国联赛正赛 iG vs PSG.LGD 选手采访

2021/03/11 DOTA

Python中实现远程调用（RPC、RMI）简单例子

2014/04/28 Python

python将图片文件转换成base64编码的方法

2015/03/14 Python

详解python单例模式与metaclass

2016/01/15 Python

numpy matrix和array的乘和加实例

2018/06/28 Python

Python3实现对列表按元组指定列进行排序的方法分析

2018/12/22 Python

Python计算指定日期是今年的第几天(三种方法)

2020/03/26 Python

python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警

2021/01/30 Python

安全教育实施方案

2014/03/02 职场文书

公司合作意向书

2014/04/01 职场文书

大学新学期计划书

2014/04/28 职场文书

银行爱岗敬业演讲稿

2014/05/05 职场文书

诉讼授权委托书

2014/10/15 职场文书

公司周年庆典致辞

2015/07/30 职场文书

2016年教师节慰问信

2015/12/01 职场文书

JS的深浅复制详细

2021/10/16 Javascript