???????
目錄
前言?
網(wǎng)格系統(tǒng)
網(wǎng)格類
網(wǎng)格系統(tǒng)規(guī)則
網(wǎng)格的基本結構
網(wǎng)格選項
從堆疊到水平
自動布局列
超小型設備
超小型設備網(wǎng)格實例
自動布局列
小型設備
小型設備網(wǎng)格實例
自動布局列
中型設備
中型設備網(wǎng)格實例
自動布局列
大型設備
大型設備網(wǎng)格實例
自動布局列
超大型設備
超大型設備網(wǎng)格實例
自動布局列
超級大型設備
XXL 設備網(wǎng)格實例
網(wǎng)格實例
擴展
前言?
今天需要學習的是Bootstrap5 網(wǎng)格系統(tǒng)。
網(wǎng)格系統(tǒng)
Bootstrap 的網(wǎng)格系統(tǒng)是用 flexbox 構建的，提供了一個靈活的響應式布局系統(tǒng)，頁面上最多允許 12 列，列會根據(jù)屏幕大小自動重新排列。
如果不想單獨使用所有 12 列，可以將這些列組合在一起以創(chuàng)建更寬的列：
注意：請確?？偤偷扔诨蛐∮?12（不需要使用所有 12 個可用列）。
網(wǎng)格類
Bootstrap 5的網(wǎng)格系統(tǒng)是基于斷點的，這意味著在不同的屏幕尺寸和設備上，元素會根據(jù)指定的斷點調整大小。
Bootstrap 5 網(wǎng)格系統(tǒng)提供六個類：
- .col- 針對所有設備。
- .col-sm- 平板 - 屏幕寬度等于或大于 576px。
- .col-md- 桌面顯示器 - 屏幕寬度等于或大于 768px。
- .col-lg- 大桌面顯示器 - 屏幕寬度等于或大于 992px。
- .col-xl- 特大桌面顯示器 - 屏幕寬度等于或大于 1200px。
- .col-xxl- 超大桌面顯示器 - 屏幕寬度等于或大于 1400px。
通過組合使用這些類，可以創(chuàng)建靈活的布局，適應不同的屏幕尺寸和設備類型。例如，可以為.col-sm-*和.col-md-*設置相同的寬度，這樣在小型設備和中型設備上，元素將具有相同的寬度。
除了這些基本類，Bootstrap 5還提供了一些額外類，如.col-{breakpoint}-{size}（例如.col-sm-auto），用于更細粒度的控制和調整布局。
網(wǎng)格系統(tǒng)規(guī)則
- 網(wǎng)格需要放在設置了.container（固定寬度）或.container-fluid（全屏寬度）類的容器中，這是為了自動設置外邊距和內邊距，提供一致的布局。
- 使用.row類來創(chuàng)建水平的列組，并使用.col-*類來定義每一列的大小。（在Bootstrap中，".row"類用于創(chuàng)建網(wǎng)格布局的水平行，而".col-*"類用于定義行中的列。）
- 內容需要放置在列中，并且只有列可以是行的直接子節(jié)點。
- 預定義的類如.row和.col-sm-*可用于快速制作網(wǎng)格布局。
- 列通過填充創(chuàng)建列內容之間的間隙，這個間隙是通過.row類上的負邊距設置第一行和最后一列的偏移。
- 網(wǎng)格列是通過跨越指定的12個列來創(chuàng)建。例如，設置三個相等的列，需要使用三個.col-sm-4來設置。
- Bootstrap 5使用flexbox（彈性盒子）而不是傳統(tǒng)的浮動布局。flexbox的一大優(yōu)勢是，沒有指定寬度的網(wǎng)格列，將自動設置為等寬與等高列。
網(wǎng)格的基本結構
以下是 Bootstrap 5 網(wǎng)格的基本結構：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<style>
.text-center {
text-align: center;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>基本網(wǎng)格結構</h1>
<p>請調整瀏覽器窗口大小來查看效果。</p>
<!-- 讓 Bootstrap 自動處理布局 -->
<div class="row">
<div class="col-sm bg-primary text-white text-center">25%</div>
<div class="col-sm bg-dark text-white text-center">25%</div>
<div class="col-sm bg-primary text-white text-center">25%</div>
<div class="col-sm bg-dark text-white text-center">25%</div>
</div>
<br>
<!-- 控制列寬，以及它們在不同設備上的顯示方式 -->
<div class="row">
<div class="col-sm-4 bg-primary text-white text-center">33.33%</div>
<div class="col-sm-4 bg-dark text-white text-center">33.33%</div>
<div class="col-sm-4 bg-primary text-white text-center">33.33%</div>
</div>
<br>
<!-- 控制列寬，以及它們在不同設備上的顯示方式 -->
<div class="row">
<div class="col-sm-6 bg-primary text-white text-center">50%</div>
<div class="col-sm-6 bg-dark text-white text-center">50%</div>
</div>
<br>
<!-- 讓 Bootstrap 自動處理布局 -->
<div class="row">
<div class="col-md bg-primary text-white text-center">100%</div>
</div>
</div>
</body>
</html>運行結果：
注意：.bg-primary 和 .bg-dark 類用于設置列的背景顏色，而 .text-white 類則用于設置文本顏色為白色。?
- 第一行使用
.col-sm類來定義列，當屏幕寬度小于576px時，Bootstrap會自動處理布局，將列堆疊在一起。 - 第二行使用
.col-sm-4類來定義列，每個列占據(jù)4個單位（即1/3的行寬），無論屏幕大小如何，都保持這樣的布局。 - 第三行使用
.col-sm-6類來定義列，每個列占據(jù)6個單位（即1/2的行寬），當屏幕寬度小于576px時，Bootstrap會自動處理布局，將列堆疊在一起。 - 第四行使用
.col-md類來定義列，當屏幕寬度大于或等于768px時，該列會占據(jù)整行的寬度。
網(wǎng)格選項
下表總結了 Bootstrap 5 網(wǎng)格系統(tǒng)如何在不同的屏幕尺寸上工作：
| 超小型 (<576px) | 小型 (>=576px) | 中型 (>=768px) | 大型 (>=992px) | 超大型 (>=1200px) | 特大型 (>=1400px) | |
|---|---|---|---|---|---|---|
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 網(wǎng)格行為 | 始終水平 | 折疊開始，在斷點之上水平 | 折疊開始，在斷點之上水平 | 折疊開始，在斷點之上水平 | 折疊開始，在斷點之上水平 | 折疊開始，在斷點之上水平 |
| 容器寬度 | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| 適用于 | 手機豎屏 | 手機橫屏 | 平板電腦 | 筆記本電腦 | 筆記本電腦和臺式機 | 筆記本電腦和臺式機 |
| 列的 # | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter 寬度 | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) |
| 可嵌套 | Yes | Yes | Yes | Yes | Yes | Yes |
| 偏移 | Yes | Yes | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes | Yes | Yes |
從堆疊到水平
Bootstrap 5 的網(wǎng)格系統(tǒng)在實現(xiàn)從堆疊到水平轉變方面與前幾個版本有所不同。在 Bootstrap 5 中，網(wǎng)格系統(tǒng)的最小寬度（即堆疊到水平的閾值）被設置為 576px，而不是 Bootstrap 4 中的 768px。這意味著在屏幕寬度小于 576px 時，網(wǎng)格會從垂直堆疊變?yōu)樗脚帕小?/p>
以下是一個示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>網(wǎng)格實例</h1>
<p>本例展示了一個簡單的“堆疊到水平”的兩列布局，這意味著它會在所有屏幕上產(chǎn)生 50%/50% 的拆分，除了超小型屏幕，它會自動堆疊 (100%)：</p>
<p>請調整瀏覽器窗口大小來查看效果。</p>
<div class="row">
<div class="col-md-4 bg-primary text-center">Column 1</div>
<div class="col-md-4 bg-primary text-center">Column 2</div>
<div class="col-md-4 bg-primary text-center">Column 3</div>
</div>
</div>
</body>
</html>在上面的代碼中，我們使用了 .container-fluid 類來創(chuàng)建一個全寬度的容器，并在容器內創(chuàng)建了一個包含三個列的行。每個列都使用了 .col-md-4 類來指定其寬度，并使用 .bg-primary 和 .text-center 類來設置背景顏色和文本對齊方式。當屏幕寬度小于或等于 576px 時，這些列將從垂直堆疊變?yōu)樗脚帕小?/p>
自動布局列
在 Bootstrap 5 中，可以使用 col-* 類來創(chuàng)建自動布局的列。Bootstrap 5 的網(wǎng)格系統(tǒng)會自動根據(jù)屏幕大小調整列的寬度。要創(chuàng)建自動布局的列，需要使用 col-* 類，其中 * 是一個數(shù)字，表示該列的寬度比例。例如，col-3 表示該列的寬度是整個網(wǎng)格的 3/12，也就是 1/4。
下面是一個簡單的示例代碼，展示了如何使用 Bootstrap 5 創(chuàng)建自動布局的列：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 bg-primary text-white text-a p-3">1</div>
<div class="col-6 bg-dark text-white text-a p-3">2</div>
</div>
</div>
</body>
</html>在上面的代碼中，我們創(chuàng)建了一個包含兩列的網(wǎng)格。每列都使用了 col-* 類來指定其寬度比例。col-6 表示該列的寬度是整個網(wǎng)格的 6/12，也就是 1/2。在大屏幕設備上（大于 576px），這兩列會水平排列，形成一行。在小屏幕設備上（小于 576px），這兩列會垂直堆疊。
超小型設備
超小型設備網(wǎng)格實例
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 屏幕寬度 | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
以下是一個 Bootstrap 5 的超小型設備網(wǎng)格實例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-1 bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-1 bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>在這個例子中，我們使用了 .container-fluid 類來創(chuàng)建一個全寬度的容器，然后使用 .row 類來創(chuàng)建一個行。在行內，我們使用 .col-1 類來創(chuàng)建兩個等寬的列，它們分別占據(jù)了容器寬度的 1/12。我們還給這兩個列添加了不同的背景顏色以示區(qū)分。
注意，在超小型設備上，這兩個列會垂直堆疊，因為 Bootstrap 5 在超小型設備上默認會自動堆疊列。如果想要在超小型設備上水平顯示這兩個列，可以使用 .col-auto 類來代替 .col-* 類。
注意：請確保總和等于或小于 12（不需要使用所有 12 個可用列）：
對于 33.3% / 66.6% 的拆分，應使用?.col-4?和?.col-8（對于 50% / 50% 的拆分，您應使用?.col-6?和?.col-6）。
自動布局列
在 Bootstrap 5 中，有一種簡單的方法可以為所有設備創(chuàng)建等寬的列：只需從 .col-* 中刪除數(shù)字，并僅在 col 元素上使用 .col 類。 Bootstrap 將識別有多少列，并且每列將獲得相同的寬度：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<p>列 1</p>
</div>
<div class="col">
<p>列 2</p>
</div>
<div class="col">
<p>列 3</p>
</div>
</div>
</div>
</body>
</html>在上面的代碼中，我們使用了 .container 和 .row 類來創(chuàng)建一個容器和行，然后在行內使用了三個 .col 類來創(chuàng)建三個等寬的列。在 Bootstrap 5 中，當使用自動布局列時，每個列將自動獲得相同的寬度，無論有多少列。
需要注意的是，自動布局列適用于 Bootstrap 5 的默認網(wǎng)格系統(tǒng)，即響應式網(wǎng)格系統(tǒng)。如果需要在不同設備上顯示不同的列寬，建議使用 Bootstrap 5 的響應式布局功能，通過使用不同的類來指定不同設備的列寬。
小型設備
小型設備網(wǎng)格實例
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 屏幕寬度 | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
對于小型設備，我們希望將列拆分 25% / 75%。小型設備被定義為屏幕寬度從 576 像素到 767 像素。對于小型設備，我們將使用?.col-sm-*?類。
我們將以下類添加到兩列中：
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-sm-6 bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>在這個例子中，我們使用了 .container 類來創(chuàng)建一個容器，然后使用 .row 類來創(chuàng)建一個行。在行內，我們使用 .col-sm-6 類來創(chuàng)建兩個等寬的列，它們分別占據(jù)了容器寬度的 6/12。我們還給這兩個列添加了不同的背景顏色以示區(qū)分。
注意，在小型設備上，這兩個列會水平顯示，因為 Bootstrap 5 在小型設備上默認使用水平網(wǎng)格布局。如果想要在小型設備上垂直顯示這兩個列，可以給容器添加 .flex-column 類或者將 .row 元素嵌套在另一個 .row 元素中。
自動布局列
在 Bootstrap 5 中，有一種簡單的方法可以為所有設備創(chuàng)建等寬的列：只需從 .col-sm-* 中刪除數(shù)字，并僅在 col 元素上使用 .col-sm 類。 Bootstrap 將識別有多少列，并且每列將獲得相同的寬度。注意：如果屏幕尺寸小于 576px，列將水平堆疊。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-sm bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>中型設備
中型設備網(wǎng)格實例
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 屏幕寬度 | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
在中型設備上，50% / 50% 拆分的設計可能會更好。中型設備被定義為屏幕寬度從 768 像素到 991 像素。對于中型設備，我們將使用 .col-md-* 類：
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>?在小型設備上，請使用包含?-sm-?的類。在中型設備上，請使用包含?-md-?的類。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-md-6 bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>在這個例子中，我們使用了 .container 類來創(chuàng)建一個容器，然后使用 .row 類來創(chuàng)建一個行。在行內，我們使用 .col-md-6 類來創(chuàng)建兩個等寬的列，它們分別占據(jù)了容器寬度的 6/12。我們還給這兩個列添加了不同的背景顏色以示區(qū)分。
注意，在 Bootstrap 5 中，中型設備的屏幕寬度是 768px，因此 .col-md-* 類的效果會在這個屏幕寬度以上生效。如果想要在更小的設備上實現(xiàn)類似的效果，可以將 .col-md-* 類改為 .col-* 類，或者使用響應式類 .col-{breakpoint}-*，其中 {breakpoint} 可以是 sm、md、lg 或 xl，分別對應小、中、大和超大型設備。
自動布局列
在 Bootstrap 5 中，有一種簡單的方法可以為所有設備創(chuàng)建等寬的列：只需從 .col-md-* 中刪除數(shù)字，并僅在 col 元素上使用 .col-md 類。 Bootstrap 將識別有多少列，并且每列將獲得相同的寬度。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-md bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>大型設備
大型設備網(wǎng)格實例
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 屏幕寬度 | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
在大型設備上，33% / 66% 的拆分設計可能會更好。大型設備被定義為屏幕寬度從 992 像素到 1199 像素。對于大型設備，我們將使用 .col-lg-* 類：
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>在小型設備上，請使用包含 -sm- 的類。在中型設備上，請使用包含 -md- 的類。在大型設備上，請使用包含 -lg- 的類。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-lg-4 bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>在這個例子中，我們使用了 .container 類來創(chuàng)建一個容器，然后使用 .row 類來創(chuàng)建一個行。在行內，我們使用 .col-lg-8 和 .col-lg-4 類來創(chuàng)建兩個不同寬度的列，它們分別占據(jù)了容器寬度的 8/12 和 4/12。我們還給這兩個列添加了不同的背景顏色以示區(qū)分。
注意，在 Bootstrap 5 中，大型設備的屏幕寬度是 992px，因此 .col-lg-* 類的效果會在這個屏幕寬度以上生效。如果想要在更小的設備上實現(xiàn)類似的效果，可以將 .col-lg-* 類改為 .col-* 類，或者使用響應式類 .col-{breakpoint}-*，其中 {breakpoint} 可以是 sm、md、lg 或 xl，分別對應小、中、大和超大型設備。
自動布局列
在 Bootstrap 5 中，有一種簡單的方法可以為所有設備創(chuàng)建等寬的列：只需從 .col-lg-* 中刪除數(shù)字，并僅在 col 元素上使用 .col-lg 類。 Bootstrap 將識別有多少列，并且每列將獲得相同的寬度。注意：如果屏幕尺寸小于 992px，列將水平堆疊。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-lg bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>超大型設備
超大型設備網(wǎng)格實例
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 屏幕寬度 | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
在 xlarge 設備上，20% / 80% 拆分的設計可能會更好。超大設備被定義為屏幕寬度為 1200 像素及以上。對于 xlarge 設備，我們將使用 .col-xl-* 類：
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-3 bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-xl-9 bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>在這個例子中，我們使用了 .container 類來創(chuàng)建一個容器，然后使用 .row 類來創(chuàng)建一個行。在行內，我們使用 .col-xl-3 和 .col-xl-9 類來創(chuàng)建兩個不同寬度的列，它們分別占據(jù)了容器寬度的 3/12 和 9/12。我們還給這兩個列添加了不同的背景顏色以示區(qū)分。
注意，在 Bootstrap 5 中，超大型設備的屏幕寬度是 1200px，因此 .col-xl-* 類的效果會在這個屏幕寬度以上生效。如果想要在更小的設備上實現(xiàn)類似的效果，可以將 .col-xl-* 類改為 .col-* 類，或者使用響應式類 .col-{breakpoint}-*，其中 {breakpoint} 可以是 sm、md、lg 或 xl，分別對應小、中、大和超大型設備。
自動布局列
在 Bootstrap 5 中，有一種簡單的方法可以為所有設備創(chuàng)建等寬的列：只需從 .col-xl-* 中刪除數(shù)字，并僅在 col 元素上使用 .col-xl 類。 Bootstrap 將識別有多少列，并且每列將獲得相同的寬度。注意：如果屏幕尺寸小于 1200px，列將水平堆疊。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-xl bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>超級大型設備
XXL 設備網(wǎng)格實例
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 屏幕寬度 | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 col-xxl-3">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 col-xxl-9">....</div><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6 bg-primary text-white">
<p>列 1</p>
</div>
<div class="col-xxl-6 bg-dark text-white">
<p>列 2</p>
</div>
</div>
</div>
</body>
</html>在這個例子中，我們使用了 .container-fluid 類來創(chuàng)建一個全寬度的容器，然后使用 .row 類來創(chuàng)建一個行。在行內，我們使用 .col-xxl-6 類來創(chuàng)建兩個等寬的列，它們分別占據(jù)了容器寬度的 50%。注意，這是在假設 XXL 設備的屏幕寬度是 1600px 的基礎上設置的。
在實際應用中，由于 Bootstrap 5 的柵格系統(tǒng)是基于 CSS 的媒體查詢構建的，因此 XXL 設備的具體斷點取決于你的 CSS 配置。你可以在 CSS 文件中自定義斷點的值，以適應你的 XXL 設備。
網(wǎng)格實例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 行 -->
<div class="row">
<!-- 小型設備上的列 -->
<div class="col-12 bg-success text-white">
<!-- 內容 -->
<p>這是適用于小型設備的列，占據(jù)了整個容器寬度。</p>
</div>
<!-- 小型設備上的列 -->
<div class="col-sm-6 bg-warning text-white">
<!-- 內容 -->
<p>這是適用于小型設備的列，占據(jù)了容器寬度的 50%。</p>
</div>
<!-- 中型設備上的列 -->
<div class="col-md-4 bg-dark text-white">
<!-- 內容 -->
<p>這是適用于中型設備的列，占據(jù)了容器寬度的 25%。</p>
</div>
<!-- 大型設備上的列 -->
<div class="col-lg-3 bg-primary text-white">
<!-- 內容 -->
<p>這是適用于大型設備的列，占據(jù)了容器寬度的 12.5%。</p>
</div>
<!-- 超大型設備上的列 -->
<div class="col-xl-2 bg-dark text-white">
<!-- 內容 -->
<p>這是適用于超大型設備的列，占據(jù)了容器寬度的 8.33%。</p>
</div>
<!-- 超大型設備上的列 -->
<div class="col-xxl-1 bg-primary text-white">
<!-- 內容 -->
<p>這是適用于超大型設備的列，占據(jù)了容器寬度的 6.25%。</p>
</div>
</div>
</div>
</body>
</html>擴展
無 gutter 指的是在 Bootstrap 柵格系統(tǒng)中，列與列之間沒有水平方向的間隔。在默認情況下，Bootstrap 中的柵格系統(tǒng)會為每個列元素添加一個左右邊距（gutter），以保持它們之間的間隔。但是，如果希望去除這些間隔，可以使用無 gutter 的樣式。
- 如需更改列之間的間距（額外的空間），請使用任何 .g-1|2|3|4|5 類（.g-4 是默認值）。
- 如需完全刪除裝訂線（gutter），請使用 .g-0。
實例：文章來源：http://www.zghlxwxcb.cn/news/detail-690789.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row g-0">
<div class="col-4 bg-success text-white">
教育部：要保障學生每天校內、校外各1個小時體育活動時間。教育部：要保障學生每天校內、校外各1個小時體育活動時間。教育部：要保障學生每天校內、校外各1個小時體育活動時間。
</div>
<div class="col-4 bg-warning text-white">
七部門：力爭實現(xiàn)新能源汽車今年全年銷量900萬輛左右，同比增長約30%。七部門：力爭實現(xiàn)新能源汽車今年全年銷量900萬輛左右，同比增長約30%。七部門：力爭實現(xiàn)新能源汽車今年全年銷量900萬輛左右，同比增長約30%。
</div>
<div class="col-4 bg-dark text-white">
央行：自9月15日起，下調金融機構外匯存款準備金率2個百分點。央行：自9月15日起，下調金融機構外匯存款準備金率2個百分點。央行：自9月15日起，下調金融機構外匯存款準備金率2個百分點。
</div>
</div>
</div>
</body>
</html>運動結果：
文章來源地址http://www.zghlxwxcb.cn/news/detail-690789.html
到了這里，關于學習Bootstrap 5的第二天的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
