学习Bootstrap 5的第二天

已于 2023-09-02 10:42:38 修改
阅读量404 收藏 2
点赞数 2
分类专栏： Bootstrap 文章标签： 学习 bootstrap 前端
于 2023-09-02 10:28:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74293254/article/details/132623960
版权

​​​​​​​

目录

前言 

网格系统

网格类

网格系统规则

网格的基本结构

网格选项

从堆叠到水平

自动布局列

超小型设备

超小型设备网格实例

自动布局列

小型设备

小型设备网格实例

自动布局列

中型设备

中型设备网格实例

自动布局列

大型设备

大型设备网格实例

自动布局列

超大型设备

超大型设备网格实例

自动布局列

超级大型设备

XXL 设备网格实例

网格实例

扩展

前言 

今天需要学习的是Bootstrap5 网格系统。

网格系统

Bootstrap 的网格系统是用 flexbox 构建的，提供了一个灵活的响应式布局系统，页面上最多允许 12 列，列会根据屏幕大小自动重新排列。

如果不想单独使用所有 12 列，可以将这些列组合在一起以创建更宽的列：

注意：请确保总和等于或小于 12（不需要使用所有 12 个可用列）。

网格类

Bootstrap 5的网格系统是基于断点的，这意味着在不同的屏幕尺寸和设备上，元素会根据指定的断点调整大小。

Bootstrap 5 网格系统提供六个类：

  • .col- 针对所有设备。
  • .col-sm- 平板 - 屏幕宽度等于或大于 576px。
  • .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
  • .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
  • .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
  • .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。

通过组合使用这些类，可以创建灵活的布局，适应不同的屏幕尺寸和设备类型。例如，可以为.col-sm-*和.col-md-*设置相同的宽度，这样在小型设备和中型设备上，元素将具有相同的宽度。

除了这些基本类，Bootstrap 5还提供了一些额外类，如.col-{breakpoint}-{size}（例如.col-sm-auto），用于更细粒度的控制和调整布局。

网格系统规则

  1. 网格需要放在设置了.container（固定宽度）或.container-fluid（全屏宽度）类的容器中，这是为了自动设置外边距和内边距，提供一致的布局。
  2. 使用.row类来创建水平的列组，并使用.col-*类来定义每一列的大小。（在Bootstrap中，".row"类用于创建网格布局的水平行，而".col-*"类用于定义行中的列。）
  3. 内容需要放置在列中，并且只有列可以是行的直接子节点。
  4. 预定义的类如.row和.col-sm-*可用于快速制作网格布局。
  5. 列通过填充创建列内容之间的间隙，这个间隙是通过.row类上的负边距设置第一行和最后一列的偏移。
  6. 网格列是通过跨越指定的12个列来创建。例如，设置三个相等的列，需要使用三个.col-sm-4来设置。
  7. Bootstrap 5使用flexbox（弹性盒子）而不是传统的浮动布局。flexbox的一大优势是，没有指定宽度的网格列，将自动设置为等宽与等高列。

网格的基本结构

以下是 Bootstrap 5 网格的基本结构：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</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">
		<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>基本网格结构</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类来定义列，每个列占据4个单位（即1/3的行宽），无论屏幕大小如何，都保持这样的布局。
  • 第三行使用.col-sm-6类来定义列，每个列占据6个单位（即1/2的行宽），当屏幕宽度小于576px时，Bootstrap会自动处理布局，将列堆叠在一起。
  • 第四行使用.col-md类来定义列，当屏幕宽度大于或等于768px时，该列会占据整行的宽度。

网格选项

下表总结了 Bootstrap 5 网格系统如何在不同的屏幕尺寸上工作：

超小型 (<576px)小型 (>=576px)中型 (>=768px)大型 (>=992px)超大型 (>=1200px)特大型 (>=1400px)
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
网格行为始终水平折叠开始，在断点之上水平折叠开始，在断点之上水平折叠开始，在断点之上水平折叠开始，在断点之上水平折叠开始，在断点之上水平
容器宽度None (auto)540px720px960px1140px1320px
适用于手机竖屏手机横屏平板电脑笔记本电脑笔记本电脑和台式机笔记本电脑和台式机
列的 #121212121212
Gutter 宽度1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )1.5rem (在列的每侧 .75rem )
可嵌套YesYesYesYesYesYes
偏移YesYesYesYesYesYes
列排序YesYesYesYesYesYes

从堆叠到水平

Bootstrap 5 的网格系统在实现从堆叠到水平转变方面与前几个版本有所不同。在 Bootstrap 5 中，网格系统的最小宽度（即堆叠到水平的阈值）被设置为 576px，而不是 Bootstrap 4 中的 768px。这意味着在屏幕宽度小于 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 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">
			<h1>网格实例</h1>
			<p>本例展示了一个简单的“堆叠到水平”的两列布局，这意味着它会在所有屏幕上产生 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 类来创建一个全宽度的容器，并在容器内创建了一个包含三个列的行。每个列都使用了 .col-md-4 类来指定其宽度，并使用 .bg-primary 和 .text-center 类来设置背景颜色和文本对齐方式。当屏幕宽度小于或等于 576px 时，这些列将从垂直堆叠变为水平排列。

自动布局列

在 Bootstrap 5 中，可以使用 col-* 类来创建自动布局的列。Bootstrap 5 的网格系统会自动根据屏幕大小调整列的宽度。要创建自动布局的列，需要使用 col-* 类，其中 * 是一个数字，表示该列的宽度比例。例如，col-3 表示该列的宽度是整个网格的 3/12，也就是 1/4。

下面是一个简单的示例代码，展示了如何使用 Bootstrap 5 创建自动布局的列：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</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">
			<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>

在上面的代码中，我们创建了一个包含两列的网格。每列都使用了 col-* 类来指定其宽度比例。col-6 表示该列的宽度是整个网格的 6/12，也就是 1/2。在大屏幕设备上（大于 576px），这两列会水平排列，形成一行。在小屏幕设备上（小于 576px），这两列会垂直堆叠。

超小型设备

超小型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
屏幕宽度<576px>=576px>=768px>=992px>=1200px>=1400px

以下是一个 Bootstrap 5 的超小型设备网格实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</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">  
		  <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 类来创建一个全宽度的容器，然后使用 .row 类来创建一个行。在行内，我们使用 .col-1 类来创建两个等宽的列，它们分别占据了容器宽度的 1/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意，在超小型设备上，这两个列会垂直堆叠，因为 Bootstrap 5 在超小型设备上默认会自动堆叠列。如果想要在超小型设备上水平显示这两个列，可以使用 .col-auto 类来代替 .col-* 类。

注意：请确保总和等于或小于 12（不需要使用所有 12 个可用列）：

对于 33.3% / 66.6% 的拆分，应使用 .col-4 和 .col-8（对于 50% / 50% 的拆分，您应使用 .col-6 和 .col-6）。

自动布局列

在 Bootstrap 5 中，有一种简单的方法可以为所有设备创建等宽的列：只需从 .col-* 中删除数字，并仅在 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 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">
			<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 类来创建一个容器和行，然后在行内使用了三个 .col 类来创建三个等宽的列。在 Bootstrap 5 中，当使用自动布局列时，每个列将自动获得相同的宽度，无论有多少列。

需要注意的是，自动布局列适用于 Bootstrap 5 的默认网格系统，即响应式网格系统。如果需要在不同设备上显示不同的列宽，建议使用 Bootstrap 5 的响应式布局功能，通过使用不同的类来指定不同设备的列宽。

小型设备

小型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.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 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">
			<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 类来创建一个容器，然后使用 .row 类来创建一个行。在行内，我们使用 .col-sm-6 类来创建两个等宽的列，它们分别占据了容器宽度的 6/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意，在小型设备上，这两个列会水平显示，因为 Bootstrap 5 在小型设备上默认使用水平网格布局。如果想要在小型设备上垂直显示这两个列，可以给容器添加 .flex-column 类或者将 .row 元素嵌套在另一个 .row 元素中。

自动布局列

在 Bootstrap 5 中，有一种简单的方法可以为所有设备创建等宽的列：只需从 .col-sm-* 中删除数字，并仅在 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 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">
			<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>

中型设备

中型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.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 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">
			<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 类来创建一个容器，然后使用 .row 类来创建一个行。在行内，我们使用 .col-md-6 类来创建两个等宽的列，它们分别占据了容器宽度的 6/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意，在 Bootstrap 5 中，中型设备的屏幕宽度是 768px，因此 .col-md-* 类的效果会在这个屏幕宽度以上生效。如果想要在更小的设备上实现类似的效果，可以将 .col-md-* 类改为 .col-* 类，或者使用响应式类 .col-{breakpoint}-*，其中 {breakpoint} 可以是 sm、md、lg 或 xl，分别对应小、中、大和超大型设备。

自动布局列

在 Bootstrap 5 中，有一种简单的方法可以为所有设备创建等宽的列：只需从 .col-md-* 中删除数字，并仅在 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 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">
			<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>

大型设备

大型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.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 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">
			<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 类来创建一个容器，然后使用 .row 类来创建一个行。在行内，我们使用 .col-lg-8 和 .col-lg-4 类来创建两个不同宽度的列，它们分别占据了容器宽度的 8/12 和 4/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意，在 Bootstrap 5 中，大型设备的屏幕宽度是 992px，因此 .col-lg-* 类的效果会在这个屏幕宽度以上生效。如果想要在更小的设备上实现类似的效果，可以将 .col-lg-* 类改为 .col-* 类，或者使用响应式类 .col-{breakpoint}-*，其中 {breakpoint} 可以是 sm、md、lg 或 xl，分别对应小、中、大和超大型设备。

自动布局列

在 Bootstrap 5 中，有一种简单的方法可以为所有设备创建等宽的列：只需从 .col-lg-* 中删除数字，并仅在 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 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">
			<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>

超大型设备

超大型设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.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 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">
			<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 类来创建一个容器，然后使用 .row 类来创建一个行。在行内，我们使用 .col-xl-3 和 .col-xl-9 类来创建两个不同宽度的列，它们分别占据了容器宽度的 3/12 和 9/12。我们还给这两个列添加了不同的背景颜色以示区分。

注意，在 Bootstrap 5 中，超大型设备的屏幕宽度是 1200px，因此 .col-xl-* 类的效果会在这个屏幕宽度以上生效。如果想要在更小的设备上实现类似的效果，可以将 .col-xl-* 类改为 .col-* 类，或者使用响应式类 .col-{breakpoint}-*，其中 {breakpoint} 可以是 sm、md、lg 或 xl，分别对应小、中、大和超大型设备。

自动布局列

在 Bootstrap 5 中，有一种简单的方法可以为所有设备创建等宽的列：只需从 .col-xl-* 中删除数字，并仅在 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 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">
			<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 设备网格实例

XSmallSmallMediumLargeExtra LargeXXL
类前缀.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 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">
			<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 类来创建一个全宽度的容器，然后使用 .row 类来创建一个行。在行内，我们使用 .col-xxl-6 类来创建两个等宽的列，它们分别占据了容器宽度的 50%。注意，这是在假设 XXL 设备的屏幕宽度是 1600px 的基础上设置的。

在实际应用中，由于 Bootstrap 5 的栅格系统是基于 CSS 的媒体查询构建的，因此 XXL 设备的具体断点取决于你的 CSS 配置。你可以在 CSS 文件中自定义断点的值，以适应你的 XXL 设备。

网格实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</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">
			<!-- 行 -->
			<div class="row">

				<!-- 小型设备上的列 -->
				<div class="col-12 bg-success text-white">
					<!-- 内容 -->
					<p>这是适用于小型设备的列，占据了整个容器宽度。</p>
				</div>

				<!-- 小型设备上的列 -->
				<div class="col-sm-6 bg-warning text-white">
					<!-- 内容 -->
					<p>这是适用于小型设备的列，占据了容器宽度的 50%。</p>
				</div>

				<!-- 中型设备上的列 -->
				<div class="col-md-4 bg-dark text-white">
					<!-- 内容 -->
					<p>这是适用于中型设备的列，占据了容器宽度的 25%。</p>
				</div>

				<!-- 大型设备上的列 -->
				<div class="col-lg-3 bg-primary text-white">
					<!-- 内容 -->
					<p>这是适用于大型设备的列，占据了容器宽度的 12.5%。</p>
				</div>

				<!-- 超大型设备上的列 -->
				<div class="col-xl-2 bg-dark text-white">
					<!-- 内容 -->
					<p>这是适用于超大型设备的列，占据了容器宽度的 8.33%。</p>
				</div>

				<!-- 超大型设备上的列 -->
				<div class="col-xxl-1 bg-primary text-white">
					<!-- 内容 -->
					<p>这是适用于超大型设备的列，占据了容器宽度的 6.25%。</p>
				</div>

			</div>
		</div>
	</body>
</html>

扩展

无 gutter 指的是在 Bootstrap 栅格系统中，列与列之间没有水平方向的间隔。在默认情况下，Bootstrap 中的栅格系统会为每个列元素添加一个左右边距（gutter），以保持它们之间的间隔。但是，如果希望去除这些间隔，可以使用无 gutter 的样式。

  1. 如需更改列之间的间距（额外的空间），请使用任何 .g-1|2|3|4|5 类（.g-4 是默认值）。
  2. 如需完全删除装订线（gutter），请使用 .g-0。

实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</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">
			<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">
					七部门：力争实现新能源汽车今年全年销量900万辆左右，同比增长约30%。七部门：力争实现新能源汽车今年全年销量900万辆左右，同比增长约30%。七部门：力争实现新能源汽车今年全年销量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>

运动结果：

程序员老李头
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap（bootstrap的栅格系统、bootstrap的布局容器）
m0_46420078的博客
02-03 6003
一、bootstrap的栅格系统 用固定的格子进行网页布局，又称为网格布局 1、响应式栅格系统 使用响应式栅格系统进行页面布局时，网页根据不同的显示终端展示不同的页面结构。 例如，在校屏幕上由某些模块将按照不同的方式排列或者被隐藏。 2、创建使用响应式栅格系统页面的步骤（1）创建html页面 定义页头、导航、主要内容、侧边栏和页尾部分的HTML结构代 码（2）编写css样式 页头和页尾分别显示在网页的最上方和最下方，而中间的导航、主要内容和侧边栏根据浏览器窗口的大小...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5 图标库 bootstrap-icons
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
Luo3255069063的博客
03-12 1714
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
23.4 Bootstrap 框架5
清风
10-07 2292
1. 背景颜色 1.1 背景颜色样式 在Bootstrap 5中, 可以使用以下类来设置背景颜色: * 1. .bg-primary: 设置为主要的背景颜色(#007bff, 深蓝色). * 2. .bg-secondary: 设置为次要的背景颜色(#6c757d, 灰色). * 3. .bg-success: 设置为成功的背景颜色(#28a745, 绿色). * 4. .bg-danger: 设置为危险的背景颜色(#dc3545, 红色). * 5. .bg-warning: 设置为警
Bootstrap 5 保姆级教程（十四）：Flex
Flag少侠的博客
04-21 1006
我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。important;使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
【Bootstrap】Bootstrap v5 nav导航条实现部分居左，部分居右布局
微雨停了的博客
04-26 4997
文章目录一、效果二、修改后代码三、分析3.1 修改前效果3.2 修改前代码3.3 方法四、学习网址 一、效果 在同一行中，资产收集、信息探测等内容居左对齐，而测试与退出登录居右对齐。 二、修改后代码 <!-- nav --> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <!-- div1 start --> <div class="colla
bootstrap完美实现5列布局
weixin_33885253的博客
08-17 778
自定义五列的 CSS 类 这种方法相对简单的，自定义一套CSS类，尽量和Bootstrap风格保持一致。 .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } @media ( m...
BootStrap入门学习第一篇
08-29
BootStrap 入门学习第一篇 BootStrap 是一个广泛使用的前端框架，可以帮助开发者快速构建响应式的 Web 应用程序。下面是 BootStrap 入门学习第一篇的知识点总结： 环境搭建 在开始学习 BootStrap 之前，需要先...
bootstrap学习笔记-html5
12-22
bootstrap学习笔记-html5 各类简单案例，适合初学者
炫酷半透明Bootstrap5管理员后台模版
04-03
一个完全响应式的 Bootstrap 5 管理仪表板模板。它使用 bootstrap 5 框架、HTML5、CSS 和 JQuery 构建。它适用于所有主要的网络浏览器、台式机和所有智能手机设备。这是一个非常易于定制且对开发人员友好的模板。它...
两套bootstrap5框架后台管理模板 - Amdash
09-07
Amdash是基于Bootstrap5框架实现的后台管理模板。它有多个仪表盘样式，工作在所有主要浏览器、桌面和所有智能手机设备上。非常易于定制和开发人员友好的HTML5模板。集合与最新jQuery UI组件和bootstrap插件。它可以...
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
多用途 Bootstrap5+HTML后台管理模板
04-03
完全响应式的 bootstrap 5 管理仪表板模板。它使用 bootstrap 5 框架、HTML5、CSS 和 JQuery 构建。它适用于所有主要的网络浏览器、台式机和所有智能手机设备。这是一个非常易于定制且对开发人员友好的模板。它拥有...
后台数据统计Bootstrap5模板
最新发布
06-13
后台数据统计Bootstrap5模板是一款适合后台数据管理Bootstrap5模板下载。
Web笔记-修改BootStrap5中col标签的间距
IT1995的博客
07-12 1604
这里以BootStrap5为例，估计3和4的思路是一样的。效果是这样的，将这样的效果：改成这样的效果：首先看下BootStrap对col的css描述： 从中可以看到关键的地方就是那个padding-right和padding-left，都是15px，造成的间距空隙过大。对此修改即可：在app.css或者app.scss中，或者自己新建一个css重新加载下： 意思就是，将class为col-*的，后面是通配符，的padding-right和padding-left都改为1px，就可以实现上面的效果
Bootstrap Flex（弹性）布局
书香水墨
07-26 5522
一、Bootstrap Flex（弹性）布局 1.1 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。 注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。 以下...
bootstrap5
云墨知秋的博客
11-06 3351
Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
bootstrap基础教程第二版 源代码
02-05
总之，《Bootstrap基础教程第二版》的源代码部分是这本书的重要组成部分，它为读者提供了丰富的实例代码和项目示例，帮助他们更加深入地学习和掌握Bootstrap框架的应用。通过阅读和实践源代码，读者可以更系统地学习...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员老李头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值