jquery-bootstrap

"简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。"

对jquery进行了二次封装

bootstrap官网:Bootstrap中文网 (bootcss.com)

bootstrap栅格系统

栅格系统（grid systems），也叫“网格系统”。 网页栅格系统是从平面栅格系统中发展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。

栅格系统

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。

使用bootstrap布局的三步骤

1.准备容器

给大盒子(div)添加一个'container'名称

2.准备行

在大盒子里再套一个盒子(div并给它命名'row'

3.在行里面定义 列 

在行中的盒子(div里再套一个盒子给他命名'col'

各屏幕的适应性

堆叠到水平排列

使用栅格设计网页排版

流动性布局:

使用栅格设计网页排版

移动和桌面设备:

使用栅格设计网页排版

使用栅格设计网页排版

还有很多栅格系统的应用详见官网...