Bootstrap栅格布局
bootstrap栅栏系统css中的col-xs-、col-sm-、col-md-* 、col-lg-*的意义:
小于 768px 的时候,用 col-xs-12 类对应的样式;
在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;
在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;
大于 1200px 的时候,用 col-lg-3 类对应的样式;
关键字解释
1、col-column:列;
2、xs-maxsmall:超小; sm-small:小; md-medium:中等; lg-large:大;
3、-*表示占列,即占自动每行row分12列栅格系统比;
4、.col-xs-*超小屏幕 手机 (<768px),超小屏幕时使用;
.col-sm-*小屏幕 平板 (≥768px),小屏幕时使用;
.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数),中等屏幕时使用;
.col-lg-*大屏幕 大桌面显示器 (≥1200px),大屏幕时使用。
5、不管在哪种屏幕上,栅格系统都会自动的每行row分12列 col-xs-和col-sm- 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。例如
6、反推,如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 ),则col-xs-4;在大屏幕上显示6个div(12/6个=每个占2列 ) ,则 col-md-2;这样我们就可以控制我们自己想要的什么排版了。