作为非专业的前端开发，Bootstrap 真是个好东西，特别适合做运营、管理系统界面。这些系统界面要求不高，干净整齐就好，最主要的就是网格 Grid 的使用，简单记录一下。

Bootstrap 3 自带了移动优先的响应流式网格布局系统，将整个屏幕或某一视区(viewport)划分为 12 列，使用时把内容放到相应列中，自然就整齐不乱。一般来说 Bootstrap 的网页结构是 container > row > col，一个或多个 col 组成一组 row，多个 row 归于一个 container，这样的多级布局很方便在大小不同的屏幕灵活布局。

最小单位 col 有四种：col-xs-*, col-sm-*, col-md-*, col-lg-*，(题外话，Bootstrap 这四个 col 命名实在是让人费解，也不是什么缩写，完全没有 Foundation 的 small-2 large-4 columns 简洁明了)，分别适用于手机(768px 以下)，平板(768-992px)，桌面(992px+)和超大屏幕(1200px+)，后一位是需要的宽度比例，总和为 12，这样就自动把界面进行划分布局，比如想把一个普通电脑屏幕左右平分，两个 col-md-6 即可。col 可以组合，这样就同时适配手机和电脑，比如在电脑是左右三等分，手机是二等分：

<div class="container">
  <div class="row">
    <div class="col-md-4 col-xs-6">
      A
    </div>
    <div class="col-md-4 col-xs-6">
      B
    </div>
    <div class="col-md-4 col-xs-6">
      C
    </div>
  </div>
</div>

col 也可以嵌套，要注意的是每个 col 里又是一个 12 等分的完整网格，也要包在二级容器 row 里。比如左右二等分，每个再 1:2 划分:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-4">
          A
        </div>
        <div class="col-sm-8">
          B
        </div>
      </div>
    </div>
    <div class="col-md-6">
      ...
    </div>
  </div>
</div>

网格还有一个方便的东西就是 Offset .col-md-offset-*，可以把某一 div 向右偏移指定比例，比如只一半的宽度，然后居中，3-6-3 布局：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      S
  </div>
</div>

参考 Bootstrap 3: the new grid system, for starters.