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 ...
随机推荐
- leetcode刷题-59螺旋矩阵2
题目 给定一个正整数 n,生成一个包含 1 到 n^2 所有元素,且元素按顺时针顺序螺旋排列的正方形矩阵. 思路 与螺旋矩阵题完全一致 实现 class Solution: def generateM ...
- linux基础：控制台
图形界面切换至命令行界面:ctrl+alt+F1~F6 命令行界面切换至图形界面:startx linux一共有7个运行级别,可查看/etc/inittab文件: 0:停机(记住不要把initdefa ...
- ajax之---上传图片和预览
views.py def upload_img(request): nid=str(uuid.uuid4()) ret={'status':True,'data':None,'message':Non ...
- USB URB的status及其代表的意义
USB URB的status及其代表的意义 平时在处理客户问题时,经常需要分析出现问题时抓取的usbmon log,这个log中有一个字段非常重要:URB Status word,这个字段就是stru ...
- [LeetCode]Sql系列2
题目 1205. 每月交易II Transactions 记录表 +----------------+---------+ | Column Name | Type | +-------------- ...
- [Binder深入学习一]Binder驱动——基础数据结构
具体代码路径: kernel/drivers/staging/android/binder.c kernel/drivers/staging/android/binder.h /* * binder_ ...
- Mybatis注解开发案例（入门）
1.创建maven工程,配置pom.xml 文件. 2.创建实体类 3.创建dao接口 4.创建主配置文件SqlMapConfig.xml 5.在SqlMapConfig.xml中导入外部配置文件jd ...
- Alibaba内部SpringCloud参考笔记，在GitHub一天就标星81.6k？
前言 阿里巴巴,作为国内互联网公司的Top,算是业界的标杆,有阿里背景的程序员,也更具有权威性.作为程序员,都清楚阿里对于员工要求有多高,技术人员掌握的技术水平更是望尘莫及.所以,大厂程序员的很多经验 ...
- nioServerChannel的的状态
转载自https://blog.csdn.net/zxhoo/article/details/17964353 Channel继承层次图分析上面提到的三个状态的时候,会去看Channel继承层次里某些 ...
- 确成硅化+恒力+苏大文正节点2 oracle ora-4030 错误pga version:11204
Errors in file /u01/app/oracle/oracle/diag/rdbms/orcl/orcl/trace/orcl_j000_61543.trc (incident=18009 ...