Bootstrap缩略图的创建方法

Bootstrap 创建缩略图的步骤如下：

1、在图像周围添加带有 class .thumbnail 的 <a> 标签.
2、这会添加四个像素的内边距（padding）和一个灰色的边框。

有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
1、把带有  class .thumbnail 的 <a> 标签改为 <div>。
2、在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。

html代码

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 页面标题（Page Header）</title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
 <style>
  h2{
  color: #080808;
  font-weight:900;
  text-shadow:1px 1px 0px #AD55C9;
  }
  p{
  color: #6A031A;
  size: 24px;
  }
 </style>
</head> 

<body>
<div class="row">
 <div class="col-sm-6 col-md-3">
  <div class="thumbnail"><img src="img/2.jpg"></div>
  <div class="caption">
   <h2>漂亮的图片</h2>
   <p>漂亮的图片.漂亮的图片.</p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" role="button">点你 </a>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default" role="button">就点你 </a>
   </p>
  </div>
 </div> 

 <div class="col-sm-6 col-md-3">
  <div class="thumbnail"><img src="img/2.jpg"></div>
  <div class="caption">
   <h2>漂亮的图片</h2>
   <p>漂亮的图片.漂亮的图片.</p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" role="button">点你 </a>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default" role="button">就点你 </a>
   </p>
  </div>
 </div>
 <div class="col-sm-6 col-md-3">
  <div class="thumbnail"><img src="img/2.jpg"></div>
  <div class="caption">
   <h2>漂亮的图片</h2>
   <p>漂亮的图片.漂亮的图片.</p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" role="button">点你 </a>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default" role="button">就点你 </a>
   </p>
  </div>
 </div>
 <div class="col-sm-6 col-md-3">
  <div class="thumbnail"><img src="img/2.jpg"></div>
  <div class="caption">
   <h2>漂亮的图片</h2>
   <p>漂亮的图片.漂亮的图片.</p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" role="button">点你 </a>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default" role="button">就点你 </a>
   </p>
  </div>
 </div>
 <div class="col-sm-6 col-md-3">
  <div class="thumbnail"><img src="img/2.jpg"></div>
  <div class="caption">
   <h2>漂亮的图片</h2>
   <p>漂亮的图片.漂亮的图片.</p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" role="button">点你 </a>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default" role="button">就点你 </a>
   </p>
  </div>
 </div><div class="col-sm-6 col-md-3">
  <div class="thumbnail"><img src="img/2.jpg"></div>
  <div class="caption">
   <h2>漂亮的图片</h2>
   <p>漂亮的图片.漂亮的图片.</p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" role="button">点你 </a>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default" role="button">就点你 </a>
   </p>
  </div>
 </div><div class="col-sm-6 col-md-3">
  <div class="thumbnail"><img src="img/2.jpg"></div>
  <div class="caption">
   <h2>漂亮的图片</h2>
   <p>漂亮的图片.漂亮的图片.</p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" role="button">点你 </a>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default" role="button">就点你 </a>
   </p>
  </div>
 </div><div class="col-sm-6 col-md-3">
  <div class="thumbnail"><img src="img/2.jpg"></div>
  <div class="caption">
   <h2>漂亮的图片</h2>
   <p>漂亮的图片.漂亮的图片.</p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" role="button">点你 </a>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default" role="button">就点你 </a>
   </p>
  </div>
 </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
 </body>
</html>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap每天必学之缩略图与警示窗

    Bootstrap每天必学之缩略图与警示窗

    1.缩略图 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过"thumbnail"样式配合bootstrap的网格系统来实现.可以将产品列表页变得更好看. 源码文件: ☑ LESS版本:对应文件thumbnails.less ☑ Sass版本:对应文件_thumbnails.scss ☑ 编译后版本:bootstrap.css文件第4402行-第4426行 使用方法:

  • Bootstrap源码解读标签、徽章、缩略图和警示框（8）

    标签 标签组件通常用来做一些高亮显示用以提醒.使用".label"样式来实现,可以使用span这样的行内标签,例如:<span class="label">标签</span> 实现源码如下: .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align:

  • Bootstrap笔记之缩略图、警告框实例详解

    Bootstrap笔记之缩略图、警告框实例详解

     1. 基础缩略图 给a标签添加类class="thumbnail"如下: <div class="row"> <div class="col-md-3 col-sm-6"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow"

  • Bootstrap基本组件学习笔记之缩略图(13)

    Bootstrap基本组件学习笔记之缩略图(13)

    Bootstrap 通过缩略图为网站布局提供了一种简洁的解决方案. 直接看例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

  • 浅析Bootstrap缩略图组件与警示框组件

    浅析Bootstrap缩略图组件与警示框组件

    Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息. bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现.下面是bootstrap缩略图组件不同版本的源码文件: L

  • Bootstrap缩略图与警告框学习使用

    Bootstrap缩略图与警告框学习使用

    本文实例为大家分享了Bootstrap缩略图与警告框的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

  • Bootstrap缩略图的创建方法

    Bootstrap缩略图的创建方法

    Bootstrap 创建缩略图的步骤如下: 1.在图像周围添加带有 class .thumbnail 的 <a> 标签. 2.这会添加四个像素的内边距(padding)和一个灰色的边框. 有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题.段落或按钮.具体步骤如下: 1.把带有  class .thumbnail 的 <a> 标签改为 <div>. 2.在该 <div> 内,您可以添加任何您想要添加的东西.由于这是一个 <div&

  • JS组件Bootstrap导航条使用方法详解

    JS组件Bootstrap导航条使用方法详解

    导航条是在您的应用或网站中作为导航标头的响应式元组件. 1.默认的导航条 导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式 定制折叠模式与水平模式的阈值 根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值.通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求. 第一步: 最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条 <nav class="

  • Yii2中组件的注册与创建方法

    Yii2中组件的注册与创建方法

    今天本来打算研究一下yii2.0的AR模型的实现原理,然而,计划赶不上变化,突然就想先研究一下yii2.0的数据库组件创建的过程.通过对yii源码的学习,了解了yii组件注册与创建的过程,并发现原来yii组件注册之后并不是马上就去创建的,而是待到实际需要使用某个组件的时候再去创建对应的组件实例的.本文大概记录一下这个探索的过程. 要了解yii组件的注册与创建,当然要从yii入口文件index.php说起了,整个文件代码如下: <?php defined('YII_DEBUG') or defin

  • bootstrap treeview 扩展addNode方法动态添加子节点的方法

    bootstrap treeview 扩展addNode方法动态添加子节点的方法

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 本文只是详细说明对bootstrap-treeview添加子节点的扩展方法(addNode),如了解bootstrap-treeview所有用法请看官方API 官方api  https://www.npmjs.com/package/bootstrap-treeview 

  • jquery-mobile表单的创建方法详解

    本文实例讲述了jquery-mobile表单的创建方法.分享给大家供大家参考,具体如下: 一.注意事项 1. <form> 元素必须设置 method 和 action 属性 2. 每个表单元素必须设置唯一的 "id" 属性. 该 id 在站点的页面中必须是唯一的. 这是因为 jQuery Mobile 的单页面导航模型允许许多不同的"页面"同时呈现. 3. 每个表单元素必须有一个标记(label). 请设置 label 的 for 属性来匹配元素的 i

  • Mybatis 创建方法、全局配置教程详解

    总体介绍:MyBatis实际上是Ibatis3.0版本以后的持久化层框架[也就是和数据库打交道的框架]! 和数据库打交道的技术有: 原生的JDBC技术--->Spring的JdbcTemplate技术 这些工具都是提供简单的SQL语句的执行,但是和我们这里学的MyBatis框架还有些不同, 框架是一整套的东西,例如事务控制,查询缓存,字段映射等等. 我们用原生JDBC操作数据库的时候都会经过: 编写sql---->预编译---->设置参数----->执行sql------->

  • 详解iOS应用中自定义UIBarButtonItem导航按钮的创建方法

    详解iOS应用中自定义UIBarButtonItem导航按钮的创建方法

    iOS系统导航栏中有leftBarButtonItem和rightBarButtonItem,我们可以根据自己的需求来自定义这两个UIBarButtonItem. 四种创建方法 系统提供了四种创建的方法: 复制代码 代码如下: - (instancetype)initWithBarButtonSystemItem:(UIBarButtonSystemItem)systemItem target:(id)target action:(SEL)action; - (instancetype)init

  • LINUX下Oracle数据库用户创建方法详解

    本文实例分析了LINUX下Oracle数据库用户创建方法.分享给大家供大家参考,具体如下: 1)登录linux,以oracle用户登录(如果是root用户登录的,登录后用 su - oracle命令切换成oracle用户) 2)首先要打开监听器命令如下:lsnrctl start,然后sqlplus /nolog ,然后conn /as sysdba,然后startup(这一部分命令是用来打开oracle数据库) 3)查看我们常规将用户表空间放置的位置:执行如下sql: SQL> select

  • JavaScript中对象的不同创建方法

    javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascript中的对象是基于原型的. 1.1句点运算符创建 javascript中的对象实际上就是一个由属性组成的关联数组,属性由名称和值组成,值的类型可以是任何数据类型,或者函数和其他对象. 创建一个简单对象: var foo = {}; foo.prop_1 = 'bar'; foo.prop_2 =

  • PHP简单生成缩略图相册的方法

    本文实例讲述了PHP简单生成缩略图相册的方法.分享给大家供大家参考.具体如下: <?php /* * written by mot * 根目录下自己新建image thumb目录 * */ class thumb{ private $src; private $source; private $s_width; private $s_height; private $dest; private $d_height; private $d_width; private $name; public

随机推荐