Bootstrap 栅格系统响应式布局

栅格系统的使用

在某⼀个HTML元素中添加类col-md-4，可以将这个元素按照⽗父元素的实际宽度的4/12的进⾏分

配宽度。col开头的所有的类，都是⽤来进⾏栅格系统的布局的。

col-屏幕宽度代号-列数
比如说

col-md-4 表示在md屏幕尺寸下，此元素占4列，1/3

col-xs-6 表示在xs屏幕尺寸下，此元素占6列，1/2

在col-的类中，有如下的定义:

1. 左右内边距15px
2. box-sizing: border-box(在*选择器中定义的全局的属性)
   
3. 定义宽度，根据父元素宽度的百分⽐比来定义子元素的宽度。如果前一步没有设置boxsizing，
   则会出现宽度超出父容器的情况。
   
4. float:left 通过浮动，实现并排列。

栅格系统宽度的定义方式

.col-md-5 {

width: 41.66666667%;

}

.col-md-4 {

width: 33.33333333%;

}

.col-md-3 {

width: 25%;

}

.col-md-2 {

width: 16.66666667%;

}

.col-md-1 {

width: 8.33333333%;

}

栅格系统的响应式布局

在Bootstrap中将所有的设备屏幕宽度分为四类。

前缀名网页宽度对应设备类型xs0~768px(不包括768)手机屏幕大小sm768~992xp(不包括992)平板电脑屏幕大小md
992~1200px(不包括1200)普通电脑屏幕大小lg1200px以上高清电脑屏幕大小

在栅格系统中，我们可以分别设置不同屏幕下，盒⼦子排列的⽅方式。当⼤屏幕下没有设置具体参数
时，小屏幕的参数会向上兼容。但是在大屏幕下设置的参数不会影响小屏幕中的设置。
因为栅格系统的宽度分配原理理是按照⽗元素的百分比来进行实现的，所以可以任意的对栅格进行
嵌套使用。但是每次嵌套都有一个左右15px的padding。所以不宜嵌套太多层。