响应式布局
在同一套代码中，根据不同设备或屏幕宽高，展现不同效果
优点：
1.相对减少工作量
2.节约时间
3.响应式效果
4.每种设备都会有相应的适应
缺点：
1.无法完全精准设置效果
2.相对增加工作量，相对不响应式，多一些css、js代码
3.增加浏览器的负担
4.低版本兼容性不好
二、bootsrtap
（1）bootstrap:简洁、直观、强悍的前端开发框架，让web开发更迅速、简单，侧重于移动端
Twitter开发，开源
1.全局CSS样式
2.丰富组件
3.js插件
4.可以个性化定制
（2）栅格系统（核心）
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
有媒体查询、百分比
1.布局
.container:容器类，固定宽度
.container-fluid：100%宽度
1row=12col
col-sm-*：*代表当前单元格在整个12列中所占几列
lg、md、sm、xs：不同的单元格规模，在不同的临界值进行变换
2.栅格嵌套
col>row
col>.container 错误，布局混乱
row是12列，
单元格移动：
col-md-offset-*：让单元格向右偏移，左边偏移出来的区域不能再放元素
col-md-push-*：让单元格向右移动，不影响原有单元格布局
col-md-pull-*：让单元格向左移动，不影响原有单元布局
注意：布局时不要让两单元格碰撞到一起
.container>row
row>col
col>任意
一个页面中，可以将.container放置在“任意”地方，.container区域会自动响应式。
（3）全局CSS样式
1.代码
<code></code>行内代码，不能自动换行
<pre></pre>代码块，内容的样式会体现在网页上，可自动换行
pre-scrollable：代表当代码高度高于350px时，代码滚动显示
注意：大于号小于号需换成 > 和 <
以下引用
（4）组件
1.导航条
.navbar:代表当前是导航条
.navbar-default：
