bootstrap之响应式开发-栅栏系统

响应式开发原理

就是使用媒体查询针对不同宽度的设备进行样式布局和样式的设置，从而适配不同设备的目的。

设备划分	尺寸区别	响应式尺寸划分
超小屏幕（手机）	<768px	100%
小屏设备（平板）	>=768px ~<992px	750px+
中等屏幕（桌面显示器）	>=992px~<1200px	970px
宽屏设备（大桌面显示器）	>=1200px	1170px

响应式布局容器

响应式需要一个父级做为容器布局，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式改变。

布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预定义了这个类，解耦a.container。
它提供了两个作此用处的类：
.container 定义了在不同类型屏幕的媒体查询
.container-fluid
流式布局容器 百分百宽度
占据全部视口（viewport的容器）
适合于单独做移动端开发

bootstrap使用栅格系统来控制排版，按照不同屏幕划分为1~12等份
行（row）可以去除父容器作用15px的边距
可以通过样式来控制在不同屏幕大小使元素占据每行row中列column的数量
.col-xs- 超小 .col-sm- 小 .col-md- 中等 .col-lg- 大
列（column）大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每列默认有15px的padding
可以同时拥有多个设备的类名，以便划分不同份数，例如 class=“col-md-4 col-lg-3 col-sm-6”

演示项目：
阿里百秀：响应式布局网页，根据调整浏览器大小改变组件布局