Bootstrap布局之栅格系统详解

Bootstrap布局之栅格系统详解

栅格系统的基本概念和功能

栅格系统是 Bootstrap 最重要的功能之一，它是一个响应式的布局工具，能够让我们在不同的屏幕尺寸下构建出灵活的布局。栅格系统把屏幕分成了 12 个等宽的列，开发者可以通过给不同的 HTML 元素指定占用几列的宽度来完成不同的布局需求。

栅格系统的使用

使用栅格系统，我们需要将 HTML 代码分为若干个行（.row），每个行里面可以包含若干个列（.col--）。例如：

<div class="row">
  <div class="col-md-6">这是一栏</div>
  <div class="col-md-6">这是另一栏</div>
</div>

上面的代码定义了一个行，里面包含了两个占用了 6 个栅格的列。在中等屏幕尺寸（md）下，每个列会占据屏幕的一半宽度。

栅格系统的特性

响应式设计

Bootstrap 的栅格系统是响应式的，因此可以适应不同的屏幕尺寸。通过指定不同的前缀，可以定义不同的屏幕尺寸下元素的大小。

屏幕尺寸	前缀	栅格系统的列数
超小屏幕（<576px）	.col-	12
小屏幕（≥576px）	.col-sm-	12
中等屏幕（≥768px）	.col-md-	12
大屏幕（≥992px）	.col-lg-	12
超大屏幕（≥1200px）	.col-xl-	12

例如，下面的代码定义了一个屏幕宽度大于等于 768px 时，左侧占据三分之一，右侧占据三分之二的布局：

<div class="row">
  <div class="col-md-3">左侧三分之一</div>
  <div class="col-md-9">右侧三分之二</div>
</div>

嵌套布局

在栅格系统中，我们可以嵌套行和列来创建复杂的布局。例如：

<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-6">左上角</div>
      <div class="col-md-6">右上角</div>
    </div>
    <div class="row">
      <div class="col-md-12">底部</div>
    </div>
  </div>
  <div class="col-md-6">右半部分</div>
</div>

上面的代码定义了一个左半部分包含两行两列，右半部分只有一列的布局。

示例说明

示例1

下面的例子展示了如何使用栅格系统创建一个三段式布局，其中左右两栏各占据三分之一宽度，中间的栏目占据三分之一：

<div class="row">
  <div class="col-md-3">左栏</div>
  <div class="col-md-6">中栏</div>
  <div class="col-md-3">右栏</div>
</div>

示例2

下面的例子展示了如何使用栅格系统创建一个自适应宽度的媒体对象布局：

<div class="media">
  <img src="..." class="d-flex mr-3" alt="示例图片">
  <div class="media-body">
    <h5 class="mt-0">媒体对象标题</h5>
    <p>这里是媒体对象内容</p>
  </div>
</div>

在上面的代码中，.media 和 .media-body 类指定了整个媒体对象的大小和内部排列方式，.d-flex 和 .mr-3 类指定了图片元素的大小和外间距。