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 ...
随机推荐
- i春秋公益赛之signin
题目链接:https://buuoj.cn/challenges#gyctf_2020_signin 查看程序保护 只开了canary和NX保护,在IDA查看反编译出来的为代码时发现程序给了一个后门 ...
- SpringCloud-config分布式配置
为什么要统一管理微服务配置? 随着微服务不断的增多,每个微服务都有自己对应的配置文件.在研发过程中有测试环境.UAT环境.生产环境,因此每个微服务又对应至少三个不同环境的配置文件.这么多的配置文件,如 ...
- 单元测试unittest（基于数据驱动的框架：unittest+HTMLTestRunner/BeautifulReport+yaml+ddt）
一.定义 unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果 ...
- 认证授权：IdentityServer4 - 各种授权模式应用
前言: 前面介绍了IdentityServer4 的简单应用,本篇将继续讲解IdentityServer4 的各种授权模式使用示例 授权模式: 环境准备 a)调整项目结构如下: b)调整cz.Id ...
- [LeetCode]Mysql系列5
题目1 1112. 每位学生的最高成绩 编写一个 SQL 查询,查询每位学生获得的最高成绩和它所对应的科目,若科目成绩并列,取 course_id 最小的一门.查询结果需按 student_id 增序 ...
- python里面的project、package、module分别是什么
2020/5/25 1.project(项目) project 即项目,是一个很大的文件夹,里面有好多的 .py 文件. 在Spyder 中点击菜单栏 projects -----> new ...
- 学习 | jQuery移动端页面组件化开发(一)
最近在学习移动端组件化开发web页面,其中有好多小细节,值的去思考. 主要介绍JS的思路,具体的代码就不贴了,主要是想表达出一种思路 总体来说 1.入口文件,在入口文件中导入插件,插件样式,jquer ...
- 数据库：drop、truncate、delete的区别
近日在删除数据时,发现除了常用的Delete & Drop语句之外,还有Truncate也是与删除数据相关的,针对上述三种有进行简单的比较与整理 用法 drop 用法:drop table 表 ...
- JDK8在windows系统下安装
一.下载 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html#JDK8 目前大部分公司内部使用的还是jdk ...
- vue中配置axios.js文件，发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...