本章将讲解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. Python简易购物车程序

    2019年5月24日,是我离开北京回学校的日子.我退了组的房子,辞了工作,带着对小秋香不舍回家,这匆匆一别,不知何时才是归期. 这几天都疏于学习,因为每一天我都会和她找点有意思的事情来做,如果这一别就 ...

  2. java基础第十二篇之集合、增强for循环、迭代器和泛型

    Collection接口中的常用方法: * 所有的子类子接口都是具有的 * 集合的方法:增删改查 * * public boolean add(E e);//添加元素 返回值表示是否添加成功 * pu ...

  3. [LOJ 2190] 「SHOI2014」信号增幅仪

    [LOJ 2190] 「SHOI2014」信号增幅仪 链接 链接 题解 坐标系直到 \(x\) 轴与椭圆长轴平行 点的坐标变换用旋转公式就可以了 因为是椭圆,所以所有点横坐标除以 \(p\) 然后最小 ...

  4. Hive进阶_汇总

    =========================================================================== 第2章 Hive数据的导入 使用Load语句执行 ...

  5. Jexus 5.8.2

    Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持   Jexus 是一款运行于 Linux 平台,以支持  ASP.NET.PHP 为特色的集高安全性和高性能为一体的 ...

  6. DNS学习

    DNS (Domain Name System 的缩写)域名系统,万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串.通过域名 ...

  7. C#实现程序单例日志输出

    对于一个完整的程序系统,一个日志记录是必不可少的.可以用它来记录程序在运行过程中的运行状态和报错信息.比如,那些不想通过弹框提示的错误,程序执行过程中捕获的异常等. 首先,在你的解决方案中,适当的目录 ...

  8. paas相关，添加ing

    1. docker 构建镜像,docker build -t image_name:version dockerfilePath.使用镜像启动一个docker容器,docker run --name ...

  9. c#线程倒计时器源码

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  10. 终于有人把P2P、P2C、O2O、B2C、B2B、C2C的区别讲透了！还有许多其它类别的类型分享

    平时在看招聘时,经常看到我们是什么B2C电子商务网站,但是一直不知是啥意思,今天在WEB开发者上面看到这篇文章,就是知道了个所以然,以记录分享. P2P.P2C .O2O .B2C.B2B. C2C, ...