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），允許您在每個斷點處控制容器和列的大小和行為。
容器可以居中並水平填充您的內容。使用 .container 類建立響應式畫素寬度容器，或使用 .container-fluid 類建立在所有視口和裝置尺寸下都具有全寬的容器。對於各種斷點，使用響應式容器類。
行是列的包裝器。每列包含水平填充。然後，此填充透過負邊距應用於行。這樣，列中的所有內容都左對齊。
行支援修改類以實現統一的列大小列大小和間距類以更改文字的間距。
列非常靈活。您可以使用每行可用的 12 個模板列之一，建立各種元素組合和任意數量的列。
列寬以百分比設定，以便相對於父元素進行靈活和相對大小調整。
間距是響應式且可自定義的。它們適用於所有視口，並且與邊距和填充的大小相同。您可以使用 .gx-*（用於水平間距）、.gy-*（用於垂直間距）、.g-*（用於所有間距）和 .g-0（用於移除間距）來修改間距。
要建立更多語義標記，您可以使用預定義的網格源 Sass 混合。

Bootstrap 網格系統中有六個類

超小 (.col-xs)
小 (.col-sm-)
中 (.col-md-)
大 (.col-lg-)
超大 (.col-xl-)
特大 (.col-xxl-)

網格在這些斷點上的變化情況如下表所示

	超小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	超大 ≥1200px	特大 ≥1400px
容器最大寬度	無 (自動)	540px	720px	960px	1140px	1320px
類字首	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
# 列數	12	-	-	-	-	-
間距寬度	1.5rem（兩側各 0.75rem 邊距。）	-	-	-	-	-
自定義間距	是	-	-	-	-	-
巢狀	是	-	-	-	-	-
列排序	是	-	-	-	-	-

自動佈局列

為了輕鬆調整列大小而無需顯式編號類，請使用特定於斷點的列類，例如 .col-sm-6。

等寬

使用等寬網格系統建立等大小的網格。
兩種網格佈局適用於從 xs 到 xxl 的任何裝置尺寸。對於每個斷點，您可以新增許多無單位類，並且每個列/行都將具有相同的寬度。

示例

您可以使用 編輯和執行選項編輯並嘗試執行此程式碼。

    <!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-1、row-cols-sm-3 和 row-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 混合。

示例

您可以使用 編輯和執行選項編輯並嘗試執行此程式碼。

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

列印頁面

上一個

下一個