编程 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 中DOM 操作详解

Jan 13 Javascript

Javascript基础知识盲点总结之函数

May 15 Javascript

JS开发中百度地图+城市联动实现实时触发查询地址功能

Apr 13 Javascript

vue轮播图插件vue-awesome-swiper的使用代码实例

Jul 10 Javascript

laypage.js分页插件使用方法详解

Jul 27 Javascript

微信小程序 scroll-view 水平滚动实现过程解析

Oct 12 Javascript

js实现旋转的星空效果

Nov 01 Javascript

JS通用方法触发点击事件代码实例

Feb 17 Javascript

微信小程序 bindtap 传参的实例代码

Feb 21 Javascript

vue组件开发之tab切换组件使用详解

Aug 21 Javascript

jquery实现广告上下滚动效果

Mar 04 jQuery

vue如何批量引入组件、注册和使用详解

May 12 Vue.js

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模板技术原理【一】

2008/01/10 PHP

php使用Smarty的相关注意事项及访问变量的几种方式

2011/12/08 PHP

基于laravel belongsTo使用详解

2019/10/18 PHP

PHP cookie与session会话基本用法实例分析

2019/11/18 PHP

js的event详解。

2006/09/06 Javascript

JavaScript Array扩展实现代码

2009/10/14 Javascript

javascript:;与javascript:void(0)使用介绍

2013/06/05 Javascript

解析js中获得父窗口链接getParent方法以及各种打开窗口的方法

2013/06/19 Javascript

Javascript拓展String方法小结

2013/07/08 Javascript

jquery弹出框的用法示例(2)

2013/08/26 Javascript

js单例模式的两种方案

2013/10/22 Javascript

浅谈angularJS中的事件

2016/07/12 Javascript

Angular和百度地图的结合实例代码

2016/10/19 Javascript

原生的强大DOM选择器querySelector介绍

2016/12/21 Javascript

AngularJS实现网站换肤实例

2021/02/19 Javascript

node.js与C语言实现遍历文件夹下最大的文件，并输出路径，大小

2017/01/20 Javascript

webpack配置之后端渲染详解

2017/10/26 Javascript

使用vue如何构建一个自动建站项目

2018/02/05 Javascript

nodejs取得当前执行路径的方法

2018/05/13 NodeJs

解决vue-router 二级导航默认选中某一选项的问题

2019/11/01 Javascript

浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

2020/07/24 Javascript

基于python的itchat库实现微信聊天机器人(推荐)

2019/10/29 Python

解决Numpy中sum函数求和结果维度的问题

2019/12/06 Python

Python大批量搜索引擎图像爬虫工具详解

2020/11/16 Python

HTML5页面中尝试调起APP功能

2017/09/12 HTML / CSS

西班牙创意礼品和小工具网上商店：Curiosite

2016/07/26 全球购物

zooplus意大利：在线宠物商店

2019/08/07 全球购物

ECHT官方网站：男女健身服

2020/02/14 全球购物

俄罗斯在线服装店：STOLNIK

2021/03/07 全球购物

日本最大的购物网站：日本乐天市场（Rakuten Ichiba）

2020/11/04 全球购物

晨会主持词

2014/03/17 职场文书

读书活动总结

2014/04/28 职场文书

经济贸易专业自荐信

2014/06/11 职场文书

高中班主任评语

2014/12/30 职场文书

介绍信的格式

2015/01/30 职场文书

迎新晚会主持词开场白

2015/05/28 职场文书