本章将讲解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. js中的原型以及原型链

    在js中原型是每个构造函数的属性: 这个算 js 核心概念的一部分 var f1 = new Foo(); 对象 f1 的构造函数就是 Foo , f1的原型 __proto__ 就指向构造函数 Fo ...

  2. MyBatis日志实现

    maven项目resources文件夹下log4j.properties 其作用是输出controller包下参与Mybatis的类的SQL语句输出.如果包名不一样,请根据自己的项目情况调整. # G ...

  3. Windows服务器初始配置

    系统状态是否良好 检查ip地址.子网掩码等配置 防火墙是否关闭 是否有攻击,有多大的攻击,什么类型的攻击,攻击流量图 是否中病毒 1.改端口 (1)打开注册表 [HKEY_LOCAL_MACHINE\ ...

  4. 洛谷P2136 拉近距离

    题目背景 我是源点,你是终点.我们之间有负权环. --小明 题目描述 在小明和小红的生活中,有\(N\)个关键的节点.有\(M\)个事件,记为一个三元组\((S_i,T_i,W_i)\),表示从节点\ ...

  5. thinkphp5.1静态文件存放问题

    5.1的版本不能将静态文件放在application目录下,只能放在public目录下,否则会拒绝访问

  6. Web 加入favicon

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

  7. JQuery扩展和事件

    一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉 ...

  8. 跟老男孩学Linx运维---web集群实战笔记

    2018/01/05 2018/01/04 安装:PHP扩展插件PDO_MYSQL-1.0.2报错 In file included from /home/wasadmin/PDO_MYSQL-1.0 ...

  9. Ubuntu 18.04 Python3.6.6导入wx模块报Gtk-Message : 17:06:05.797 :Failed to load module "canberra-gtk-module"

    解决办法: root@sishen:~# apt-get install libcanberra-gtk-module

  10. java lombok包在maven已经配置，但是注解没用

    如果你是用eclipse作为开发环境,配置了maven依赖以后,还需要在eclipse/myeclipse中手动安装lombok. 其实就是加一个jar包,添加2行代码 1. 将 lombok.jar ...