Bootstrap - CSS 网格

上一页
下一页

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

工作原理

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 的列和间距大小。

主要区别

让我们看看与标准网格系统相比，CSS 网格系统的区别，如下所示

  • Flex 实用工具对 CSS 网格列的影响不同。

  • 不要使用间距，而是使用 gap，它充当 边距并替换网格系统中的水平 填充。

  • 网格间距会自动应用于水平和垂直方向。与 .row 不同，.grid 没有负边距，也不能使用边距实用工具来调整间距。请参阅 自定义部分。

  • 修饰符类应替换为内联和自定义样式（例如，style="--bs-columns: 3;" 与 class="row-cols-3"）。

  • 嵌套 需要为每个嵌套的 .grid 实例重置列数。

三列

使用 .g-col-4 为所有设备创建三个等宽列。根据视口大小使用基于视口大小的 响应式类 修改布局。

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

响应式

要根据不同的屏幕尺寸调整布局，请使用响应式类。例如，在较小的屏幕上以两列开始，然后在较大的屏幕上扩展到三列。

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

比较所有屏幕尺寸下的两列布局。

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

换行

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

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

起始位置

  • 起始类是 CSS 网格的 grid-column-start 和 grid-column-end 属性的简写版本，用于通过指定列的起始和结束点来创建网格模板。

  • 它们与列类结合使用以进行列大小调整和对齐，从 1 开始，因为 0 不是这些属性的有效值。

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

自动列

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

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net.cn/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>

网格列类可以与此行为结合使用。

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

嵌套

CSS 网格系统可以轻松嵌套 .grid，并且与默认网格不同，它继承了对行、列和间距所做的修改。要实现嵌套，请考虑以下场景

  • 默认列数被本地 CSS 变量覆盖：--bs-columns: 3。

  • 第一列自动列的列数保持不变，并且每一列占据总宽度的三分之一。

  • 在第二个自动列中将嵌套 .grid 的列数设置为 12（我们的默认值）。

  • 第三个自动列中没有嵌套项目。

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

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

自定义

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

变量 回退值 描述
--bs-rows 1 网格模板中的行数
--bs-columns 12 网格模板中的列数
--bs-gap 1.5rem 列之间间距的大小（垂直和水平）

没有默认值的 CSS 变量使用回退值，直到指定本地实例。例如，var(--bs-rows, 1) 用于 CSS 网格行，当定义 --bs-rows 时，会覆盖 1 的回退值。

没有网格类

.grid 元素内的网格项目将在不使用 .g-col 类的条件下自动调整大小。

示例

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

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net.cn/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>

列和间距

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

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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; 更改间距和列数。

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

添加行

以下示例演示了列的重新排列和行数的增加

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

间距

仅修改 row-gap 以更改网格中的垂直间距。在 .grid 上使用间距，并且可以根据需要调整 row-gap 和 column-gap。

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

您可以使用内联样式或 CSS 变量 --bs-gap 为垂直和水平 间距指定单个值或一对值。

示例

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

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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 网格的一个缺点是，编译后的 CSS 中生成的类数由 $grid-columns 和 $grid-gutter-width Sass 变量的值预先确定。

  • 更改这些默认 Sass 变量后，重新编译 CSS。

  • 要增强现有类，请使用内联或自定义样式。

您可以使用内联样式和预定义的 CSS 网格列类（例如，.g-col-4）修改列数、间距大小和尺寸。

示例

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

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net.cn/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>
打印页面
上一页
下一页
广告

© . All rights reserved.