首先，读者需要分辨3个概念：

（1）Fix（固定式布局）

对于固定式布局而言，无论浏览器是放大还是缩小，内容位置都不会因受挤压而改变，而且整个布局居中。

（2）Fluid（流式布局）

流式布局要设置布局的最大宽度和最小宽度。如果浏览器的宽度大于布局的最大宽度，那么不管浏览器大小怎么调整，布局里面的内容位置都不受挤压改变。如果浏览器的宽度小于布局的最大宽度，大于最小宽度，那么布局里的内容位置会随着浏览器的大小调整而改变。如果浏览器的宽度小于布局的最小宽度，布局里的内容位置也不会改变。

（3）Responsive（响应式布局）

准确来说，没有响应式布局，只有响应式设计。当浏览器的宽度小于某个值时，整个页面呈现另外一种布局。注意，固定式布局和流式布局都包含响应式设计。

先看下面的示例：
<div class="container">
     <div class="row">
          <div class="span4"> span4</div>
          <div class="span8"> span8</div>
     </div>
     <div class="row">
          <div class="span4"> span4</div>
          <div class="span6"> span6</div>
          <div class="span2"> span2</div>
     </div>
</div>

在上面结构中，<div class="container">就是上面所说的容器，其中包含两行栅格（<div class="row">）。

Bootstrap中规定固定容器的总宽度为940px，具体源码定义如下：
.container{
     width: 940px;
}

定义这个容器在页面中居中显示，源码如下：
.container {
     margin-right: auto;
     margin-left: auto;
     *zoom: 1;
}

这里有个技巧，为了让<div>在各种浏览器下产生同样的居中效果，将margin-left和margin-right的值设置为auto，这是最简单的方式。*zoom这个CSS Hack是为了兼容IE6和IE7。

同时，使用了CSS伪元素选择器，在这个类里面清空了前后的内容，并且在后面清除浮动：
.container:before,
.container:after {
     display: table;
     line-height: 0;
     content: "";
}
.container:after {
     clear: both;
}

接着，使用span进行整页布局：无论是做几列的布局，一定要保证在一行内各个span的名字加起来正好是12，例如，span4+span8等于12，也可以是一个单独的span12，还可以是span6+span6或span4+span4+span4等。每行内的span加起来总和为12，这样就可以保证完整的页面布局。

提示　虽然容器的宽度为940px，每个span的宽度都是默认值，但在实际开发中用户可以适当重写。

Bootstrap采用的是12列布局格式，即在页面一行之内最多可以布置12列。当然在局部栏目中不会使用12列，通常侧栏使用2列或3列，最多不会超过4列，主栏可以使用6列、7列或8列。