引导程序4 | 网格系统

网格系统是一种布局技术，用于将页面分为均匀的网格单元格。它可用于创建响应式布局和简化CSS代码。在这里，我们将介绍如何在引导程序4中使用网格系统。

准备工作

在开始使用网格系统之前，请确保已经正确链接了Bootstrap网格CSS文件。您可以通过以下方式添加CSS链接：

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">

栅格系统

Bootstrap的网格系统由12个列组成。您可以将一个或多个列组合在一起以创建各种布局。每个列都有一个类名，可以将其定义为以下格式：

<div class="col-{breakpoint}-{columns}"></div>

其中，**{breakpoint}**指定屏幕大小，例如xs（移动设备），sm（平板电脑），md（台式电脑）或lg（大屏幕）。 **{columns}**指定将该列拆分为多少份（最多12）。例如，以下代码行将在所有屏幕大小上创建一个均匀的4列布局：

<div class="row">
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
</div>

响应式网格

要创建响应式网格，您可以使用以下类别：

• .col-{breakpoint}-{columns}：在指定的**{breakpoint}下将列拆分为{columns}**份。
• .order-{breakpoint}-{order}：将具有**{order}顺序的元素移动到指定的{breakpoint}**。
• .offset-{breakpoint}-{columns}：在指定的 **{breakpoint}下将元素向右移动{columns}**列。

例如，以下代码将在所有移动设备上创建一个均匀的2列布局，并在平板电脑及以上屏幕上创建一个均匀的4列布局：

<div class="row">
  <div class="col-6 col-md-3"></div>
  <div class="col-6 col-md-3"></div>
  <div class="col-6 col-md-3"></div>
  <div class="col-6 col-md-3"></div>
</div>

偏移网格

如果要在整个行的左侧添加空白区域，可以使用偏移列。 偏移列使用**.offset-{breakpoint}-{columns}**类，并将元素从行的左侧移动指定的列数。例如，以下代码在平板电脑及以上屏幕上创建一个均匀的4列布局，并在左侧添加2列空白：

<div class="row">
  <div class="col-6 col-md-3 offset-md-2"></div>
  <div class="col-6 col-md-3"></div>
  <div class="col-6 col-md-3"></div>
</div>

结尾

现在您已经了解了如何在引导程序4中使用网格系统。使用此技术，您将能够创建响应式布局，并减少CSS代码的复杂性。快去尝试一下吧！