Bootstrap栅格系统_入门和Bootstrap栅格系统_注意事项

Bootstrap栅格系统_入门

响应式布局

　　同一套页面可以兼容不同分辨率的设备。

　　实现：依赖于栅格系统：将一行平均分为12个格子，可以指定元素占几个格子

　　步骤：

　　　1.定义容器。相当于之前的table、

　　　　容器分类：

　　　　　　1.container：两边留白

　　　　　　2.container-fluid：每一种设备都是100%宽度

　　　2.定义行。相当于之前的tr　样式：row

　　　3.定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

　　　　设备代号：

　　　　　　1.xs：超小屏幕 手机 (<768px) ：col-xs-12

　　　　　　2.sm：小屏幕 平板(>768px)

　　　　　　3.md：中等屏幕 桌面显示器(>992px)

　　　　　　4.lg：大屏幕 大桌面显示器(>1200px)

Bootstrap栅格系统_注意事项

注意：

　1.一行中如果格子数目超过12，则超出部分自动换行。

　2.栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。

　3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。