步骤
1.定义容器,类似于table
容器分类:
container : 两边有留白
container-fluid : 每一种设备都是100%宽度
2.定义行:相当于tr 样式row
3.定义元素:指定该元素在不同的设备上,所占的格子数目
样式:col-设备代号-格子数目
*设备代号:
- 超小屏幕 手机 (<768px) .col-xs-12
- 小屏幕 平板 (≥768px) .col-sm-
- 中等屏幕 桌面显示器 (≥992px) .col-md-
- 大屏幕 大桌面显示器 (≥1200px) .col-lg-
注意:
1.如果的格子数目如果超过12,则超出部分自动换行
2.栅格类属性可以向上兼容,栅格类适用于与屏幕宽度大于或等于分界点大小的设备
3.如果真实设备宽度小于设备栅格类属性的设备代码的最小值,会一个元素占满一整行