小白。刚开始使用bootsharp做网页的时候，不懂得什么栅格系统、容器，什么响应式布局、视口(viewport)。秉着不懂就上网寻找答案，加上bootsharp官网上又很多现成的例子，自己动手试了下，大概明白了，什么是流式栅格系统。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。行（row）必须包含在.container（固定宽度）或 .container-fluid（100% 宽度）中，作为流式布局容器使用.container-fluid能够将屏幕栅格布局设置为 100% 宽度的布局，也就是说.container会使得布局的宽度是固定的，在不同设备的显示下会有偏差，而在.container-fluid下，都会满屏显示。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"> ?...</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"> ?...</div>
在栅格系统中，在 Less 文件中使用以下媒体查询来创建关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
下面来创建一个大屏幕(col-lg-*)基本的栅格系统：
css部分:
.col-lg-1, .col-lg-2, .col-lg-4, .col-lg-6, .col-lg-8 { ???????background-color: yellow; ???????color: blue; ???????text-align: center; ???????border: 1px solid #000; ???}
html部分:
<div class="container-fluid"> ???????<div class="row"> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ?????????<div class="col-lg-1">.col-lg-1</div> ???????</div> ???????<div class="row"> ?????????<div class="col-lg-8">.col-lg-8</div> ?????????<div class="col-lg-4">.col-lg-4</div> ???????</div> ???????<div class="row"> ?????????<div class="col-lg-4">.col-lg-4</div> ?????????<div class="col-lg-4">.col-lg-4</div> ?????????<div class="col-lg-4">.col-lg-4</div> ???????</div> ???????<div class="row"> ?????????<div class="col-lg-6">.col-lg-6</div> ?????????<div class="col-lg-6">.col-lg-6</div> ???????</div> ???</div>
在.container-fluid下，所有列（column）放在.row内。效果如下：
将页面以12为标准划分不同的列数，到达划分整个页面的效果。
在手机、平板、桌面，使用 .col-xs-* 、.col-sm-*、.col-md-*类，达到更加动态和强大的布局。
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div>
<div class="row"> ??<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> ??<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> ??<!--可选: 如果内容高度不匹配，可以清除xs栏 --> ??<div class="clearfix visible-xs-block"></div> ??<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div></div>
如果在网页中使用到上面四种栅格类，可能会遇到列高不匹配的问题，可以使用使用 .clearfix 和 响应式工具类，例如上面的<div class="clearfix visible-xs-block"></div>。
用Bootsharp搭建简单网页二--栅格系统
原文地址：http://www.cnblogs.com/pzhwpblog/p/8029995.html