bootStrap小结1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h元素、p元素、table元素、img元素、其它</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<script src="js/bootstrap.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/jquery-2.0.3.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body style="background-color: gray;">
<div class="container-fluid" style="background-color: white">
<span class="label" style="cursor: default">状态</span>
<span class="label label-info" style="cursor: default">状态</span>
<span class="label label-danger" style="cursor: default">状态</span>
<span class="label label-default" style="cursor: default">状态</span>
<span class="label label-primary" style="cursor: default">状态</span>
<span class="label label-warning" style="cursor: default">状态</span>
<span class="label label-success" style="cursor: default">状态</span>
<br/>
<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
data-content="我要的内容" title="我要的标题">hover</span>
<br/>
<ol class="breadcrumb">
<li><a href="#">国家</a></li>
<li><a href="#">省份</a></li>
<li><a href="#">城市</a></li>
</ol>
<h1 class="page-header">内容</h1>
<h2 class="page-header">内容</h2>
<h3 class="page-header">内容</h3>
<h4 class="page-header">内容</h4>
<h5 class="page-header">内容</h5>
<h6 class="page-header">内容</h6>
<h6 class="page-header text-center">内容</h6>
<h6 class="page-header text-right">内容</h6>
<h6 class="page-header text-left">内容</h6>
<p>
众里寻他千百度，那人却在灯火阑珊处<br/>
<del>众里寻他千百度，那人却在灯火阑珊处</del>
<br/>
<small>众里寻他千百度，那人却在灯火阑珊处</small>
<br/>
<big>众里寻他千百度，那人却在灯火阑珊处</big><br/>
<em>众里寻他千百度，那人却在灯火阑珊处</em><br/>
<strike>众里寻他千百度，那人却在灯火阑珊处</strike><br/>
</p>
<p>God is Love And Jesus is the son </p>
<p class="text-lowercase">God is Love And Jesus is the son</p>
<p class="text-uppercase">God is Love And Jesus is the son</p>
<p class="text-capitalize">God is Love And Jesus is the son</p>
<p>天长地久有时尽，此恨绵绵无绝期</p>
<p class="text-muted">天长地久有时尽，此恨绵绵无绝期</p>
<p class="text-info">天长地久有时尽，此恨绵绵无绝期</p>
<p class="text-primary">天长地久有时尽，此恨绵绵无绝期</p>
<p class="text-success">天长地久有时尽，此恨绵绵无绝期</p>
<p class="text-warning">天长地久有时尽，此恨绵绵无绝期</p>
<p class="text-danger">天长地久有时尽，此恨绵绵无绝期</p>
<p>出师未捷身先死，长使英雄泪满襟</p>
<p class="bg-primary">出师未捷身先死，长使英雄泪满襟</p>
<p class="bg-success">出师未捷身先死，长使英雄泪满襟</p>
<p class="bg-info">出师未捷身先死，长使英雄泪满襟</p>
<p class="bg-warning">出师未捷身先死，长使英雄泪满襟</p>
<p class="bg-danger">出师未捷身先死，长使英雄泪满襟</p>
<p>山重水复疑无路，柳暗花明又一村</p>
<p class="text-primary bg-primary">山重水复疑无路，柳暗花明又一村</p>
<ul class="list-unstyled list-inline">
<li>曹孟德</li>
<li>刘玄德</li>
<li>孙权</li>
<li>袁绍</li>
</ul>
<dl class="dl-horizontal">
<dt>张角</dt>
<dd>董卓</dd>
</dl>
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped table-condensed">
<thead>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>非常的长长长长长长长长长长长长长长长长长长长长长长长长长长长长</th>
<th>111</th>
<th>111</th>
<th>111</th>
<th>111</th>
</thead>
<tbody>
<tr class="active">
<td>某某</td>
<td>男</td>
<td>28</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr class="success">
<td>某某</td>
<td>女</td>
<td>63</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr class="info">
<td>某某</td>
<td>男</td>
<td>64</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr class="warning">
<td>某某</td>
<td>男</td>
<td>64</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr class="danger">
<td>某某</td>
<td>男</td>
<td>64</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>某某</td>
<td>男</td>
<td>64</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
</table>
</div>
<img src="fig.jpg" class="img-responsive img-circle"/>
<img src="fig.jpg" class="img-responsive img-rounded"/>
<img src="fig.jpg" class="img-responsive img-thumbnail"/>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$('[data-rel=popover]').popover({container: 'body'});
Init();
});
function Init() {
}
</script>
</html>
bootStrap小结1的更多相关文章
- Bootstrap 小结
Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本 Bootstrap组成:1. ...
- bootstrap小结
bootstrap总结 bootstrap总结 base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级 ...
- bootStrap小结3
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- bootStrap小结2
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- Node.js + Express 构建的订餐系统
Node.js的版本 - v0.8.12 Express的版本 – v3.3.3 (安装 $ npm install -g express) 系统的登录逻辑是:获取用户名 + 密码,向内网RTX服务 ...
- 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结
关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...
- Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
- bootstrap与Select2使用小结
这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...
随机推荐
- 使用wangEditor富文本编辑器
客户端配置说明 下载 百度网盘地址:点我下载 下载密码:x09x 使用 首先要引入wangEditor的js文件,然后引入jQuery 然后在body里: <body> <butto ...
- PyCharm怎样添加Qt designer
cmd命令检查是否安装一下工具包 不存在,用pip 命令安装 添加环境变量; QT_QPA_PLATFORM_PLUGIN_PATH ---D:\VNConda\Lib\site-package ...
- oracle之分层查询
ORACLE分层查询start with&connect by 分层查询是select 语句的扩展,目的是迅速找出表中列-列的隶属关系. 19.1 树的遍历 ORACLE是一个关系数据库管理系 ...
- 性能之qps，并发数，相应时间
QPS:每秒处理的请求数.QPS = 并发数/请求平均处理时间. 请求响应时间＝请求等待时间+网络时间+请求处理时间.假设请求处理时间不受影响,持续不变,实际请求数大于QPS,会影响请求响应时间,大量 ...
- Java Web学习（二）数据加密
一.Tomcat 体系 首先通过一幅图来了解下tomcat的运行体系: Tomcat服务器的启动是基于一个server.xml文件的. 启动流程: 首先启动一个Server,Server里面就会启动S ...
- Azure Storage 系列（六）使用Azure Queue Storage
一,引言 在之前介绍到 Azure Storage 第一篇文章中就有介绍到 Azure Storage 是 Azure 上提供的一项存储服务,Azure 存储包括 对象.文件.磁盘.队列和表存储.这里 ...
- Mac 系统下如何显示和隐藏文件
苹果Mac OS X操作系统下,隐藏文件是否显示有很多种设置方法,最简单的要算在Mac终端输入命令.显示/隐藏Mac隐藏文件命令如下(注意其中的空格并且区分大小写): 第一种方式: 显示Mac隐藏文件 ...
- Spring AOP系列（一）— 代理模式
Spring AOP系列(一)- 代理模式 AOP(Aspect Oriented Programming)并没有创造或使用新的技术,其底层就是基于代理模式实现.因此我们先来学习一下代理模式. 基本概 ...
- 为 MaixPy 加入软 I2C 接口（移植 MicroPython 的 I2C）
起因 本文的重心为讲解如何为一款芯片移植和实现 micropython 的通用组件,但会顺带解释不同芯片的工作方式和特性. 国际惯例,先有起因,再谈问题的解决,所以记得上次总结的 关于 K210 Ma ...
- 票房和口碑称霸国庆档，用 Python 爬取猫眼评论区看看电影《我和我的家乡》到底有多牛
今年的国庆档电影市场的表现还是比较强势的,两名主力<我和我的家乡>和<姜子牙>起到了很好的带头作用. <姜子牙>首日破 2 亿,一举刷新由<哪吒之魔童降世&g ...