第五章之BootStrap 栅格系统

下面我将为您详细讲解“第五章之BootStrap 栅格系统”的完整攻略。

什么是Bootstrap栅格系统？

Bootstrap栅格系统是一种基于网格的布局系统，通过将页面布局分成12个网格来实现灵活的布局管理。通过这种方式，使得页面可以在不同设备上均能够展现出良好的布局效果，无论是在大屏幕PC上，还是在小屏幕移动设备上，都可以实现较好的用户体验。

在Bootstrap栅格系统中，我们将页面布局和内容分为行和列。页面的行分为12个等宽的列，可以随意组合使用。通过对行和列的设置，我们可以轻松实现响应式的页面设计。

Bootstrap栅格系统的使用方法

在使用Bootstrap栅格系统时，需要先将页面进行分行和分列。在页面中，需要使用class属性来对行和列进行设置。

行的设置

行来自于Bootstrap中的.row，将内容分别放入.row标记中，然后在每一个.row中使用列标记.col-*-*设置其中的列数，其中第一个星号代表响应式设计的设备尺寸，第二个星号代表该列占据的列数。

例如，如下代码中，.col-lg-6 设置该列在大屏幕（大于等于1200px）下占据6列，.col-md-4设置该列在中等屏幕（992px至1200px）下占据4列，.col-xs-12设置该列在小屏幕（小于等于768px）下占据12列，即占据整个屏幕宽度。

<div class="row">
  <div class="col-lg-6 col-md-4 col-xs-12">
    这是第一列
  </div>
  <div class="col-lg-6 col-md-8 col-xs-12">
    这是第二列
  </div>
</div>

列的设置

使用类名可以设置页面中具体某一列的尺寸，同时支持多个类名合并，实现自定义效果。

例如，如下代码中，设置.col-xs-6 .col-sm-4 .col-md-3 .col-lg-2相当于分别设置了在不同屏幕尺寸下的列宽为6、4、3、2。

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    第一列
  </div>
  <div class="col-xs-6 col-sm-8 col-md-9 col-lg-10">
    第二列
  </div>
</div>

常用的栅格系统实现方法

示例1：两列布局

下面是一个常见的两列布局实例：

<div class="row">
  <div class="col-sm-6">
    这是第一列
  </div>
  <div class="col-sm-6">
    这是第二列
  </div>
</div>

在该实例中，通过将栅格系统分为两列，并在每列中均匀地填充内容，可以轻松实现两列布局。

示例2：多列布局

下面展示了一个多列布局的实例：

<div class="row">
  <div class="col-sm-4">
    这是第一列
  </div>
  <div class="col-sm-4">
    这是第二列
  </div>
  <div class="col-sm-4">
    这是第三列
  </div>
</div>

在该实例中，通过将栅格系统分为三列，并在每列中均匀地填充内容，可以轻松实现三列布局。

以上就是基本的Bootstrap栅格系统使用方法和常用的示例，相信您已经能够熟练应用栅格系统实现各种布局效果。