bootstrap学习笔记(六)bootstrap的响应式栅格

Bootstrap为不同的屏幕尺寸定义了不同的栅格样式,例如上一次用到的col-md-6,就是针对中型屏幕(md)的定义.其他三种分别是超小(xs)/小型(sm)/大型(lg).那么这些设备指的是屏幕多大的设备,不同设备的列宽是多少呢,下面我找到了一个表,挪用过来记录一下.

|超小屏幕设备(<768px)|小屏幕设备(≥768px)|中等屏幕设备(≥992px)|大屏幕设备(≥1200px)
----|:----:|:----:|:----:|:----:
栅格系统行为| 总是水平排列| 开始是水平排列,超过这些设备的最大值将变为水平排列|同左|同左
最大container宽度| 自动|750px|970px|1170px
样式前缀|.col-xs-|.col-sm-|.col-md-|.col-lg-
列数|12|12|12|12
最大列宽|自动|60px|78px|95px
padding|30px(左右均为15px)|30px|30px|30px

有了上面这些css的定义,我们就可以将不同大小的设备简化为这四种屏幕设备,来针对这四种类型的设备编写不同的代码,从而简化在很多种设备上开发页面遇到的问题.