Bootstrap整体框架之CSS 12栅格系统

简介

在Bootstrap中，12栅格系统是用于布局网页的重要组成部分，可以帮助我们将页面分割成多个水平方向的区块。每个栅格被称为一个列（column），可以包含在一个行（row）中。Bootstrap提供了一系列CSS类来帮助我们创建这些栅格。

栅格的基本表示

12栅格系统基于网页的宽度进行划分，它的理念是将网页宽度分成12等份，每一份被称为一个栅格。每个栅格的宽度是由栅格所在的容器宽度决定的。

我们可以使用.container或.container-fluid来创建一个容器。其中.container表示固定宽度的容器，.container-fluid表示全屏幕宽度的容器。

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

上面的代码创建了一个.container容器，其中包含一个.row行和3个.col-md-4列。每个列都将网页宽度分成了3份，每份宽度占用了.row行的1/4。

栅格的设定

Bootstrap提供了一系列CSS类来实现不同大小范围内的栅格。

• .col-xs-*: 针对超小设备（手机）设定栅格，*指定列所占宽度（最小值为1，最大值为12）。
• .col-sm-*: 针对小设备（平板）设定栅格，*指定列所占宽度（最小值为1，最大值为12）。
• .col-md-*: 针对中等设备（桌面电脑）设定栅格，*指定列所占宽度（最小值为1，最大值为12）。
• .col-lg-*: 针对大设备，*指定列所占宽度（最小值为1，最大值为12）。

此外，我们也可以使用响应式设计的方法来针对不同屏幕设备设置不同的栅格。例如，下面的代码在超小屏幕设备的时候，.col-xs-12的列占据了整个屏幕；在中等屏幕设备上，.col-md-6的列占据了半个屏幕。

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

栅格偏移和嵌套

我们可以使用.col-*-*来设置栅格的偏移。例如：

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

上面的代码创建了一个.container容器，其中包含一个.row行和一个.col-md-4列，并将该列向右偏移了4列，相当于在其左侧留下了4列未使用。

除了偏移，栅格还支持嵌套功能。例如，下面的代码在其中一个栅格里再嵌入了一个更小的栅格：

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

上面的代码创建了一个.container容器，其中包含一个.row行和两个.col-md-6列。.col-md-6列中又包含一个更小的.row行，其中包括了两个.col-md-6列。

总结

通过以上的介绍，我们了解了Bootstrap中12栅格系统的基本用法及其定义，能够根据需要设置不同的栅格。针对不同设备的视口，可以通过不同的CSS类针对性做出响应式的调整。同时我们还了解了如何设置栅格的偏移和嵌套等，来满足不同的UI需求。