Bootstrap 网格基础

Bootstrap 网格系统 (Grids)

Bootstrap 网格系统

Bootstrap 强大的网格系统（grid system）使用一系列容器（containers）、行（rows）和列（columns）来布局和对齐内容。它使用 Flexbox 构建，并具有完全响应式特性，允许页面跨度最多达 12 列。

如果你不想单独使用全部 12 列，可以将它们分组以创建更宽的列。网格系统会根据屏幕尺寸和方向进行调整，确保你的布局在所有设备上看起来都很棒。

可视化列跨度：

跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1

跨度 4 | 跨度 4 | 跨度 4

跨度 4 | 跨度 8

跨度 6 | 跨度 6

跨度 12

Bootstrap 的网格系统是响应式的，列会根据屏幕尺寸和你使用的类自动重新排列（通常在小屏幕上垂直堆叠）。

网格类 (Grid Classes) 和断点 (Breakpoints)

Bootstrap 5 网格系统有六个响应式层级（断点）：

• 无前缀（例如，.col-6）：超小设备（<576px） - 这是默认设置，除非被覆盖，否则列适用于 xs 及以上设备。
• sm（例如，.col-sm-6）：小型设备（≥576px）
• md（例如，.col-md-6）：中型设备（≥768px）
• lg（例如，.col-lg-6）：大型设备（≥992px）
• xl（例如，.col-xl-6）：超大型设备（≥1200px）
• xxl（例如，.col-xxl-6）：超超大型设备（≥1400px）

你可以组合这些类来创建动态且灵活的布局。例如，.col-12 .col-md-6 会使列在超小屏幕上占据全宽，而在中型及更大屏幕上占据半宽。

Bootstrap 网格的基本结构

基本结构包括一个 .container 或 .container-fluid 作为最外层容器，接着是 .row 来创建水平的列组，最后是用于内容的 .col-* 类。

<div class="container">
  <div class="row">
    <div class="col">
      Column content
    </div>
    <div class="col">
      Column content
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8">Column content (8 units on sm and up)</div>
    <div class="col-sm-4">Column content (4 units on sm and up)</div>
  </div>
</div>

首先，创建一个行（<div class="row">）。然后，使用适当的 .col-{breakpoint}-{number} 类（例如，.col-md-4）或自动布局列（.col）添加所需数量的列。如果你手动设置列大小，每个行的列数总和最好是 12。

下面是一些基本 Bootstrap 网格布局的示例。

三个等宽列（响应式）

.col-md-4 (在 <md 时堆叠) .col-md-4 (在 <md 时堆叠) .col-md-4 (在 <md 时堆叠)

此示例展示了如何在 medium（md）设备及更大屏幕上创建三个等宽列。在 small 和 extra-small 设备上，列将垂直堆叠。

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <div class="row">
      <div class="col-md-4 p-2 bg-light border">.col-md-4</div>
      <div class="col-md-4 p-2 bg-light border">.col-md-4</div>
      <div class="col-md-4 p-2 bg-light border">.col-md-4</div>
    </div>
  </div>
</body>
</html>

两个不等宽列（响应式）

.col-sm-4 (在 <sm 时堆叠) .col-sm-8 (在 <sm 时堆叠)

此示例展示了两个不同宽度的列，它们从 small（sm）设备开始按指定宽度显示，并在 extra-small 设备上堆叠。

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <div class="row">
      <div class="col-sm-4 p-2 bg-info-subtle border">.col-sm-4</div>
      <div class="col-sm-8 p-2 bg-warning-subtle border">.col-sm-8</div>
    </div>
  </div>
</body>
</html>

	提示：探索更多主题，如自动布局列、列换行、重新排序和嵌套，请查阅 Bootstrap 官方文档，以掌握网格系统。