本章将讲解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. php 判断手机号运营商

    /* 移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.152.155.156.185.186 电信: ...

  2. 2017-9-12 NOIP模拟赛[hkd]

    NOIP 2017 全假模拟冲刺 T1 Spfa 题目描述B 国在耗资百亿元之后终于研究出了新式武器——连环阵(Zenith ProtectedLinked Hybrid Zone).传说中,连环阵是 ...

  3. duliu——思维+线段树

    题目 [题目描述]小 `D` 喜欢出毒瘤题毒人.当然,他的毒瘤更多体现在若干个难题组合在同一场比赛时.小 `D` 脑中有 $n$ 个毒瘤题 idea,第 $i$ 个的毒值为$d_i$.当第 $i$ 个 ...

  4. Node.js 第三方包的安装、升级、卸载，以及包依赖管理

    本地安装: npm install package-name 全局全装: npm install -g  package-name 举个栗子 全局安装 React项目的脚手架 npm install ...

  5. JAVAFX-2 开发应用

    理解javafx 架构 ● 场景图(Scene Graph) ● JavaFX功能的公开API(Java Public APIs for JavaFX Features) ● 图形系统(Graphic ...

  6. Python模块之 sys

    # sys模块是与python解释器交互的一个接口 import sys print(sys.argv) # 命令行参数list,第一个元素是程序本身路径 # (第一个元素就是执行文件的时候,写在py ...

  7. BZOJ 4236: JOIOJI map瞎搞

    分别记录J,O,I,的个数 cnt[char][i] 表示处理到第i位,char的个数 显然当且仅当 cnt[J][i] - cnt[O][i] == cnt[J][j-1] - cnt[O][j-1 ...

  8. 补充:jQuery的ajax

    一.jQuery的ajax 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJA ...

  9. Win10专业版系统下添加其他国家语言

    Win10专业版系统下如何添加其他国家语言?国内的win10专业版系统默认情况下是安装简体中文,但是有的用户出于工作原因需要使用其它字体.比如外国友人就需要使用英语,西班牙等.其实win10专业版是支 ...

  10. IIS中的 Asp.Net Core 和 dotnet watch

    在基于传统的.NET Framework的Asp.Net Mvc的时候,本地开发环境中可以在IIS中建立一个站点,可以直接把站点的目录指向asp.net mvc的项目的根目录.然后build一下就可以 ...