Bootstrap 前端UI框架
Bootstrap 有哪些优越性？
1.简单灵活的用于搭建WEB页面的HTML，CSS， JavaScript的工具集
2.基于html5, css3, 具有良好特性，友好的学习曲线，卓越的兼容性，12列的响应式栅格结构、丰富的组件、JavaScript插件、排版、表单控件，还有 基于WEB的定制工具。
3.有完整的类库，基于Less的css管理。
我们在写css时可以参照bootstrap的css源码，非常标准，优秀。
如何开始Bootstrap?
在官网 get bootstrap.com 获取bootstrap包
一个基的本完整的Bootstrap 框架index页面，包含如下部分：
1.jQuery 要在bootstrap之前引入
2.<!DOCTYPE html> html5 文档头
3.<meta charset=“utf-8”> 指定文档编码
4.<meta name=“view port” content=“width=device-width, initial-scale=1”> 设定初始大小和屏幕是1:1比例
5.引入bootstrap.min.css在head标签中
6.引入html5shiv.min.js && respond.min.js 能让IE9以下浏览器兼容html5
7.引入jQuery.man.js && bootstrap.min.js 在body底部
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
移动优先的策略：
Bootstrap 3 抛弃了IE7，Bootstrap 3最大的特点就是移动设备优先。
内容：决定什么是最重要的
布局：有限设计更小的宽度，基础的CSS是移动设备优先，媒体查询是针对于平板电脑，台式电脑。
渐进增强：随着屏幕大小的增加而添加元素。 （渐进增强，优雅降级两种处理兼容的方式）
Bootstrap 网格系统的工作原理：
1.数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对其方式和内距（padding）
eg.
<div class=“container”>
<div class=“row”></div>
</div>
2.在行（.row）中可以添加列（.column）, 但列数之和不能超过平分的总列数，默认12，这个是可以改的，但是12是最佳的。
eg.
<div class=“container”>
<div class=“row”>
<div class=“col-mod-4”></div>
<div class=“col-mod-8”></div>
</div>
</div>
3.具体的容器应当放置在列容器（.column）之内，而且只有列（column）才可以作为行容器（.row）的直接子元素
4.通过设置内距（padding）从而创建列与列之间的间距，使用（margin）设置行与行之间的间距。
列的前缀表示了对一个的屏幕宽度：列可以嵌套，偏移，改变列方向和浮动像素
.col-xs- <768px
.col-sm- >=768px
.col-md- >=992px
.col-lg- >=1200px
