Bootstrap3.0教程之栅格系统原理(布局)

什么是栅格系统

栅格系统是指网页布局中网页的行列布局，将页面划分为若干列，每个部分都包含若干列，通过使用栅格系统可以让网页中的内容更加清晰，明确，使用户更加方便地使用页面。

Bootstrap将栅格系统看做是其设计的核心，在Bootstrap中，按钮、表格、表单以及整个网站都可以通过栅格系统来设计和排版。

栅格系统的原理

栅格系统的原理是将页面的单元格划分成12列，可以通过列数的组合来实现不同的布局设计，通过Max-width和Min-width来实现页面的响应式设计。

例如，可以将页面分为两列，其中左侧占3列，右侧占9列，我们可以使用以下代码：

<div class="row">
  <div class="col-sm-3">左侧内容</div>
  <div class="col-sm-9">右侧内容</div>
</div>

在上面的代码中，“row”表示一行，“col-sm-3”表示左侧占三列，“col-sm-9”表示右侧占九列，另外需要注意的是，“sm”表示小屏幕，其他屏幕大小的缩写依次为：xs（extra small），md（medium）和lg（large）。

栅格系统的示例

示例1：两列布局

下面的代码表示将页面分为两列，左侧占6列，右侧占6列，响应式设计，适应各种屏幕。

<div class="row">
  <div class="col-xs-6 col-sm-6">左侧内容</div>
  <div class="col-xs-6 col-sm-6">右侧内容</div>
</div>

在上述代码中，使用“col-xs-6 col-sm-6”表示左右两侧都占用6列，适用于小型和中型屏幕。

示例2：三列布局

下面的代码表示将页面分为三列，左侧占3列，中间占6列，右侧占3列，响应式设计，适应各种屏幕。

<div class="row">
  <div class="col-xs-3 col-sm-3">左侧内容</div>
  <div class="col-xs-6 col-sm-6">中间内容</div>
  <div class="col-xs-3 col-sm-3">右侧内容</div>
</div>

在上述代码中，使用“col-xs-3 col-sm-3”表示左右两侧都占用3列，中间占用6列，适用于小型和中型屏幕。

总结

栅格系统是Bootstrap设计的核心，它能够让网站更加清晰、明了。通过将页面划分成12列，并根据需要组合不同的列数，可以实现各种不同的布局设计。使用栅格系统可以方便地实现响应式设计，适应不同大小的屏幕。