深入理解Bootstrap的栅格布局

打开WebStrom开发工具，新建‘test.html’页面，并在同级目录放入bootstrap相关的文件如下图

现在以栅格系统的col-lg-*为例，在‘test.html’中，写代码如下;                                           

在网页中查看效果，起初是一排四列

当缩小页面的宽度，就会变成一列四排

修改‘test.html’测试列偏移的使用，代码如下：                                           

查看网页效果如下图所示

一般来说经常用到的是col-lg-*和其他的混合使用，例如要显示三项内容，当页面足够宽时一行显示，页面偏小时三行显示，代码如下：                               

网页查看效果，起初一行三列，因为足够宽

缩小页面宽度，变成两行

最后附上官网的媒体查询显示分类，上面都是很简单例子，在实际项目中要灵活应用