1.流行的css布局设计
固定布局/流式布局/响应式布局都有自己的栅格系统。开发者需要根据自身的需求和能力选择合适的布局方案。需要根据团队的情况，产品的需求，成本的考量来综合考虑技术的选型。
-
固定布局
要使得N(width)最大，width的取值必须是 ...,480,960,1920,... N值阅读，可组合的宽度值就越多，栅格系统越灵活。目前绝大多数的浏览器支持1024×768及以上的分辨率，480太窄，1920则太宽，因此960就成为网页栅格系统的最佳宽度。
Flowline = Column * N + Gutter * (N-1) + 2 * Margin
又由于 Gutter = 2Margin
Flowline = Column * N + Gutter * N = (Column + Gutter) * N
-
流式布局
响应式布局成熟之前，某些需要元素随窗口大小变化的需求采用Table进行布局，但是不够灵活/结构复杂/语义性差的问题，流式布局在某种程度上可以解决这些问题。
-
计算列百分比
-
使图片更加灵活
图片元素添加max-width:100%;height:auto;实现图片按比例缩放不超过父元素的尺寸。
width:100%;height:auto;实现图片和父元素一直等宽。
-
最大/最小宽度
设置最大最小宽度后，如果窗口大于最大宽度或小于最小宽度时，页面将呈现和固定布局一样的表现。
-
-
响应式布局
页面可以根据用户设备尺寸或浏览器的窗口尺寸来自动地进行布局的调整，称为响应式布局。
- 媒体查询
响应式设计的栅格系统实际上就是在流式栅格系统的基础上添加了媒体查询。
2.Bootstrap框架
Bootstrap是2011年Twitter公司的开源整体式前端框架。应用更为广发的是它的后台管理界面。Bootstrap2与Boostratp3更多的是设计风格的不同，应该根据自己项目的实际需求来决定使用哪一个版本。
- 1.了解bootstrap
Bootstrap的源代码是使用CSS预编译语言Less编写的。应用Bootstrap需要使用的是编译好的CSS文件。Bootstrap的JavaScript效果都是基于jQuery的。
添加Bootstrap的class实现基本样式
调用Bootstrap的通用组件（在布局方面，符合class命名和嵌套结构）
添加JavaScript动态效果（特定的HTML结构，调用JavaScript插件（插件的调用：采用Bootstrap自带的触发规则，例如data-toggle="tab"这样的属性;采用类似jQuery插件的调用方式））
-
2.Bootstrap的栅格系统
-
固定布局的栅格系统 Bootstap2 默认不带响应式固定布局12列栅格系统。栅格宽度60像素，分隔宽度20像素，总宽度940像素。剧中容器.container宽度940像素。【？如果左右都加20px，那么就变成了980px】
设置偏移量：.offset3 将元素右移3个列的宽度。
-
流式布局的栅格系统
百分比作为宽度。将.row类改为.row-fluid类。每一列的类不改变，可以方便在流式布局和固定布局之间切换。
-
响应式布局的栅格系统
Bootstrap3中，xs(超小屏)，sm(小屏)，md(中屏)，lg(大屏)
-
-
定制Bootstrap
有两种方式：直接在官网定制（适合少量的，明确的修改，简单方便）；下载源码修改配置（深度定制）；
