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 ...
随机推荐
- 20190923-09Linux磁盘分区类 000 017
df 查看磁盘空间使用情况 df: disk free 空余硬盘 1．基本语法 df 选项 (功能描述:列出文件系统的整体磁盘使用量,检查文件系统的磁盘空间占用情况) 2．选项说明 表1-32 选项 ...
- 解决Maven的JDK版本问题
在pom文件中添加以下代码 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins&l ...
- IDEA中Javaweb项目图片加载不出来解决方案
针对IDEA中Javaweb项目中无法加载图片 一.项目的结构及问题介绍 项目结构如下: 在500.jsp页面中访问了img目录下的相关图片,比如背景图片,我在500.jsp中是这样写的路径 bac ...
- [04] C# Alloc Free编程之实践
C# Alloc Free编程之实践 上一篇说了Alloc Free编程的基本理论. 这篇文章就说怎么具体做实践. 常识 之所以说是常识, 那是因为我们在学任何一门语言的时候, 都能在各种书上看到各种 ...
- Popular Cows(POJ 2186)
原题如下: Popular Cows Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 40746 Accepted: 16 ...
- Python3 学习笔记之 运算符
- algorithm入门算法中的常见问题
KMP算法(next数组) 二分查找(非递归) /** * 二分查找(非递归) * @param arr 从小到大的排序数组 * @param target 目标查找值 * @return */ pu ...
- Vue搭建组件库并发布到 npm
https://www.jianshu.com/p/72d303449abc
- Element-UI:级联选择器：Cannot read property 'level' of null"
当级联选择时如果其选择内容需要动态变化时,如果没有选择就不会报错的:而当做出选择后又要动态变化级联选择器内容时,就会报错/ 错误:这个错误的原因是当选择后,再更新内容时,选择器仍会关联原来的数据,导致 ...
- 关于excel表格中只复制筛选后的数据
今天笔者在整个一个表格中的数据,需要将原表格的数据根据一些条件筛选后,整理到新的excel表中 但是发现每次操作,都将筛选条件之外的数据也粘贴进去了,但笔者确实又只选中了部分数据 经过多种方式尝试后, ...