本章将讲解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. 51nod1287(二分/线段树区间最值&单点更新)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1287 题意:中文题诶- 解法1:b[i] 存储 max(a[0 ...

  2. 2017 Fzu校赛 [Cloned]

    A - Salty Fish 海边躺着一排咸鱼,一些有梦想的咸鱼成功翻身(然而没有什么卵用),一些则是继续当咸鱼.一个善良的渔夫想要帮这些咸鱼翻身,但是渔夫比较懒,所以只会从某只咸鱼开始,往一个方向, ...

  3. c语言的小问题

    在c语言编程中要注意一个小问题,如果你编写scanf("%d",&n);printf("%d",n)这个你输入几就输出几,毫无疑问.但是现在问题来了?如 ...

  4. [Xcode 实际操作]六、媒体与动画-(5)使用CoreImage框架给图片添加马赛克效果

    目录:[Swift]Xcode实际操作 本文将演示如何使用CoreImage图像处理框架,给图片添加像素化的滤镜效果. 在项目导航区,打开视图控制器的代码文件[ViewController.swift ...

  5. Docker安装nginx以及负载均衡

    首先在linux系统中新建一个data文件夹进行nginx容器的创建--即为:mkdir data. 一:第一次 1 第一步: 使用 docker pull nginx将nginx的镜像从仓库下载下来 ...

  6. Web 加入favicon

    一.点击    制作自己的favicon图标; 二.在网页head中加入: <link rel="shortcut icon" href="favicon.ico& ...

  7. 集合之ArrayList,HashSet,HashMap

    结合框架的体系结构: 一.List(列表) 1. List的特点 (1)List是元素有序并且可以重复的集合,称为序列 (2)List可以精确的控制每个元素的插入位置,或删除某个位置的元素 (3)Li ...

  8. Codeforces 1175E（倍增）

    要点 与cf 1168C相似的一点都是看某点x最远能拓展到哪里 看数据想要在logn内查询,考虑倍增步数 const int maxn = 2e5 + 5, X = 5e5 + 5, LOG = 25 ...

  9. svn安装到myeclipse 和客户端安装

    https://jingyan.baidu.com/article/eae07827a977b61fed548572.html

  10. 1137 - Sin your life sin公式 + 枚举

    http://www.ifrog.cc/acm/problem/1137 和差化积公式, 变成2 * sin((x + y) / 2) * cos((x - y) / 2) + sin(n - (x ...