Bootstrap笔记1、bootstrap基本模板、CSS全局样式 和 栅格系统
1、什么是bootstrap
主要是前端的框架（HTML、CSS、JS）
响应式布局。（适用于各式浏览器手机等等，根据大小进行缩放）
移动设备优先
要想使用bootstrap，必须要加载 jquery。
解决IE低版本不支持HTML5元素的办法：
<!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script> <![endif]-->
2、bootstrap基本模板
1、HTML5文档类型定义
bootstrap文档基于HTML5。因此要使用HTML5 的文档类型定义（DTD）
<!DOCTYPE html>
2、字符集设置
<meta charset="UTF-8">
3、移动设备优先
<meta name="virport" content="width=device-width,initial-scale=1">
width=device-width：理想视图+
initial-scale=1：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
4、引入CSS和JS文件
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="bootstrap/js/jquery.min.js"></script> <script src="bootstrap/js/biitstrao.min.js"></script>
模板如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="virport" content="width=device-width,initial-scale=1">
<title>Title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/biitstrao.min.js"></script>
</head>
<body>
</body>
</html>
3、CSS全局样式
1、布局容器类样式：.container和.container-fluid
.container：固定宽度并且具有响应式；
.container-fluid：自有宽度（100%宽度）。
2、标题样式<h1>到<h6>、.h1~.h6
<h1>到<h6>样式重写了，基本上做到了兼容性
<font class="h1">一级标题</font> <font class="h1">一级标题</font> <font class="h1">一级标题</font>
3、行内文本样式
<b>：加粗
<strong>：加粗
<i>：斜体
<em>：:斜体，HTML5新标记
<s>：删除线
<del>：删除线，HTML5新标记
4、文本对齐样式：.text-left、.text-right、.text-center、.text-justify
.text-left：左对齐
.text-right：右对齐
.text-center：居中对齐
.text-justify：两端对齐
5、列表样式：.list-unstyled、.list-inline
.list-unstyled：无符号
.list-inline：行内块
6、表格样式
.table：表格全局样式（少量padding和水平方向的分割线）
.table-striped：有条纹 的背景色行（隔行换色)
.table-bordered：带边框的表格
.table-hover：鼠标悬停效果（放上变色，离开恢复）
.table-condensed：紧凑的表格（单元格内补会减半）
6、行或单元格背景色
.active：当前样式
.success
.info
.waring
.danger
注：只能给<tr>或<td>添加类样式
7、响应式表格
将.table元素包裹在.table-responsive元素内，即可创建响应式表格
当屏幕宽度小于768px，表格会出现滚动条
8、表单样式
.form-group 表单组样式：将<lable>和表单元素包含其中，可以获得更好的排列
.form-control 表单元素样式：常用于<input>、<textarea>、<select>元素
.form-inline 内联表单样式（用于form元素）：可以使元素一行排列
.form-horizontal：水平排列的表单，用于form元素
.sr-only：用于隐藏元素
.radio：单选框样式
.radio-inline：控制多个单选框在同一行显示
.checkbox：复选框样式
.checkbox-inline：控制多个复选框在同一行显示
.disable：可以禁用单选框或复选框的文本
Placeholder属性：给<input>添加提示信息
4、栅格系统
bootstrap提供了一套响应式、移动设备优先、流式的栅格系统
bootstrap把一个容器或整个网页平均分成12列
bootstrap的栅格系统，由一个行（.row）和多个列构成
栅格系统通过行列的形式来创建网页布局，把具体的数据放入列之中
注：栅格系统必须放在.container和.container-fluid之中
注：如果列数超过12列，会自动换行
栅格系统参数：
栅格系统应用
列偏移：一个栏向右便宜多少个列
.col-md-offset-*
列嵌套
在某个栏中再嵌套一个完整的栅格系统