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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.tw/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>

響應式

要根據不同的螢幕尺寸調整佈局，請使用響應式類。例如，在較小的螢幕上以兩列開始，然後在較大的螢幕上擴充套件到三列。

示例

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

  <!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://bootstrap.tw/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>

比較所有螢幕尺寸下的兩列布局。

示例

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

  <!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://bootstrap.tw/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>

換行

當沒有更多水平空間時，網格專案會換行到下一行，間距應用於水平和垂直間距。

示例

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

  <!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://bootstrap.tw/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>

起始位置

  • 起始類是 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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.tw/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>

自動列

如果沒有網格專案上的任何類，它們將自動調整大小為 .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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://bootstrap.tw/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>

網格列類可以與此行為結合使用。

示例

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

  <!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://bootstrap.tw/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>

巢狀

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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.tw/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>

自定義

使用本地 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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://bootstrap.tw/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>

列和間距

讓我們修改列數和間距，如下所示

示例

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

  <!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://bootstrap.tw/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; 更改間距和列數。

示例

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

  <!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://bootstrap.tw/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>

新增行

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

示例

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

  <!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://bootstrap.tw/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>

間距

僅修改 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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.tw/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>

您可以使用內聯樣式或 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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.tw/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 網格的一個缺點是，編譯後的 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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://bootstrap.tw/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>
列印頁面
上一頁
下一頁
廣告