本章将讲解Bootstrap缩略图，大多数站点都需要要在网格中布局图像，视频，文本。Bootstrap通过缩略图为此提供了一些简便的方法，使用Bootstrap创建缩略图的步骤如下：

1、在图像的周围添加带class.thumbnail类的<a>标签。

2、这会添加四个像素的内边距和一个灰色的边框。

3、当鼠标悬停在图像上时，会动画显示出图像的轮廓。

实例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap历练实例：默认的缩略图</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:20px;text-align:center">
<div class="row">
<div class="col-sm-6 col-md-3">
<a class="thumbnail"><img src="Images/HTML5LOGO.jpg" alt="通用的占位符缩略图" /></a>
</div>
<div class="col-sm-6 col-md-3">
<a class="thumbnail"><img src="Images/HTML5LOGO.jpg" alt="通用的占位符缩略图" /></a>
</div>
<div class="col-sm-6 col-md-3">
<a class="thumbnail"><img src="Images/HTML5LOGO.jpg" alt="通用的占位符缩略图" /></a>
</div>
</div>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：默认的缩略图的更多相关文章

  1. Bootstrap历练实例：默认的媒体对象

    Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...

  2. Bootstrap历练实例：默认的列表组

    Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...

  3. Bootstrap历练实例：默认的面板(Panels)

    Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素 ...

  4. Bootstrap历练实例：默认的Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  5. Bootstrap历练实例：默认的进度条

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Bootstrap历练实例：禁用的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  7. Bootstrap历练实例：点击激活的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  8. Bootstrap历练实例：表单控件大小

    表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><hea ...

  9. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. 设计模式-命令模式(Command)

    关注公众号 JavaStorm 获取更多成长. 大约需要6分钟读完.建议收藏后阅读. 命令模式把一个请求或者操作封装到一个对象中.命令模式允许系统使用不同的请求把客户端参数化,对请求排队或者记录请求日 ...

  2. 关于java多线程任务执行时共享资源加锁的方式思考

    1.加锁方式: 1-1.使用synchronized关键字进行方法或代码块的加锁方式 1-2.使用ReentrantLock类提供的lock()方法的方式 2.代码实现(传统的银行取款存款问题): 2 ...

  3. XHR的跨域请求和JSONP详解

    首先:什么是跨域? Cross Domain Request:从一个资源请求另一个资源,二者所在的请求地址不同,域名不同.端口号不同.请求协议不同. 它是由浏览器的同源策略造成的,是浏览器对JavaS ...

  4. PHP EXCEL相关

    这次的需求是在二次扫描的EXCEL报表中加入一列扫描时间. 扫描的时间之前已经写进日志里了,这次要做的就是把时间读取出来然后作为一列插入报表.其实日志也已经读出来了,要做的就是插入.但插入还是碰到不少 ...

  5. MiniProfiler NET Core

    MiniProfiler 来分析 ASP.NET Core 应用 它会把结果直接放在页面的左下角,随时可以点击查看:这样的话就可以感知出你的程序运行的怎么样:同时这也意味着,在你开发新功能的同时,可以 ...

  6. 四则运算二（java web)

    最近我和我的小伙伴yaoyali结成对子,共同写网页版的四则运算.虽然现在还没弄好,但是比起上次用纯java写的四则运算有了很大改进. 一.存放四则运算题目和答案的类 package com.jaov ...

  7. Spring Boot Security配置教程

    1.简介 在本文中,我们将了解Spring Boot对spring Security的支持. 简而言之,我们将专注于默认Security配置以及如何在需要时禁用或自定义它. 2.默认Security设 ...

  8. 洛谷P1965 转圈游戏

    https://www.luogu.org/problem/show?pid=1965 快速幂 #include<iostream> #include<cstdio> #inc ...

  9. 微信小程序干货

    1.获取text文本框输入的信息 wxml代码 <view class="weui-cells"> <view class="weui-cell weu ...

  10. VS2010/OpenGL配置

    1.下载glut:http://www.opengl.org/resources/libraries/glut/glutdlls37beta.zip 2.把解压得到的glut.h放到"C:\ ...