栅格系统-入门
1.响应式布局:同一套页面可以兼容不同分辨率的设备
2.实现:依赖于栅格系统(栅格系统:将一行平均分为12个格子,可以指定元素占几个格子)
3.步骤:
-
定义容器。相当于之前的table
容器分类: container 和container-fluid -
定义行。相当于之前的tr 样式:row
-
定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
设备代号:
(1)xs:超小屏幕 手机(<768px):col-xs-12
(2)sm:小屏幕 平板(>=768px)
(3)md:中等屏幕 桌面显示器(>=992px)
(4)lg:大屏幕 大桌面显示器(>=1200px)示例:大屏幕12个格子一行,ipad上是6个两行
注意事项
1.container 和container-fluid
container :两边留白
container-fluid:每一种设备都是100%宽度
2.一行中如果格子数目超过12,则超出部分自动换行
3.栅格类属性可以向上兼容,栅格类使用于与屏幕宽度大于或等于分界点大小的设备
4.如果真实设备宽度小于了设备栅格类属性的设备代码的最小值,会一个元素占满一整行