学习Bootstrap 5的第二天

这篇具有很好参考价值的文章主要介绍了学习Bootstrap 5的第二天。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

​​​​​​​

目录

前言 

网格系统

网格类

网格系统规则

网格的基本结构

网格选项

从堆叠到水平

自动布局列

超小型设备

超小型设备网格实例

自动布局列

小型设备

小型设备网格实例

自动布局列

中型设备

中型设备网格实例

自动布局列

大型设备

大型设备网格实例

自动布局列

超大型设备

超大型设备网格实例

自动布局列

超级大型设备

XXL 设备网格实例

网格实例

扩展


前言 

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

网格系统

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

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

学习Bootstrap 5的第二天,Bootstrap,学习,bootstrap,前端

注意:请确保总和等于或小于 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>

运行结果:

学习Bootstrap 5的第二天,Bootstrap,学习,bootstrap,前端

注意:.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) 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 的网格系统在实现从堆叠到水平转变方面与前几个版本有所不同。在 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),这两列会垂直堆叠。

超小型设备

超小型设备网格实例

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 的超小型设备网格实例:

<!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 的响应式布局功能,通过使用不同的类来指定不同设备的列宽。

小型设备

小型设备网格实例

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

中型设备

中型设备网格实例

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

大型设备

大型设备网格实例

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

超大型设备

超大型设备网格实例

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 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 设备网格实例

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

运动结果:学习Bootstrap 5的第二天,Bootstrap,学习,bootstrap,前端文章来源地址https://www.toymoban.com/news/detail-690789.html

到了这里,关于学习Bootstrap 5的第二天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端2】jquary,bootstrap,vue

    如下星际和反恐是love爱好。 如下是上面的简洁标准模板: 如下是两种布局容器,上下对应。 如下全是栅格系统,1行12列(每个div跨3列,最后一个div改为4了),如下数字4每个横跨4列。 如下先看右边浏览器大小即屏幕大小为984小于992为sm屏幕,所以选择sm横跨6列,所以显示

    2024年02月11日
    浏览(105)
  • 【一、bootstrap框架前端注册登录页面】

    一、使用bootstrap框架写一个简易的前端登录页面。 先上截图 下面开始记录本人使用bootstrap框架写这个登录页面的过程 1、bootstrap需要的配置文件  2、如何修改背景图片 3、如何写一个图标与输入框附合的表单 例如这样 

    2024年02月11日
    浏览(40)
  • 01_前端框架之Bootstrap的应用

    本课目标 能够完成 Bootstrap 环境搭建 能够理解 Bootstrap 的栅格布局 能够根据 Bootstrap 相关文档使用Bootstrap组件 能够根据 Bootstrap 重构主页和表单页 第1章 bootstrap简介 1.1 什么是bootstrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 Bo

    2024年01月23日
    浏览(51)
  • 【前端布局篇】响应式布局 Bootstrap 移动端布局

    1. 布局介绍 布局:layout 对事物的全面规划和安排 页面布局:对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等。 网页布局:利用html搭建结构与内容,使用CSS添加装饰 HTML5+CSS3系列课程 携程网首页-移动端 响应式布局实战之微加建

    2024年02月10日
    浏览(41)
  • 大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页

    2024年02月11日
    浏览(79)
  • 【前端素材】bootstrap5实现美食餐饮网站RegFood

    一、需求分析 美食餐饮网站是指专门提供关于美食和餐饮的信息、服务和资源的在线平台。这类网站通常提供以下功能: 餐厅搜索和预订:用户可以在网站上搜索附近的餐厅,并预订桌位。网站会提供餐厅的详细信息,包括菜单、地址、电话号码和用户评价等。 菜谱和食谱

    2024年02月03日
    浏览(44)
  • 用前端框架Bootstrap和Django实现用户注册页面

    命令如下: 执行下面条命令依次创建需要的应用: 名叫users的应用创建好后,还需要在全局配置文件中对应在用进行注册,具体方法如下: 打开““E:Python_projectP_001myshop-testmall_backendmall_backendsettings.py””文件,找到名叫“INSTALLED_APPS”的列表(list),在其中加入应用名,

    2024年02月06日
    浏览(55)
  • 前端——bootstrap响应式网页制作-星游记主题(大作业+源码)

    在b站上看见了童年神作的续集(虽然是个人自制) 作品:【自制星游记续】十年后,我们再飞行!!! 【自制星游记续】十年后,我们再飞行!!!_哔哩哔哩_bilibili 六一快乐,伙伴们。部分BGM来自:北京来的狼,鹿泊言{其实还有举杯邀酒请孤独,老杯做了很多动画bgm,很

    2024年02月11日
    浏览(47)
  • 关于BootStrap的前端简易样式和简单分页的实现

    理想如下:  以学生登录系统为例,下方代码能够搭建基本的左侧导航栏,右侧内容的框架  导航栏中每一行用超链接表示,a 指向对应的controller层方法,target=\\\"iframe_a\\\" 指向右侧内容 ,最终实现在iframe_a容器中显示conroller层调用的方法显示的界面 如下所示,点击报修后 任意

    2024年01月24日
    浏览(50)
  • 学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属的专栏: 前端泛海 景天的主页: 景天科技苑 Bootstrap官网 一、什么是Bootstrap? bootstrap是一个基于HTML、CSS和Javascript语言编写的框架,具有简单、灵活的特性,拥有样式库、组件和插件,bootstrap常

    2024年03月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包