学习Bootstrap 5的第十六天

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

目录

Flex(弹性)布局

弹性盒子(flexbox)

水平方向

垂直方向

对齐内容

等宽

伸展

顺序

自动外边距

包裹

对齐内容

子元素对齐

指定子元素对齐

响应式 Flex 类


Flex(弹性)布局

弹性盒子(flexbox)

Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。

弹性的框布局模块,可以更轻松地设计弹性响应式布局结构,而无需使用浮动或定位。

注意:IE9 及更早版本不支持 Flexbox。如果需要 IE8-9 支持,请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本,团队仍然支持它进行关键错误修复和文档更改。但是不会向其中添加任何新功能。

在 Bootstrap 5 中,d-flex 类表示使用 Flexbox 布局的容器类。它可以将直接子项转换为 flex 项,并且具有许多其他的可选项。同时,Bootstrap 5 也提供了一个用于创建行内 Flexbox 容器的类,即 d-inline-flex 类。

与 d-flex 类相似,d-inline-flex 类可以将直接子项转换为 flex 项,并且具有与 d-flex 类相同的可选项。但是,它使用行内布局方式而不是块级布局方式。这意味着,在使用 d-inline-flex 类创建行内 Flexbox 容器时,容器和其中的 flex 项都将以行内元素的方式呈现。

<!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 mt-3">
			<p>使用 d-flex 类创建一个弹性盒子容器,并设置三个弹性子元素:</p>
			<div class="d-flex p-3 bg-secondary text-white">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div><br />
			<p>创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:</p>
			<div class="d-inline-flex p-3 bg-secondary text-white">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

总的来说,Bootstrap 5 的引入弹性框布局是一个非常不错的改变,它使得布局的设计更加方便灵活,可以更好地应对不同尺寸设备的要求。

水平方向

在 Bootstrap 5 中使用.flex-row类可以将弹性子元素水平显示,默认情况下是从左到右水平排列的。

此外,Bootstrap 5 还提供了 .flex-row-reverse 类,用于将弹性子元素以右对齐的方式显示,即与 .flex-row 方向相反。通过添加 .flex-row-reverse 类,弹性子元素将从右到左水平排列。

例如,下面的代码示例展示了如何使用 .flex-row 和 .flex-row-reverse 类来设置弹性子元素的水平显示方向:

<!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 mt-3">
			<div class="d-flex flex-row bg-secondary">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div><br />
			<div class="d-flex flex-row-reverse bg-secondary">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在第一个示例中,弹性子元素将从左到右水平显示。在第二个示例中,弹性子元素将从右到左水平显示。

垂直方向

在 Bootstrap 5 中使用 .flex-column 类可以将弹性子元素垂直显示,默认情况下是从上到下垂直排列的。

除了 .flex-column 外,Bootstrap 5 还提供了 .flex-column-reverse 类,用于将弹性子元素以反向的垂直方式显示,即与 .flex-column 方向相反。通过添加 .flex-column-reverse 类,弹性子元素将从下到上垂直排列。

例如,下面的代码示例展示了如何使用 .flex-column 和 .flex-column-reverse 类来设置弹性子元素的垂直显示方向:

<!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 mt-3">
			<div class="d-flex flex-column">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<br />
			<div class="d-flex flex-column-reverse">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在第一个示例中,弹性子元素将从上到下垂直显示。在第二个示例中,弹性子元素将从下到上垂直显示。

对齐内容

在 Bootstrap 5 中可以使用.justify-content-*类来改变弹性项目的对齐方式。

以下是可用的.justify-content-*类及其作用:

  • .justify-content-start:将弹性项目左对齐(默认值)。
  • .justify-content-end:将弹性项目右对齐。
  • .justify-content-center:将弹性项目居中对齐。
  • .justify-content-between:将弹性项目平均分布在容器内,左右两端没有间距。
  • .justify-content-around:将弹性项目平均分布在容器内,左右两端有相等的间距。

您可以根据需要选择适当的.justify-content-*类来实现所需的对齐效果。

例如,下面的代码示例展示了如何使用不同的.justify-content-*类来改变弹性项目的对齐方式:

<!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 mt-3">
			<div class="d-flex justify-content-start bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<div class="d-flex justify-content-end bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<div class="d-flex justify-content-center bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<div class="d-flex justify-content-between bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<div class="d-flex justify-content-around bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

等宽

在 Flex 项目上使用.flex-fill类可以强制它们等宽。

.flex-fill类用于填充剩余的可用空间,并让 Flex 项目等宽。这意味着所有的 Flex 项目将以相同的宽度显示,无论它们的内容有多长。

以下是如何使用.flex-fill类来使 Flex 项目等宽的示例:

<!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 mt-3">
			<div class="d-flex">
				<div class="p-2 bg-info flex-fill">弹性项目 1</div>
				<div class="p-2 bg-warning flex-fill">弹性项目 2</div>
				<div class="p-2 bg-primary flex-fill">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在上述示例中,三个 Flex 项目都使用了.flex-fill类,它们将平均分配可用的空间,并呈现等宽。

伸展

在 Flex 项目上使用.flex-grow-1类可以使其占用多余的空间。

.flex-grow-*类用于控制 Flex 项目在可用空间超过它们所需的空间时的扩展性。当设置为.flex-grow-1时,Flex 项目将占用剩余的空间,并填充可用的空间。如果有多个.flex-grow-1的 Flex 项目,则它们将平均分配剩余的空间。

提示:在 flex 项目上使用 .flex-shrink-1 可使其在必要时收缩。

以下是如何使用.flex-grow-1类来占用多余空间的示例:

<!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 mt-3">
			<div class="d-flex">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary flex-grow-1">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在上述示例中,前两个 Flex 项目没有使用.flex-grow-1类,它们仅占用其所需的空间。然而,第三个 Flex 项目使用了.flex-grow-1类,因此它将占用剩余的空间,并填充可用的空间。

顺序

使用.order类可以更改特定 Flex 项目的视觉顺序。

.order-*类用于控制 Flex 项目的顺序。从 .order-1 到 .order-12,数字越小,优先级越高,即数字越小的.order-*类将在数字较大的.order-*类之前显示。

<!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 mt-3">
			<div class="d-flex bg-secondary">
				<div class="p-2 bg-info order-3">弹性项目 1</div>
				<div class="p-2 bg-warning order-2">弹性项目 2</div>
				<div class="p-2 bg-primary order-1">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在上述示例中,通过.order-*类,我们可以改变 Flex 项目的显示顺序。弹性项目 1被设置为order-2,弹性项目 2被设置为order-1,弹性项目 3被设置为order-3。这样,弹性项目 2将显示在弹性项目 1的前面,而弹性项目 3将显示在最后。

自动外边距

使用.ms-auto和.me-auto类可以为弹性项目添加自动外边距。

.ms-auto和.me-auto类用于在弹性容器中将项目向右或向左推,以实现自动外边距的效果。它们分别表示"margin-start:auto"和"margin-end:auto"。

以下是如何使用.ms-auto和.me-auto类为弹性项目添加自动外边距的示例:

<!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 mt-3">
			<div class="d-flex bg-secondary">
				<div class="p-2 ms-auto bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<br />
			<div class="d-flex bg-secondary">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 me-auto bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

包裹

使用.flex-nowrap、.flex-wrap和.flex-wrap-reverse类可以控制弹性容器中子元素的包裹方式。

这三个类用于设置弹性容器中子元素的包裹方式:

  • .flex-nowrap是默认值,它表示所有子元素将放在一行上,不会自动换行。
  • .flex-wrap表示子元素将被包裹成多行。如果需要,子元素将向下自动换行,并尽可能占满所有可用的垂直空间。
  • .flex-wrap-reverse与.flex-wrap类似,但是子元素是从右往左堆叠,而不是从左往右。

以下是如何使用.flex-nowrap、.flex-wrap和.flex-wrap-reverse类来设置弹性容器中子元素的包裹方式的示例:

<!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 mt-3">
			<p><code>.flex-wrap:</code></p>
			<div class="d-flex flex-wrap bg-light">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
				<div class="p-2 border">Flex item 4</div>
				<div class="p-2 border">Flex item 5</div>
				<div class="p-2 border">Flex item 6</div>
				<div class="p-2 border">Flex item 7</div>
				<div class="p-2 border">Flex item 8</div>
				<div class="p-2 border">Flex item 9</div>
				<div class="p-2 border">Flex item 10</div>
				<div class="p-2 border">Flex item 11</div>
				<div class="p-2 border">Flex item 12</div>
				<div class="p-2 border">Flex item 13 </div>
				<div class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p><code>.flex-wrap-reverse:</code></p>
			<div class="d-flex flex-wrap-reverse bg-light">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
				<div class="p-2 border">Flex item 4</div>
				<div class="p-2 border">Flex item 5</div>
				<div class="p-2 border">Flex item 6</div>
				<div class="p-2 border">Flex item 7</div>
				<div class="p-2 border">Flex item 8</div>
				<div class="p-2 border">Flex item 9</div>
				<div class="p-2 border">Flex item 10</div>
				<div class="p-2 border">Flex item 11</div>
				<div class="p-2 border">Flex item 12</div>
				<div class="p-2 border">Flex item 13 </div>
				<div class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p><code>.flex-nowrap:</code></p>
			<div class="d-flex flex-nowrap bg-light">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
				<div class="p-2 border">Flex item 4</div>
				<div class="p-2 border">Flex item 5</div>
				<div class="p-2 border">Flex item 6</div>
				<div class="p-2 border">Flex item 7</div>
				<div class="p-2 border">Flex item 8</div>
				<div class="p-2 border">Flex item 9</div>
				<div class="p-2 border">Flex item 10</div>
				<div class="p-2 border">Flex item 11</div>
				<div class="p-2 border">Flex item 12</div>
				<div class="p-2 border">Flex item 13 </div>
				<div class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
				<div class="p-2 border">Flex item 26</div>
				<div class="p-2 border">Flex item 27</div>
				<div class="p-2 border">Flex item 28</div>
				<div class="p-2 border">Flex item 29</div>
				<div class="p-2 border">Flex item 30</div>
				<div class="p-2 border">Flex item 31</div>
				<div class="p-2 border">Flex item 32</div>
				<div class="p-2 border">Flex item 33</div>
				<div class="p-2 border">Flex item 34</div>
				<div class="p-2 border">Flex item 35</div>
			</div>
			<br>
		</div>
	</body>
</html>

对齐内容

使用.align-content-*类可以控制弹性项目的垂直对齐方式。

这些类用于设置弹性容器中多行弹性项目的垂直对齐方式。以下是可用的类及其效果:

  • .align-content-start(默认):将弹性项目垂直对齐到容器的顶部。
  • .align-content-end:将弹性项目垂直对齐到容器的底部。
  • .align-content-center:将弹性项目垂直居中对齐。
  • .align-content-between:将第一个弹性项目对齐到容器的顶部,将最后一个弹性项目对齐到容器的底部,并将剩余的弹性项目平均分布在中间。
  • .align-content-around:将弹性项目平均分布在容器内,两侧留有相等的空白。
  • .align-content-stretch:将弹性项目拉伸以填充整个容器的高度。

请注意,这些类只对具有多行弹性项目的容器生效,对于单行弹性项目没有影响。您可以根据需要选择合适的类来对齐弹性项目的垂直位置。

<!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 mt-3">
			<p>.align-content-start (默认):</p>
			<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
				<div class="p-2 border">Flex item 4</div>
				<div class="p-2 border">Flex item 5</div>
				<div class="p-2 border">Flex item 6</div>
				<div class="p-2 border">Flex item 7</div>
				<div class="p-2 border">Flex item 8</div>
				<div class="p-2 border">Flex item 9</div>
				<div class="p-2 border">Flex item 10</div>
				<div class="p-2 border">Flex item 11</div>
				<div class="p-2 border">Flex item 12</div>
				<div class="p-2 border">Flex item 13 </div>
				<div class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p>.align-content-end:</p>
			<div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
				<div class="p-2 border">Flex item 4</div>
				<div class="p-2 border">Flex item 5</div>
				<div class="p-2 border">Flex item 6</div>
				<div class="p-2 border">Flex item 7</div>
				<div class="p-2 border">Flex item 8</div>
				<div class="p-2 border">Flex item 9</div>
				<div class="p-2 border">Flex item 10</div>
				<div class="p-2 border">Flex item 11</div>
				<div class="p-2 border">Flex item 12</div>
				<div class="p-2 border">Flex item 13 </div>
				<div class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p>.align-content-center:</p>
			<div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
				<div class="p-2 border">Flex item 4</div>
				<div class="p-2 border">Flex item 5</div>
				<div class="p-2 border">Flex item 6</div>
				<div class="p-2 border">Flex item 7</div>
				<div class="p-2 border">Flex item 8</div>
				<div class="p-2 border">Flex item 9</div>
				<div class="p-2 border">Flex item 10</div>
				<div class="p-2 border">Flex item 11</div>
				<div class="p-2 border">Flex item 12</div>
				<div class="p-2 border">Flex item 13 </div>
				<div class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p>.align-content-around:</p>
			<div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
				<div class="p-2 border">Flex item 4</div>
				<div class="p-2 border">Flex item 5</div>
				<div class="p-2 border">Flex item 6</div>
				<div class="p-2 border">Flex item 7</div>
				<div class="p-2 border">Flex item 8</div>
				<div class="p-2 border">Flex item 9</div>
				<div class="p-2 border">Flex item 10</div>
				<div class="p-2 border">Flex item 11</div>
				<div class="p-2 border">Flex item 12</div>
				<div class="p-2 border">Flex item 13 </div>
				<div class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p>.align-content-stretch:</p>
			<div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
				<div class="p-2 border">Flex item 4</div>
				<div class="p-2 border">Flex item 5</div>
				<div class="p-2 border">Flex item 6</div>
				<div class="p-2 border">Flex item 7</div>
				<div class="p-2 border">Flex item 8</div>
				<div class="p-2 border">Flex item 9</div>
				<div class="p-2 border">Flex item 10</div>
				<div class="p-2 border">Flex item 11</div>
				<div class="p-2 border">Flex item 12</div>
				<div class="p-2 border">Flex item 13 </div>
				<div class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
		</div>
	</body>
</html>

子元素对齐

可以使用.align-items-*类来控制单行子元素的对齐方式。

这些类用于设置弹性容器中单行子元素的垂直对齐方式。以下是可用的类及其效果:

  • .align-items-start:将子元素垂直对齐到容器的顶部。
  • .align-items-end:将子元素垂直对齐到容器的底部。
  • .align-items-center:将子元素垂直居中对齐。
  • .align-items-baseline:将子元素基线对齐。
  • .align-items-stretch(默认):将子元素拉伸以填充整个容器的高度。

请注意,这些类只对具有单行子元素的容器生效,对于多行弹性项目没有影响。您可以根据需要选择合适的类来对齐单行子元素的垂直位置。

<!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 mt-3">
			<p>.align-items-start:</p>
			<div class="d-flex align-items-start bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
			<br>
			<p>.align-items-end:</p>
			<div class="d-flex align-items-end bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
			<br>
			<p>.align-items-center:</p>
			<div class="d-flex align-items-center bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
			<br>
			<p>.align-items-baseline:</p>
			<div class="d-flex align-items-baseline bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
			<br>
			<p>.align-items-stretch (默认):</p>
			<div class="d-flex align-items-stretch bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
		</div>
	</body>
</html>

指定子元素对齐

可以使用.align-self-*类来控制单个子元素的垂直对齐方式。

这些类用于设置弹性容器中单个子元素的垂直对齐方式。以下是可用的类及其效果:

  • .align-self-start:将子元素垂直对齐到容器的顶部。
  • .align-self-end:将子元素垂直对齐到容器的底部。
  • .align-self-center:将子元素垂直居中对齐。
  • .align-self-baseline:将子元素基线对齐。
  • .align-self-stretch(默认):将子元素拉伸以填充整个容器的高度。

请注意,这些类只对单个子元素生效,而不是整个容器或多个子元素。您可以通过为特定的子元素添加适当的类来控制其垂直对齐方式。

<!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 mt-3">
			<p>.align-self-start:</p>
			<div class="d-flex bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border align-self-start">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
			<br>
			<p>.align-self-end:</p>
			<div class="d-flex bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border align-self-end">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
			<br>
			<p>.align-self-center:</p>
			<div class="d-flex bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border align-self-center">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
			<br>
			<p>.align-self-baseline:</p>
			<div class="d-flex bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border align-self-baseline">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
			<br>
			<p>.align-self-stretch (默认):</p>
			<div class="d-flex bg-light" style="height:150px">
				<div class="p-2 border">Flex item 1</div>
				<div class="p-2 border align-self-stretch">Flex item 2</div>
				<div class="p-2 border">Flex item 3</div>
			</div>
		</div>
	</body>
</html>

响应式 Flex 类

所有弹性类都带有额外的响应类,这使得在特定屏幕尺寸上设置特定 flex 类变得容易。* 符号可以替换为 sm、md、lg、xl 或 xxl,分别代表小、中、大、超大和特大屏幕。文章来源地址https://www.toymoban.com/news/detail-736426.html

实例 实现
弹性容器
.d-*-flex 根据不同的屏幕设备创建弹性盒子容器 尝试一下
.d-*-inline-flex 根据不同的屏幕设备创建行内弹性盒子容器 尝试一下
方向
.flex-*-row 根据不同的屏幕设备在水平方向显示弹性子元素 尝试一下
.flex-*-row-reverse 根据不同的屏幕设备在水平方向显示弹性子元素,且右对齐 尝试一下
.flex-*-column 根据不同的屏幕设备在垂直方向显示弹性子元素 尝试一下
.flex-*-column-reverse 根据不同的屏幕设备在垂直方向显示弹性子元素,且方向相反 尝试一下
内容对齐
.justify-content-*-start 根据不同屏幕设备在开始位置显示弹性子元素 (左对齐) 尝试一下
.justify-content-*-end 根据不同屏幕设备在尾部显示弹性子元素 (右对齐) 尝试一下
.justify-content-*-center 根据不同屏幕设备在 flex 容器中居中显示子元素 尝试一下
.justify-content-*-between 根据不同屏幕设备使用 "between" 显示弹性子元素 尝试一下
.justify-content-*-around 根据不同屏幕设备使用 "around" 显示弹性子元素 尝试一下
等宽
.flex-*-fill 根据不同的屏幕设备强制等宽 尝试一下
扩展
.flex-*-grow-0 不同的屏幕设备不设置扩展
.flex-*-grow-1 不同的屏幕设备设置扩展
收缩
.flex-*-shrink-0 不同的屏幕设备不设置收缩
.flex-*-shrink-1 不同的屏幕设备设置收缩
包裹
.flex-*-nowrap 不同的屏幕设备不设置包裹元素 尝试一下
.flex-*-wrap 不同的屏幕设备设置包裹元素 尝试一下
.flex-*-wrap-reverse 不同的屏幕设备反转包裹元素 尝试一下
内容排列
.align-content-*-start 根据不同屏幕设备在起始位置堆叠元素 尝试一下
.align-content-*-end 根据不同屏幕设备在结束位置堆叠元素 尝试一下
.align-content-*-center 根据不同屏幕设备在中间位置堆叠元素 尝试一下
.align-content-*-around 根据不同屏幕设备,使用 "around" 堆叠元素 尝试一下
.align-content-*-stretch 根据不同屏幕设备,通过伸展元素来堆叠 尝试一下
排序
.order-*-0-12 在小屏幕尺寸上修改排序 尝试一下
元素对齐
.align-items-*-start 根据不同屏幕设备,让元素在头部显示在同一行。 尝试一下
.align-items-*-end 根据不同屏幕设备,让元素在尾部显示在同一行。 尝试一下
.align-items-*-center 根据不同屏幕设备,让元素在中间位置显示在同一行。 尝试一下
.align-items-*-baseline 根据不同屏幕设备,让元素在基线上显示在同一行。 尝试一下
.align-items-*-stretch 根据不同屏幕设备,让元素延展高度并显示在同一行。 尝试一下
单独一个子元素的对齐方式
.align-self-*-start 据不同屏幕设备,让单独一个子元素显示在头部。 尝试一下
.align-self-*-end 据不同屏幕设备,让单独一个子元素显示在尾部 尝试一下
.align-self-*-center 据不同屏幕设备,让单独一个子元素显示在居中位置 尝试一下
.align-self-*-baseline 据不同屏幕设备,让单独一个子元素显示在基线位置 尝试一下
.align-self-*-stretch 据不同屏幕设备,延展一个单独子元素 尝试一下

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

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

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

相关文章

  • 学C的第二十六天【指针的进阶(二)】

    ========================================================================= 相关代码gitee自取 :C语言学习日记: 加油努力 (gitee.com)  ========================================================================= 接上期 : 学C的第二十五天【指针的进阶(一)】_高高的胖子的博客-CSDN博客  ================================

    2024年02月13日
    浏览(63)
  • 第十六天-爬虫selenium库

    目录 1.介绍 2.使用 selenium 1.安装 2.使用 1.测试打开网页,抓取雷速体育日职乙信息 2.通过xpath查找 3.输入文本框内容 send_keys 4.点击事件 click 5.获取网页源码: 6.获取cookies 7.seleniumt提供元素定位方式:8种 8.控制浏览器前进、后退、刷新 9.控制鼠标 10. 设置等待 11设置后台运行

    2024年03月12日
    浏览(48)
  • JAVA SE -- 第十六天

    (全部来自“韩顺平教育”) 一、文件 是保存数据的地方 2、文件流 文件在程序中是以流的形式来操作  流:数据在数据源(文件)和程序(内存)之间经历的路径 输入流:数据从数据源(文件)到程序(内存)的路径 输出流:数据从程序(内存)到数据源(文件)的路径

    2024年02月14日
    浏览(62)
  • 秒懂百科,C++如此简单丨第十六天:指针

    目录 必看信息 Everyday English 前言  📝了解指针 📝定义指针 📝分析指针 📝运用指针 总结 ▶本篇文章由爱编程的小芒果原创,未经许可,严禁转载。 ▶本篇文章被收录于秒懂百科,C++如此简单专栏,欢迎订阅。 专栏亮点 1.每篇文章质量高,质量分保证在80分以上。 2.文章

    2024年02月01日
    浏览(57)
  • 数据结构第十六天(二叉树层序遍历/广度优先搜索(BFS)/队列使用)

    目录 前言 概述 接口 源码 测试函数 运行结果 往期精彩内容 从前的日色变得慢,车,马,邮件都慢,一生,只够爱一个人。 二叉树的层序遍历可以使用广度优先搜索(BFS)来实现。具体步骤如下: 创建一个队列 queue,并将根节点入队。 当队列不为空时,重复执行以下步骤:

    2024年02月22日
    浏览(36)
  • BootStrap-前端框架

    资料:https://v3.bootcss.com/components/ BootStrap的概念(Web框架) Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML 、 CSS 、 JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个 CSS/HTML 框架。Bootstrap提供了优

    2024年02月07日
    浏览(36)
  • 【前端2】jquary,bootstrap,vue

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

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

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

    2024年02月11日
    浏览(40)
  • MFC第十六天 CFileDialog、CEdit简介、(线程)进程的启动,以及Notepad的开发(托盘技术-->菜单功能)

    通用对话框 CCommonDialog 这些对话框类封装 Windows 公共对话框。 它们提供了易于使用的复杂对话框实现。 CFileDialog 提供用于打开或保存文件的标准对话框。 CColorDialog 提供用于选择颜色的标准对话框。 CFontDialog 提供用于选择字体的标准对话框。 CFindReplaceDialog 为搜索和替换操作

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

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

    2024年01月23日
    浏览(50)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包