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 ...
随机推荐
- AMQP 概论
AMQP 是应用层协议的一个开放标准,为面向消息的中间件设计.基于此协议的客户端与消息中间件可传递消息,并不受客户端/中间件不同产品,不同的开发语言等条件的限制.目标是实现一种在全行业广泛使用的标准消 ...
- 高可用服务之Keepalived邮件通知配置
上一篇博客我们了解了keepalived的架构以及安装.VIP的配置和高可用相关配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13634755.html: ...
- [LeetCode]78. 子集(位运算；回溯法待做)
题目 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3] 输出: [ [3], [1], ...
- [剑指Offer]18-题目一：删除链表的节点 题目二：删除链表中重复节点
题目一 题目 O(1)时间复杂度删除给定链表节点. 题解 用待删除节点后一个节点的值覆盖待删除节点值,更新链接关系. 注意链表只有一个节点:删除尾结点:删除头节点的处理. 代码 class ListN ...
- [HDU2553]N皇后问题(DFS)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2553 题意 n<=10,输出N皇后问题的方法数. 题解 可以使用各种方法.这里使用DFS. 使用 ...
- EasyCode插件使用及模板参考
EasyCode插件使用及模板参考 1.介绍安装 Easycode是idea的一个插件,可以直接对数据的表生成entity.controller.service.dao.mapper无需任何编码,简单 ...
- jpeg软解码实现介绍
我的月经贴博客该更新了!!!已经有许多博文需要补了! 去年开始的jpeg解码项目,中间停止更新了大半年时间,上个月想起这事还没完工,就又做了更多兼容性和性能上的改进,目前终于接近尾声了.有需要参考的可 ...
- dbdeployer MySQL沙盒部署详解
一.工具介绍 前几日用mysql-sandbox来搭建MySQL8.0新版本时发现用不了,提示需要使用dbdeployer才行,瞬间觉得mysql-sandbox不香了,只好咬咬牙来熟悉dbdeplo ...
- WPF DataGrid 复合表头 （实现表头合并，自定义表头）
功能说明: 将 DataGrid嵌套在本控件内,使用Label自定义表头,如果需要上下左右滚动 需要在控件外围添加 ScrollViewer 并且设置 ScrollVisibility 为Auto ...
- Python-全局解释器锁GIL原理和多线程产生原因与原理-多线程通信机制
GIL 全局解释器锁,这个锁是个粗粒度的锁,解释器层面上的锁,为了保证线程安全,同一时刻只允许一个线程执行,但这个锁并不能保存线程安全,因为GIL会释放掉的并且切换到另外一个线程上,不会完全占用,依据 ...