笙亿网络策划

Bootstrap 网格系统怎么用？

约 41 分钟读完 0 阅
文章导读
上一个 测验 下一个 本章将讨论 Bootstrap 栅格系统。在 Bootstrap 中，栅格系统允许页面最多有 12 列，并基于 flexbox 构建。
📋 目录
  1. 壹 基本示例
  2. 贰 工作原理
  3. 叁 自动布局列
  4. 肆 等宽列
  5. 伍 设置单列宽度
  6. 陆 可变宽度内容
  7. 柒 响应式类
  8. 捌 所有断点
  9. 玖 从堆叠到水平排列
  10. 拾 混合搭配
A A

Bootstrap - 栅格系统

上一个
测验
下一个

本章将讨论 Bootstrap 栅格系统。在 Bootstrap 中，栅格系统允许页面最多有 12 列，并基于 flexbox 构建。

基本示例

  • Bootstrap 的栅格系统是一个响应式布局工具，使用 container、row 和 column 来对齐内容。

  • 使用 .container class 创建响应式固定宽度容器。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - 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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <div class="row mt-2">
          <div class="col p-2 bg-primary">
            First Column
          </div>
          <div class="col p-2 bg-warning">
            Second Column
          </div>
          <div class="col p-2 bg-info">
            Third Column
          </div>
        </div>
      </div>
    </body>
    </html>

工作原理

  • Bootstrap 栅格支持六个响应式断点。断点会影响其以上的所有尺寸（如 sm、md、lg、xl、xxl），允许您在每个断点控制容器和列的尺寸及行为。

  • 容器用于居中并水平填充您的内容。使用 .container 获取响应式像素宽度，或使用 .container-fluid 在所有视口和设备尺寸下获取全宽。对于各种断点，使用响应式容器类。

  • 行是列的包装器。每列包含水平的 padding。这种 padding 通过负外边距应用到行上。以这种方式，列中的所有内容都会左对齐。

  • 行支持修改类，用于统一列尺寸，以及 gutter 类，用于更改文本间距。

  • 列极其灵活。您可以使用每行可用的 12 个模板列，以任意数量的列创建各种元素组合。

  • 列宽以百分比设置，实现相对于父元素的流体和相对尺寸。

  • Gutter 是响应式的且可自定义。它们适用于所有视口，与 margin 和 padding 尺寸相同。您可以使用 .gx-*（水平 gutter）、.gy-*（垂直 gutter）、.g-*（所有 gutter）以及 .g-0（移除 gutter）来修改 gutter。

  • 为了创建更具语义化的标记，您可以使用预定义栅格的源 Sass mixins。

Bootstrap 栅格系统中有六个类：

  • 超小 (.col-xs)

  • 小 (.col-sm-)

  • 中 (.col-md-)

  • 大 (.col-lg-)

  • 超大 (.col-xl-)

  • 特大 (.col-xxl-)

栅格在这些断点上的变化如下表所示：

超小
<576px		 小
576px		 中
768px		 大
992px		 X-大
1200px		 XX-大
1400px
容器最大宽度 None (auto) 540px 720px 960px 1140px 1320px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
列数 12 - - - - -
Gutter 宽度 1.5rem (.75rem margin on both sides.) - - - - -
自定义 gutter Yes - - - - -
可嵌套 Yes - - - - -
列排序 Yes - - - - -

自动布局列

为了轻松实现列尺寸，而无需显式编号类，请使用特定断点的列类，如 .col-sm-6。

等宽列

  • 使用等宽 grid system 来创建等大小的网格。

  • 两种网格布局适用于从 xs 到 xxl 的任何设备尺寸。对于每个断点，你可以添加多个无单位的 class，每个列/行将具有相同的宽度。

示例

你可以使用 Edit & Run 选项来编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - 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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <h5>Equal columns</h5>
        <div class="row mt-2">
          <div class="col  p-2 bg-primary">
            First Column
          </div>
          <div class="col  p-2 bg-info">
            Second Column
          </div>
        </div>
        <h5>Equal rows</h5>
        <div class="col mt-2">
          <div class="row  p-2 bg-warning text-white">
            First Row
          </div>
          <div class="row  p-2 bg-secondary text-white">
            Second Row
          </div>
          <div class="row  p-2 bg-success text-white">
            Third Row
          </div>
        </div>
      </div>
    </body>
    </html>

设置单列宽度

  • 你可以选择一列的宽度，其他列会自动围绕它调整大小。

  • 使用 grid classes、mixins 或内联宽度。无论中心列的宽度如何，你都可以调整其他列的大小。

示例

你可以使用 Edit & Run 选项来编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - 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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <div class="row mt-2">
          <div class="col-6  p-2 bg-primary text-white">
            First Column (col-6)
          </div>
          <div class="col-3  p-2 bg-secondary text-white">
           Second Column (col-3)
          </div>
          <div class="col p-2 bg-warning text-white">
            Third Column (col)
          </div>
        </div>
      </div>
    </body>
    </html>

可变宽度内容

使用 col-{breakpoint}-auto 类根据内容的自然宽度来调整列的大小。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - 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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <div class="row justify-content-md-center mt-2">
          <div class="col col-lg-2  p-2 bg-primary ">
           First Column
          </div>
          <div class="col-md-auto  p-2 bg-info ">
            Second column with variable width content.
          </div>
          <div class="col col-lg-2  p-2 bg-warning">
           Third Column
          </div>
        </div>
      </div>
    </body>
    </html>

响应式类

在 Bootstrap 中，grid 有六种预定义的类层级，用于创建复杂的响应式布局。您可以为小型、中型、大型或超大型设备自定义列/行。

所有断点

使用 .col 和 .col-* 类创建在所有设备尺寸上一致的 grid。如果需要特定大小的列，则使用带编号的类。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <h5>Columns</h5>
      <div class="row mt-2">
        <div class="col p-2 bg-primary">First Column</div>
        <div class="col p-2 bg-warning">Second Column</div>
        <div class="col p-2 bg-light">Third Column</div>
      </div>
      <h5>Rows</h5>
      <div class="col mt-2">
        <div class="row-9 p-2 bg-info">First Row</div>
        <div class="row-3 p-2 bg-success">Second Row</div>
      </div>
    </div>
  </body>
  </html>

从堆叠到水平排列

使用 .col-sm-* 类来构建一个简单的栅格系统，在超小和小型设备上堆叠显示，在较大设备上变为水平排列。

注意： 调整浏览器大小以查看在各种设备上的效果。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <h5>Columns</h5>
      <div class="row mt-2">
        <div class="col-sm-6 p-2 bg-primary text-white">First Column</div>
        <div class="col-sm-3 p-2 bg-success text-white">Second Column</div>
        <div class="col-sm-2 p-2 bg-dark text-white">Third Column</div>
      </div>
      <h5>Rows</h5>
      <div class="col mt-2">
        <div class="row-sm p-2 bg-info">First row</div>
        <div class="row-sm p-2 bg-warning">Second row</div>
      </div>
    </div>
  </body>
  </html>

混合搭配

为每个断点使用各种类的组合，以便根据需要轻松地在某些栅格断点中堆叠列。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-sm-4 p-2 bg-primary text-white">First column of col-sm-4</div>
        <div class="col-3  p-2 bg-secondary text-white">Second column of col-3</div>
      </div>
      <div class="row mt-2">
        <div class="col-4 col-md-2 p-2 bg-warning text-white">First column of col-4 col-md-2</div>
        <div class="col-4 col-md-2 p-2 bg-secondary text-white">Second column of col-4 col-md-2</div>
        <div class="col-4 col-md-2 p-2 bg-info text-white">Third column of col-4 col-md-2</div>
      </div>
      <div class="row mt-2">
        <div class="col-sm-3 p-2 bg-dark text-white">First column of col-sm-3</div>
        <div class="col-md-6 p-2 bg-success text-white">Second column of col-md-6</div>
      </div>
    </div>
  </body>
  </html>

行列

  • Bootstrap 栅格提供了 row column 类来创建简单的栅格布局。

  • 单独的行包含在 .row* 类中。

  • 单独的列包含在 .col* 类中。

  • 使用 .row-cols-* 类来设置单行中的列数。

  • 使用 .row-cols-auto 根据内容调整列的大小。

使用 .row-cols-2 class 创建两个不同的列。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row row-cols-2">
        <div class="col bg-info p-2">First Row First Column</div>
        <div class="col bg-primary p-2">First Row Second Column</div>
        <div class="col bg-warning p-2">Second Row First Column</div>
      </div>
    </div>
  </body>
  </html>

使用 .row-cols-3 class 创建三个不同的列。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html> 
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container  text-center mt-2">
      <div class="row row-cols-3 mt-2">
        <div class="col bg-info p-2">First Row First Column</div>
        <div class="col bg-light p-2">First Row Second Column</div>
        <div class="col bg-primary p-2">First Row Third Column</div>
        <div class="col bg-secondary p-2">Second Row First Column</div>
        <div class="col bg-success p-2">Second Row Second Column</div>
        <div class="col bg-warning p-2">Second Row Third Column</div>
      </div>
    </div>
  </body>
  </html>

使用 row-cols-auto class 创建行和列的网格。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row row-cols-auto">
        <div class="col bg-primary p-2">First Row First Column</div>
        <div class="col bg-secondary p-2">First Row Second Column</div>
        <div class="col bg-warning p-2">First Row Third Column</div>
        <div class="col bg-info p-2">First Row Fourth Column</div>
        <div class="col bg-success p-2">First Row Fifth Column</div>
        <div class="col bg-light p-2">First Row sixth Column</div>
        <div class="col bg-danger p-2">Second Row First Column</div>
      </div>
    </div>
  </body>
  </html>

使用 row-cols-4 class 创建四个不同的列。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row row-cols-4">
        <div class="col bg-primary p-2">First Row First Column</div>
        <div class="col bg-secondary p-2">First Row Second Column</div>
        <div class="col bg-warning p-2">First Row Third Column</div>
        <div class="col bg-info p-2">First Row Fourth Column</div>
        <div class="col bg-light p-2">Second Row First Column</div>
        <div class="col bg-danger p-2">Second Row Second Column</div>
      </div>
    </div>
  </body>
  </html>

使用 row-cols-1、row-cols-sm-3 和 row-cols-md-6 class。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row row-cols-1 row-cols-sm-3 row-cols-md-6 mt-2">
        <div class="col bg-primary p-2">First Row First Column</div>
        <div class="col bg-light p-2">First Row Second Column</div>
        <div class="col bg-warning p-2">First Row Third Column</div>
        <div class="col bg-info p-2">First Row Fourth Column</div>
        <div class="col bg-danger p-2">First Row Fifth Column</div>
      </div>
    </div>
  </body>
  </html>

使用 row-cols() Sass mixin。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      .custom_grid{
        @media row-cols(2);
        @media media-breakpoint-up(lg) {
          @media row-cols(6);
        }
      }
    </style>
  </head>
  <body>
    <div class="container custom_grid text-center">
      <div class="row">
        <div class="col bg-primary p-2">First Row First Column</div>
        <div class="col bg-light p-2">First Row Second Column</div>
        <div class="col bg-warning p-2">First Row Third Column</div>
        <div class="col bg-info p-2">First Row Fourth Column</div>
        <div class="col bg-danger p-2">First Row Fifth Column</div>   
      </div>
    </div>
  </body>
  </html>

嵌套

嵌套网格系统可以在现有网格的单个单元格中添加网格的行和列。嵌套行应由一组列组成，这些列的总宽度不得超过 12（不必使用全部 12 列）。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - 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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-sm bg-primary p-2">
          First Column
        </div>
        <div class="col-sm bg-info p-2">
          <div class="container">
            <div class="row">
              <div class="col col-sm bg-light">
                Second Column
              </div>
              <div class="col col-sm bg-light">
                Second Column 
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm bg-primary p-2">
          Third Column
        </div>
      </div>
    </div>
  </body>
  </html>