bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法...

(1)概括

一句话概括：根据显示屏幕宽度的大小，自动的选用对应的类的样式。

(2)关键字段

1、col是column简写：列；

2、xs是maxsmall简写：超小， sm是small简写：小，  md是medium简写：中等， lg是large简写：大；

3、-* 表示占列数，即占每行row分12列栅格系统比；

4、.col-xs-* 超小屏幕如手机 (<768px)时使用；

.col-sm-* 小屏幕如平板 (768px ≤ 宽度 ＜992px)时使用；

.col-md-* 中等屏幕如普通显示器 (992px ≤ 宽度 ＜ 1200px)时使用；

.col-lg-* 大屏幕如大显示器 (≥1200px)时使用。

(3)解释

为了更好的理解Bootstrap框架的网格系统工作原理，我们来看一张草图：

最外边框，带有一大片白色区域，就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果，其带有四种类型的浏览器(超小屏，小屏，中屏和大屏)，其断点(像素的分界点)是768px、992px和1220px。

通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。

从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕(包括手机、平板、PC等等)设置了不同的样式类，这样让开发人员在开发时可以有更多的选择。

(4)实例

例一：单独使用

col-md-4