Bootstrap简介：
Bootstrap之所以受到广大前端开发人员的欢迎，是因为可以构建出非常优雅的前端页面，而且占用资源小
优点：
1.移动设备优先
2.浏览器支持：主流浏览器都支持Bootstrap，包括IE
3.响应式设计：Bootstrap的响应式CSS能够自适应于台式机，平板计算机和手机的屏幕大小
4.良好的代码规范：为开发人员创建接口提供一个简介统一的解决方案，减少了测试的工作量
5.组件：Bootstrap包含了功能强大的内置组件
6.定制：Bootstrap还提供了基于web的定制
Bootstrap内容：
1.基本结构：Bootstrap提供了一个带有网格系统，链接样式，背景的基本结构
2.CSS:Bootstrap自带全局的CSS设置，定义基本的HTML元素样式，可扩展的class，以及一个先进的栅格系统
3.布局组件：Bootstrap包含了十几个可重用的组件，用于创建图像，下拉菜单，导航，警告框，弹出框等
4.JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件，可以直接包含所有的插件，也可以逐个包含这些插件
5.定制：开发人员可以定制Bootstrap的组件，LESS变量和jQuery插件来得到一套自定义的版本
Bootstrap中预定义了一套CSS样式和一套对应的jQuery代码，应用时只需提供固定的HTML结构，添加Bootstrap中提供的class名称，就可以完成指定效果的实现
Bootstrap基本模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<!-- 此属性为文档兼容模式（compatible）声明，表示使用IE浏览器的最新渲染模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 根据设置确定视口的宽度，device-width表示采用设备宽度，初始缩放1.0，
使用user-scalable=no可以 禁用其缩放(zooming)功能-->
<!-- 上述三个meta标签必须放在最前面，其他内容必须跟随其后 -->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 引入Bootstrap -->
<script src="html5shiv/html5shiv-printshiv.min.js"></script>
<script src="respond/respond.min.js"></script>
<!-- HTML5 Shiv和Respond.js用于让低于IE9版本的浏览器支持HTML5元素和媒体查询
注意：如果通过file:// 引入Respond.js文件，则该文件无法起到效果 -->
<title>Document</title>
</head>
<body>
</body>
<!-- Bootdtrsp的JavaScript插件需要引入jQuery -->
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
1.如果想在一个html文件中使用Bootstrap，该文件必须引入包：jQuery.js，bootstrap.min.js（bootstrap.js）和bootstrap.min.css（bootstrap.css）文件，3个meta标签分别用于设置字符集，文档兼容模式和视口，
2.html5shiv.min.js用于使低于IE9版本的浏览器支持HTML5元素，
3.Respond.js用于使IE8支持媒体查询
布局容器：
使用Bootstrap时需要为页面内容包裹一个.container容器，Bootstrap包为我们提供了两个容器类：
.container类和.containershi-fluid类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="html5shiv/html5shiv-printshiv.min.js"></script>
<script src="respond/respond.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" style="border:1px solid #000000;height: 100px;">
container
</div>
<div class="container-fluid" style="border:1px solid #000000;height:100px">
container-fluid
</div>
</body>
<!-- Bootdtrsp的JavaScript插件需要引入jQuery -->
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
1 .container类用于固定宽度并支持响应式布局的容器
2 .container-fluid类用于设置100%宽度，占据全部视口
3 由于padding等属性的原因，这两种容器不能相互嵌套
4.使用.container容器布局时页面两边有留白，而使用.container-fluid容器布局时会占据页面的整个宽度
栅格系统：
Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为1~12列
工作原理：
1.行必须包含在布局容器.container类或者.container-fluid类中，以便为其赋予合适的排列(aligment)，和内补（padding）
2.通过行(row)在水平方向创建一组列(column)，并且，只有列(column)，可以作为行(row)的直接子元素
3.行使用样式"row"。列使用样式"col-*-*"内容应当放置于列(column)内，列大于12时，将另起一行排列
4.Bootstrap栅格系统为不同的屏幕宽度定义了不同的类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<title>Document</title>
<style>
div{
border: 1.5px solid #000000;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-6">1</div>
<div class="col-md-3 col-xs-6">2</div>
<div class="col-md-3 col-xs-6">3</div>
<div class="col-md-3 col-xs-6">4</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6">5</div>
<div class="col-md-3 col-xs-6">6</div>
<div class="col-md-3 col-xs-6">7</div>
<div class="col-md-3 col-xs-6">8</div>
</div>
</div>
</body>
<!-- Bootdtrsp的JavaScript插件需要引入jQuery -->
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
鼠标拖动，缩小窗口，网格变成两列
col-xs,col-sm,col-md,col-lg，其中lg是大的缩写，md是(mid)中等的缩写，sm是(small)小的缩写,xs是extrasmall超小的缩写,col-xs适用于小于768px的超小屏幕
浏览器窗口小于768px，会被设备为手机设备col-xs-6生效，栅格系统的列数不是网页div的列数，
col-xs-6每个div列数为6，两个div列数12，显示两列（两个div），刚开始是每个col-md-3，每个div列数是4，所以显示的是4列
