本章将讲解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. 关于通过angularJs将页面中的html table 导出生成excel

    直接上代码: <button class="btn btn-link" ng-click="exportToExcel('#table1')"> & ...

  2. uva11584 Partitioning by Palindromes

    题目大意: 给出一个字符串,把他划分成尽量少的回文串,问最少的回文串个数 /* 先预处理所有回文子串 dp[i]表示字符1~i划分成的最小回文串的个数 */ #include<iostream& ...

  3. poj2241 The Tower of Babylon

    The Tower of Babylon 题意:给你n种石头,长x,宽y,高z,每种石头数目无限,一块石头能放到另一块上的条件是:长和宽严格小于下面的石头.问叠起来的最大高度. /* 有些类似“叠箱子 ...

  4. uoj#38. 【清华集训2014】奇数国（线段树+数论）

    传送门 不难看出就是要先求区间积,再求这个区间积的\(\varphi\) 因为\(\varphi(x)=x\times\frac{p_1-1}{p_1}\times\frac{p_2-1}{p_2}\ ...

  5. js实现页面的上滑下拉功能

    这两天做项目,用到了上滑和下拉的功能,主要是通过监听touchmove,touchstart,touchend三个事件去判断页面上滑状态还是下拉状态. 同时加一个知识点:有时在监听时会报错,这个错是这 ...

  6. nginx 反向代理配置 upstream

    最近项目要写后台,用nodejs写服务接口,然后研究了下nginx反向代理,各种坑下来,也总算把代理配了下来. 我本地用nodejs起了两个服务,一个端口是8888,一个端口是8889,在启动ngin ...

  7. 简述RadioGroup和RadioButton的使用

    简述RadioGroup和RadioButton的使用 在项目中有身份选择的选项,需要用到RadioGroup和RadioButton,这里做个记录,和大家交流一下. 话不多说,一起看代码 XML代码 ...

  8. mac搭建TensorFlow环境

    1.首先安装Anaconda,下载地址:https://www.anaconda.com/download/#macos,根据需要下载所需的版本. 2.安装TensorFlow,安装命令:pip in ...

  9. EOS帐户交易的构建命令

    EOS版本:4.0   系统:Ubuntu 16.04 LTS   1.创建两对密匙   cleos create key   Private key:5JeTwSwKfpVRHGLqysakTXfk ...

  10. 重构之Divergent Change（发散式变化）&Shotgun Surgery （散弹式修改）

    5.Divergent Change发散式变化 描述:一个类被锚定了多个变化,当这些变化中的任意一个发生时,就必须对类进行修改. 解释:一个类最好只因一种变化而被修改 操作:你应该找出某特定原因而造成 ...