响应式布局

响应式布局

在同一套代码中，根据不同设备或屏幕宽高，展现不同效果

优点：

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.代码

行内代码，不能自动换行

代码块，内容的样式会体现在网页上，可自动换行

pre-scrollable：代表当代码高度高于350px时，代码滚动显示

注意：大于号小于号需换成 > 和 <

以下引用

（4）组件

1.导航条

.navbar:代表当前是导航条

.navbar-default：

---