Bootstrap 缩略图
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></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">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="Images/HTML5LOGO.jpg" alt="通用占位符缩略图" />
</div>
<div class="caption">
<h2>缩略图标签</h2>
<p>一些示例文本，一些示例文本</p>
<p><a href="#" class="btn btn-default">按钮</a><a href="#"class="btn btn-primary">按钮</a></p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="Images/HTML5LOGO.jpg" alt="通用占位符缩略图" />
</div>
<div class="caption">
<h2>缩略图标签</h2>
<p>一些示例文本，一些示例文本</p>
<p><a href="#" class="btn btn-default">按钮</a><a href="#"class="btn btn-success">按钮</a></p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="Images/HTML5LOGO.jpg" alt="通用占位符缩略图" />
</div>
<div class="caption">
<h2>缩略图标签</h2>
<p>一些示例文本，一些示例文本</p>
<p><a href="#" class="btn btn-default"role="button">按钮</a><a href="#"class="btn btn-warning">按钮</a></p>
</div>
</div>
<div>
</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 缩略图的更多相关文章
- Bootstrap<基础二十四> 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
- Bootstrap <基础二十九>面板（Panels）
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap <基础二十五>警告（Alerts）
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
- Bootstrap<基础二十> 标签
Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
随机推荐
- 区块链：基于Hyperledger Fabric的 java 客户端开发（java sdk /java api server/java event server）
fabric针对java 开发的部分支持不是很友好.基于目前较为稳定的fabric 1.4版本,我们封装了一个java sdk,apiserver,eventServer 封装java sdk的主要目 ...
- mybatis pageHelper 分页插件使用
转载大神 https://blog.csdn.net/qq_33624284/article/details/72828977 把插件jar包导入项目(具体上篇有介绍http://blog.csdn. ...
- Net Core2.0下使用Dapper
Net Core2.0下使用Dapper 今天成功把.Net Framework下使用Dapper进行封装的ORM成功迁移到.Net Core 2.0上,在迁移的过程中也遇到一些很有意思的问题,值得和 ...
- java exception "file not found or file not exist"
出现这种异常一般有两种原因,第一种就是文件真的不存在:第二种是权限问题,权限问题又分为文件本身的权限和包含它的文件夹的权限 比如 ~/aaa/bbb/ccc/ddd/eee.txt 只要 aaa , ...
- Jenkins+Gitlab+Ansible自动化部署(一)
首先准备实验环境 虚拟机 主机名 IP地址 服务 系统版本 内核版本 Vmware Workstation 14 gitlab.example.com 192.168.244.130 gitlab ...
- Centos7.2内网环境安装MySQL5.7.24
1.配置本地yum源 内网环境,首先需要配置本地yum源,以解决MySQL的依赖安装,具体参考该文:点击打开 2.查看服务器环境 uname -a 3.去官网下载MySQL安装包 MySQL官网网址: ...
- JavaScript中登录名的正则表达式及解析(0基础)
简言 在JavaScript中,经常会用到正则表达式来进行模式匹配.例如,登录名验证,密码强度验证,字符串查找或替换等操作.现在就开始吧,零基础写出你的第一个正则表达式! 在做用户注册时,都会用到登录 ...
- java 使用uuid生成唯一字符串
UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.按照开放软件基金会(OSF)制定的标准计算, ...
- webm视频转换 其他视频格式转换为webm格式
将其他视频格式转换为webm格式 https://files.cnblogs.com/files/bubuchu/html5videoshipingeshizhuanhuanqi.zip
- 浅窥ArcGIS Data Store之两斑
关于 ArcGIS Data Store,我们备受大家喜爱的suwenjiang朋友在其博客空间suwenjiang的烂笔头中贡献了<ArcGIS Data Store初体验>一文,全面讲 ...