Bootstrap 5 网格系统
Bootstrap 2023-08-10 09:26:56小码哥的IT人生shichen
Bootstrap 5 网格系统
网格系统
Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。
如果您不想单独使用所有 12 列，您可以将这些列组合在一起以创建更宽的列：
网格系统响应迅速，列会根据屏幕大小自动重新排列。
请确保总和等于或小于 12（不需要使用所有 12 个可用列）。
网格类
Bootstrap 5 网格系统提供六个类：
.col-(超小型设备 - 屏幕宽度小于 576px).col-sm-(小型设备 - 屏幕宽度等于或大于 576px).col-md-(中型设备 - 屏幕宽度等于或大于 768px).col-lg-(大型设备 - 屏幕宽度等于或大于 992px).col-xl-(超大型设备 - 屏幕宽度等于或大于 1200px).col-xxl-(特大型设备 - 屏幕宽度等于或大于 1400px)
组合上述类，可创建更动态和灵活的布局。
提示：每个类都是按比例放大的，所以如果你想为 sm 和 md 设置相同的宽度，你只需要规定 sm。
Bootstrap 5 网格的基本结构
以下是 Bootstrap 5 网格的基本结构：
<!-- 控制列宽，以及它们在不同设备上的显示方式 -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- 或者让 Bootstrap 自动处理布局 -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" 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 mt-3">
<h1>基本网格结构</h1>
<p>请调整浏览器窗口大小来查看效果。</p>
<p>当屏幕宽度小于 576px 时，第一行、第二行和第三行会自动堆叠在一起。</p>
<!-- 控制列宽，以及它们在不同设备上的显示方式 -->
<div class="row">
<div class="col-sm-6 bg-primary text-white">50%</div>
<div class="col-sm-6 bg-dark text-white">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-primary text-white">33.33%</div>
<div class="col-sm-4 bg-dark text-white">33.33%</div>
<div class="col-sm-4 bg-primary text-white">33.33%</div>
</div>
<br>
<!-- 或者让 Bootstrap 自动处理布局 -->
<div class="row">
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
</div>
<br>
<div class="row">
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
第一个例子：创建一行（<div class = "row">）。然后，添加所需数量的列（带有 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表一个数字，每行加起来应为 12。
第二个例子：不是给每个 col 添加一个数字，而是让 bootstrap 处理布局，来创建等宽的列：两个 "col" 元素 = 每个列的 50% 宽度，而三个列 = 每个列的 33.33% 宽度。四列 = 25% 宽度等。您还可以使用 .col-sm|md|lg|xl|xxl 使列具有响应性。
网格选项
下表总结了 Bootstrap 5 网格系统如何在不同的屏幕尺寸上工作：
| 超小型 (<576px) | 小型 (>=576px) | 中型 (>=768px) | 大型 (>=992px) | 超大型 (>=1200px) | 特大型 (>=1400px) | |
|---|---|---|---|---|---|---|
| 类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 网格行为 | 始终水平 | 折叠开始，在断点之上水平 | 折叠开始，在断点之上水平 | 折叠开始，在断点之上水平 | 折叠开始，在断点之上水平 | 折叠开始，在断点之上水平 |
| 容器宽度 | 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 |
