Bootstrap教程：[4]栅格系统详解

我们都知道bootstrap3.0使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs ,col-sm,col-md,col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。这是在低于750屏幕上的样式：这是小于970像素的设备：

col-lg的行为也是一样的，这里就不演示了

下面说一下如何组合使用这几个类。我们使用<div class="col-sm-10 col-md-8">这样的方式来表示：在中等屏幕设备上该div占用8列的宽度；在小屏幕上该div占用10列的宽度。