关于Bootstrap栅格系统，我为您提供以下攻略：

Bootstrap入门书籍之（三）栅格系统

什么是Bootstrap栅格系统

Bootstrap栅格系统是一种基础的网格系统，它能够帮助我们快速搭建有规律的网页布局。通过栅格系统，我们可以将一个页面分成12列（column），把12列按照不同的比例分为几个大的块，又将每个大的块分为细的块，这样就可以为页面提供灵活的排版和响应式布局。

栅格系统的代码结构

Bootstrap栅格系统的代码结构如下：

<div class="container">
  <div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
  </div>
</div>

其中，.container类用于设置固定宽度并水平居中的容器，.row类用于创建一个行，.col-*-*类用于创建列，*-*表示分别是屏幕宽度和列数。这些类有很多种变化，具体可参见Bootstrap官方文档。

栅格系统的应用

下面我举两个例子讲解栅格系统的具体应用：

示例一

假设我们有一个需求：在一个页面上，左边是元素A，右边是元素B，两个元素宽度分别为4列和8列。那么我们可以这样写代码：

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

其中，col-md-4表示在中等屏幕（即宽度≥992px）下，宽度占4列；col-md-8表示在中等屏幕下，宽度占8列。Bootstrap会自动将宽度为4列和8列的元素放在同一行上，且自动水平对齐。

示例二

假设我们有一个需求：在一个页面上，有三个元素A、B、C，宽度分别为2列、4列、6列，并且宽度小于768px时，第一个元素全部换行，第二个元素在下方，第三个元素占满一行。可以这样写代码：

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

其中，col-sm-*表示在小屏幕（即宽度≥768px但<992px）下，宽度占多少列；col-xs-12表示在极小屏幕下（即宽度<768px），元素占满整行。

总结

Bootstrap栅格系统是一种基础的网格系统，它能够帮助我们快速搭建有规律的网页布局。我们可以将一个页面分成12列，通过设置每个元素在不同屏幕下的宽度，实现灵活的响应式布局。