Bootstrap 简明教程

Bootstrap - CSS Grid

本章将讨论 Bootstrap CSS 格栅。Bootstrad 经过十多年的发展，其默认格栅系统已被广泛使用并证明其有效性。它是在没有诸如我们在当前浏览器中看到的现代 CSS 特性（如新的 CSS 网格）的情况下创建的。

How it works

Bootstrap 5 引入了使用基于 CSS 网格的格栅系统的能力并提供了附加的 Bootstrap 特性，可用于使用不同的方法创建自适应布局。

通过将 $enable-grid-classes 设置为 false 来禁用默认格栅系统，而后通过将 $enable-cssgrid 设置为 true 来启用 CSS 网格，从而重新编译 Sass。
替换为 .row 的 .grid 实例。 .grid 类通过设置 display: grid 来创建 grid-template 。
不要使用 .col- 类，而要使用 .g-col- 类，因为 CSS 网格列使用 grid-column 属性而不是 width 。
使用 CSS 变量 --bs-columns 和 --bs-gap 自定义父 .grid 的列大小和槽距。

Key differences

让我们来看一下 CSS 网格系统与标准网格系统相比的差异，如下所示：

Flex 实用程序对 CSS 网格列的影响是不同的。
不要使用槽距，而是使用充当 margins 的 gap 来替换网格系统中的水平 padding 。
网格间距会自动水平和垂直地应用。与 .row 不同，.grid 没有负边距，不能使用边距实用程序来调整槽距。请参阅 customizing section 。
修饰符类应该替换为内联和自定义样式（例如 style="--bs-columns: 3;" 与 class="row-cols-3" ）。
Nesting 需要针对每个嵌套 .grid 实例重置列数。

Three columns

使用 .g-col-4 为所有设备创建三列等宽列。根据视口大小，使用 responsive classes 根据视口大小修改布局。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Three Columns</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-4 bg-info p-2">First Column</div>
          <div class="g-col-4 bg-light p-2">Second Column</div>
          <div class="g-col-4 bg-warning p-2">Third Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Responsive

要根据不同屏幕大小调整布局，请使用响应式类。举例来说，从较小屏幕上的两列开始，然后扩展至较大屏幕上的三列。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h2 class="text-center">Responsive</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-6 g-col-md-4 bg-info">First Column</div>
          <div class="g-col-6 g-col-md-4 bg-light">Second Column</div>
          <div class="g-col-6 g-col-md-4 bg-warning">Third Column</div>
        </div>
      </div>
    </div>
</body>
</html>

在所有屏幕尺寸上，比较两列布局。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Two Column Layout</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
        <div class="g-col-6 bg-info">First Column</div>
        <div class="g-col-6 bg-warning">Second Column</div>
      </div>
      </div>
    </div>
  </body>
  </html>

Wrapping

当没有更多水平空间时，网格项目会换行到下一行， gaps 适用于水平间距和垂直间距。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Wrapping</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-6 bg-warning">Second Column</div>

          <div class="g-col-6 bg-info">Third Column</div>
          <div class="g-col-6 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Starts

start 类是 CSS Grid grid-column-start 和 grid-column-end 属性的简写版本，用于通过指定列开始和结束点来创建网格模板。
它们与列类结合使用，用于列大小和对齐，从 1 开始，因为 0 不是这些属性的有效值。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Starts</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
            <div class="g-col-3 g-start-2 bg-info">First Column</div>
            <div class="g-col-4 g-start-6 bg-warning">Second Column</div>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

Auto columns

如果没有网格项目上的任何类，它们将自动调整为 .grid 中的一列。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - CSS Grid</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h2 class="text-center">Auto Column</h2>
  <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
    <div class="row">
      <div class="grid text-center">
        <div class="bg-info">First</div>
        <div class="bg-warning">Second</div>
        <div class="bg-info">Third</div>
        <div class="bg-warning">Four</div>
        <div class="bg-info">Five</div>
        <div class="bg-warning">Six</div>
        <div class="bg-info">Seven</div>
        <div class="bg-warning">Eight</div>
        <div class="bg-info">Nine</div>
        <div class="bg-warning">Ten</div>
      </div>
    </div>
  </div>
</body>
</html>

网格列类可以与这种行为相结合。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Auto Column</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-6">First</div>
            <div>Second</div>
            <div>Third</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
            <div>Seven</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Nesting

CSS 网格系统支持 .grid 的简单嵌套，并且与默认网格不同，它会继承对行、列和间距的修改。要实现嵌套，请考虑以下方案：

默认列数会被局部 CSS 变量覆盖： --bs-columns: 3 。
第一自动列中的列数保持不变，并且每列都占据总宽度的三分之一。
在第二自动列中，将嵌套 .grid 的列数设置为 12（我们的默认设置）。
第三个自动列中没有嵌套项目。

与基本网格结构相比，这在实践中支持更复杂和自定义的布局。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Nesting</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center p-3" style="--bs-columns: 3;">
          <div class="bg-secondary text-white">
            First Auto-column
            <div class="grid p-3">
              <div class="bg-warning">1</div>
              <div class="bg-info">2</div>
            </div>
          </div>
          <div class="bg-secondary text-white">
            Second Auto-column
            <div class="grid  p-3" style="--bs-columns: 12;">
              <div class="g-col-6 bg-warning">1</div>
              <div class="g-col-4 bg-info">2</div>
              <div class="g-col-2 bg-warning">3</div>
            </div>
          </div>
          <div class="bg-secondary text-white">Third Auto-column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Customizing

使用局部 CSS 变量自定义列数和行数以及间距宽度。

没有默认值的 CSS 变量，在指定局部实例之前使用回退值。举例来说， var(--bs-rows, 1) 用于 CSS 网格行，在定义 --bs-rows 时覆盖回退值 1。

No grid classes

.grid 元素内的网格项将自动调整大小，而无需使用 .g-col 类。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - CSS Grid</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h2 class="text-center">No Grid Classes</h2>
  <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
    <div class="row">
      <div class="grid text-center" style="--bs-columns: 3;">
        <div class="bg-info">First Column</div>
        <div class="bg-light">Second Column</div>
        <div class="bg-warning">Third Column</div>
      </div>
    </div>
  </div>
</body>
</html>

Columns and gaps

让我们修改列数和间距，如下所示：

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Column and Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
          <div class="g-col-2 bg-info">First Column</div>
          <div class="g-col-2 bg-warning">Second Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

使用 --bs-columns: 10; 和 --bs-gap: 1rem; 更改间隙和列数。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Column and Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-4 bg-warning">Second Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Adding rows

下面的示例演示了如何重新排列列并增加行数：

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Adding Rows</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
          <div class="bg-info">First Column</div>
          <div class="g-start-2 bg-light" style="grid-row: 2">Second Column</div>
          <div class="g-start-3 bg-warning" style="grid-row: 3">Third Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Gaps

只修改 row-gap 即可更改网格中的垂直间隙。如果需要，可以使用 .grid*s and the *row-gap 和 column-gap 来调整间隙。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="row-gap: 0;">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-6 bg-warning">Second Column</div>

          <div class="g-col-6 bg-info">Third Column</div>
          <div class="g-col-6 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

你可以为垂直 gap*s using inline style or the CSS variable *--bs-gap 和水平 gap*s using inline style or the CSS variable *--bs-gap 指定一个或一对值。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-gap: .25rem 1rem;">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-6 bg-warning">Second Column</div>

          <div class="g-col-6 bg-info">Third Column</div>
          <div class="g-col-6 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Sass

CSS Grid 的一个缺点是，编译的 CSS 中生成类的数量由 $grid-columns 和 $grid-gutter-width Sass 变量的值预先确定。

更改默认 Sass 变量后，重新编译 CSS。
若要增强现有的类，可以使用内联或自定义样式。

你可以使用内联样式和预定义的 CSS Grid 列类（例如 .g-col-4 ）修改列计数、间隙大小和大小。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - CSS Grid</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h2 class="text-center">Saas</h2>
  <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
    <div class="row">
      <div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
        <div class="bg-info" style="grid-column: span 14;">First Column</div>
        <div class="g-col-4 bg-warning">Second Column</div>
      </div>
    </div>
  </div>
</body>
</html>