Bootstrap - 网格系统


本章将讨论 Bootstrap 网格系统。在Bootstrap中,网格系统允许跨页面最多12列,并使用flexbox构建

基本示例

  • Bootstrap 的网格系统是一种响应式布局工具,它使用容器、行和列来对齐内容。

  • 使用.container类作为响应式固定宽度容器。

例子

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

    <!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),从而允许您控制每个断点处的容器和列的大小和Behave。

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

  • 行是列的包装。每列都包含水平填充。然后将此填充应用于具有负边距的行。以这种方式,列中的所有内容都是左对齐的。

  • Rows 支持用于统一列大小调整的修改类用于更改文本间距的装订线类。

  • 列非常灵活。您可以使用每行可用的 12 个模板列之一创建具有任意数量列的各种元素组合。

  • 列宽以百分比形式设置,以适应父元素的流动性和相对大小。

  • 装订线具有响应性和可定制性。它们可用于所有视口,并且与margin 和 padding 的大小相同。您可以使用.gx-*(对于水平装订线)、. gy-*(对于垂直装订线)、. g-*(对于所有装订线)和.g-0来删除装订线来修改装订线。

  • 要创建更多语义标记,您可以使用预定义网格的源 Sass mixins。

Bootstrap网格系统中有六个类:

  • 超小 ( .col-xs )

  • 小 ( .col-sm- )

  • 中 ( .col-md- )

  • 大 ( .col-lg- )

  • 超大 ( .col-xl- )

  • 特大号 ( .col-xxl- )

下表显示了网格在这些断点上的变化情况:

特小
<576px

≥576px
中等
≥768px

≥992px
超大
≥1200px
XX 大
≥1400px
容器最大宽度

无(自动) 540像素 720像素 960像素 1140像素 1320像素
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
列数 12 - - - - -
天沟宽度 1.5rem(两侧边距为 0.75rem。) - - - - -
定制排水沟 是的 - - - - -
可嵌套 是的 - - - - -
列排序 是的 - - - - -

自动布局列

为了在没有显式编号类的情况下轻松调整列大小,请使用特定于断点的列类,例如.col-sm-6

等宽

  • 使用等宽网格系统创建大小相等的网格。

  • 两种网格布局适用于从xsxxl的任何设备尺寸。对于每个断点,您可以添加许多无单位类,并且每个列/行将具有相同的宽度。

例子

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

    <!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>

设置一列宽度

  • 您可以选择一列宽度,其他列会围绕该宽度自动调整大小。

  • 使用网格类、混合或内联宽度。无论中心列的宽度如何,您都可以调整其他列的大小。

例子

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

    <!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类根据内容的自然宽度调整列的大小。

例子

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

    <!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 中,网格有六层预定义类,用于创建复杂的响应式布局。您可以将列/行自定义为小型、中型、大型或超大型设备。

所有断点

使用.col.col-*类来实现在所有尺寸的设备上保持一致的网格。如果您需要特定大小的列,请使用编号类。

例子

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

  <!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-*类构建一个简单的网格系统,该系统堆叠在超小型和小型设备上,并在较大的设备上变成水平的。

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

例子

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

  <!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>

连连看

为每个层使用各种类的组合,以便根据您的需要轻松地将列堆叠在某些网格层中。

例子

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

  <!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*类中。

  • 各个列包含在.col*类中。

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

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

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

例子

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

  <!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类创建三个不同的列。

例子

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

  <!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类创建行和列的网格。

例子

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

  <!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类创建四个不同的列。

例子

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

  <!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-1row-cols-sm-3row-cols-md-6类。

例子

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

  <!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。

例子

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

  <!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 列)。

例子

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

  <!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>