学习Bootstrap 5的第十五天

最新推荐文章于 2024-05-10 03:04:36 发布

正在奋斗的程序猿

最新推荐文章于 2024-05-10 03:04:36 发布

阅读量356

点赞数 2

分类专栏： Bootstrap 文章标签：学习 bootstrap 前端

本文链接：https://blog.csdn.net/m0_74293254/article/details/134100739

版权

Bootstrap 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

Bootstrap 5 实用工具

边框

Bootstrap 5提供了一系列的边框类，让开发者可以方便地为元素添加或删除边框。这些边框类都是以"border-"为前缀的CSS类，其后跟着不同的属性值来描述边框的样式、颜色和大小等。

以下是Bootstrap 5提供的常用边框类：

border：为元素添加一个默认的1px宽度的边框。
border-0：为元素移除边框。
border-top、border-bottom、border-end、border-start：为元素的指定边添加边框。
border-primary、border-secondary、border-success、border-danger、border-warning、border-info、border-light、border-dark、border-white：为元素添加不同颜色的边框。

此外，Bootstrap 5还提供了更加细粒度的边框类，可以通过组合不同的属性值来实现更加个性化的边框样式。例如：

border-1、border-2、border-3：分别为元素添加1px、2px、3px宽度的边框。
border-top-0、border-bottom-0、border-left-0、border-right-0：分别为元素指定边移除边框。
border-top-1、border-bottom-2、border-left-3、border-right-4：为元素指定不同宽度的边添加边框。

实例

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap5 实例</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-4">
			<h1>Bootstrap 5 边框类示例</h1>

			<div class="border">默认边框</div><br>

			<div class="border-0">无边框</div><br>

			<div class="border-top">顶部边框</div>
			<br>
			<div class="border-bottom">底部边框</div>
			<br>
			<div class="border-start">左侧边框</div>
			<br>
			<div class="border-end">右侧边框</div><br>


			<div class="border border-primary">主要颜色边框</div>
			<div class="border border-secondary">次要颜色边框</div>
			<div class="border border-success">成功颜色边框</div>
			<div class="border border-danger">危险颜色边框</div>
			<div class="border border-warning">警告颜色边框</div>
			<div class="border border-info">信息颜色边框</div>
			<div class="border border-light">浅色边框</div>
			<div class="border border-dark">深色边框</div>
			<div class="border border-white">白色边框</div><br>

			<div class="border border-1">1px宽度边框</div><br />
			<div class="border border-2">2px宽度边框</div><br />
			<div class="border border-3">3px宽度边框</div><br><br />

			<div class="border border-0">为元素移除边框</div><br />
			<div class="border border-top-1">顶部1px宽度边框</div><br />
			<div class="border border-bottom-0">底部0px宽度边框</div><br />
			<div class="border border-left-0">左侧0px宽度边框</div><br />
			<div class="border border-right-0">右侧0px宽度边框</div><br />
		</div>
	</body>
</html>

边框圆角

在Bootstrap 5中，您可以使用rounded类为元素添加圆角。通过使用不同的rounded类，您可以实现不同程度和形状的圆角效果。

以下是一些常见的rounded类及其对应的圆角效果：

1、rounded：默认圆角效果，边角稍微圆润。

2、rounded-0：无圆角，边角为直角。

3、rounded-1：边角更加圆润。

4、rounded-2：边角更加圆润。

5、rounded-3：边角更加圆润。

6、rounded-circle：创建一个完全圆形的元素。

7、rounded-top、rounded-bottom、rounded-start、rounded-end：分别为元素的顶部、底部、开始（左侧）和结束（右侧）边角添加圆角。

8、rounded-pill：创建一个椭圆形的元素，适用于按钮等元素。

通过组合使用不同的rounded类，可以实现更多自定义的圆角效果。例如，可以将rounded-top和rounded-end类组合在一起，为元素的右上角添加圆角：

<div class="rounded-top rounded-end">右上角圆角</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>
		<style>
			span {
				display: inline-block;
				width: 70px;
				height: 70px;
				margin: 6px;
				background-color: #555;
			}
		</style>
	</head>
	<body>

		<div class="container mt-3">
			<h2>边框圆角</h2>
			<p>请使用 rounded 类为元素添加圆角：</p>
			<span class="rounded"></span>
			<span class="rounded-top"></span>
			<span class="rounded-end"></span>
			<span class="rounded-bottom"></span>
			<span class="rounded-start"></span>
			<span class="rounded-circle"></span>
			<span class="rounded-pill" style="width:130px"></span>
			<span class="rounded-0"></span>
			<span class="rounded-1"></span>
			<span class="rounded-2"></span>
			<span class="rounded-3"></span>
		</div>

	</body>
</html>

浮动和清除浮动

在 Bootstrap 5 中，可以使用 .float-end 类将元素向右浮动，或使用 .float-start 类将元素向左浮动。这些类可以应用于任何具有 float 属性的元素。

例如，要将一个元素向右浮动，可以添加 .float-end 类：

<div class="float-end">向右浮动的元素</div>

同样地，要将一个元素向左浮动，可以添加 .float-start 类：

<div class="float-start">向左浮动的元素</div>

然而，需要注意的是，虽然Bootstrap 5 提供 .clearfix 类来清除浮动。但是也可以使用 CSS 的 overflow: auto 属性来实现类似的效果。

例如，如果你有一组浮动的元素，并希望包含它们的容器能够自动扩展以适应这些浮动元素，可以将容器的样式设置为 overflow: 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="clearfix">
				<span class="float-start">Float left</span>
				<span class="float-end">Float right</span>
			</div>
			<div style="overflow: auto;">
				<!-- 浮动的元素 -->
				<div class="float-start">向左浮动的元素</div>
				<div class="float-end">向右浮动的元素</div>
			</div>
		</div>
	</body>
</html>

这样，容器将会自动适应包含的浮动元素的高度，不再出现高度塌陷的问题。

请注意，以上内容适用于 Bootstrap 5 版本。如果你使用的是其他版本的 Bootstrap，请参考相应版本的文档以获取正确的浮动和清除浮动方法。

响应式浮动

在响应式设计中，可以使用 Bootstrap 5 提供的响应式工具类来实现浮动效果。以下是一些常用的响应式浮动类：

.float-start: 将元素向左浮动。
.float-end: 将元素向右浮动。
.float-none: 取消元素的浮动效果。

这些类可以与 Bootstrap 的栅格系统结合使用，以实现在不同屏幕大小下的浮动布局。

根据屏幕宽度向左或向右浮动元素，使用响应式浮动类 (.float-*-left|right)，其中 * 是：

sm (> = 576px)
md (> = 768px)
lg (> = 992px)
xl (> = 1200px)
xxl (> = 1400px)

实例

<!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">
			<h2>响应式浮动</h2>
			<p>重置浏览器查看效果</p>
			<div class="clearfix">
				<div class="float-sm-end">小屏幕向右浮动</div><br>
				<div class="float-md-end">中等屏幕向右浮动</div><br>
				<div class="float-lg-end">大屏幕向右浮动</div><br>
				<div class="float-xl-end">超大屏幕向右浮动</div><br>
				<div class="float-xxl-end">特大屏幕向右浮动</div><br>
				<div class="float-none">没有浮动</div>
			</div>
		</div>
	</body>
</html>

居中对齐

要将元素水平居中对齐，可以使用 Bootstrap 5 提供的 .mx-auto 类。该类会自动为元素添加 margin-left: auto 和 margin-right: 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="mx-auto bg-warning" style="width:150px">居中对齐</div>
		</div>
	</body>
</html>

请注意，为了使 .mx-auto 类生效，需要将元素包含在一个具有 .container 类的容器中。这是因为 .mx-auto 类依赖于 Bootstrap 的网格系统来计算间距。

通过使用 .mx-auto 类，可以轻松地实现元素的水平居中对齐，无论是在响应式布局中还是在固定宽度的容器中。

宽度与高度

Bootstrap 5 提供了一组类来设置元素的宽度和高度。以下是一些常用的设置元素宽度的类：

.w-*：设置元素的宽度。可以使用 * 替换为 25、50、75、100，表示宽度的百分比。例如，.w-50 将使元素的宽度为其父元素宽度的 50%。
.mw-auto：将元素的最大宽度设置为自动。这将使元素在不超过其父元素宽度的情况下尽可能大。
.mw-100：将元素的最大宽度设置为 100%。这将使元素的宽度等于其父元素的宽度。

以下是一些常用的设置元素高度的类：

.h-*：设置元素的高度。可以使用 * 替换为 25、50、75、100，表示高度的百分比。例如，.h-50 将使元素的高度为其父元素高度的 50%。
.mh-auto：将元素的最大高度设置为自动。这将使元素在不超过其父元素高度的情况下尽可能大。
.mh-100：将元素的最大高度设置为 100%。这将使元素的高度等于其父元素的高度。

请注意，这些类需要与 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 mt-3">
			<div class="w-25 bg-warning">宽度为 25%</div>
			<div class="w-50 bg-warning">宽度为 50%</div>
			<div class="w-75 bg-warning">宽度为 75%</div>
			<div class="w-100 bg-warning">宽度为 100%</div>
			<div class="w-auto bg-warning">自动设置宽度</div>
			<div class="mw-100 bg-warning">最大宽度为 100%</div>
			<br />
			<div style="height:200px;background-color:#ddd">
				<div class="h-25 d-inline-block p-2 bg-warning">高度为 25%</div>
				<div class="h-50 d-inline-block p-2 bg-warning">高度为 50%</div>
				<div class="h-75 d-inline-block p-2 bg-warning">高度为 75%</div>
				<div class="h-100 d-inline-block p-2 bg-warning">高度为 100%</div>
				<div class="h-auto d-inline-block p-2 bg-warning">自动设置高度</div>
				<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度为 100%</div>
			</div>
		</div>

	</body>
</html>

通过使用这些类，你可以轻松地设置元素的宽度和高度，从而实现各种布局需求。

间距

Bootstrap 5 拥有广泛的响应式 margin 和 padding 实用程序类。它们适用于所有断点：

xs (<= 576px)
sm (> = 576px)
md (> = 768px)
lg (> = 992px)
xl (> = 1200px)
xxl (> = 1400px)
这些类的使用格式为：{property}{sides}-{size} 用于 xs，以及 {property}{sides}-{breakpoint}-{size} 用于 sm、md、lg、xl 和 xxl。

property 是以下之一：

m：用于设置元素的外边距（margin）。
p：用于设置元素的内边距（padding）。

sides 是以下之一：

t - 设置 margin-top 或 padding-top
b - 设置 margin-bottom 或 padding-bottom
s - 设置 margin-left 或 padding-left
e - 设置 margin-right 或 padding-right
x - 同时设置 padding-left 和 padding-right 或 margin-left 和 margin-right
y - 同时设置 padding-top 和 padding-bottom 或 margin-top 和 margin-bottom
blank - 在元素的所有四个边设置 margin 或 padding

size 是以下之一：

0 - 把 margin 或 padding 设置为 0
1 - 把 margin 或 padding 设置为 .25rem
2 - 把 margin 或 padding 设置为 .5rem
3 - 把 margin 或 padding 设置为 1rem
4 - 把 margin 或 padding 设置为 1.5rem
5 - 把 margin 或 padding 设置为 3rem
auto - 把 margin 设置为 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="row">
				<div class="col-md-6 mt-3">
					<p>这个元素具有在 md 断点及以上的顶部外边距为 1rem</p>
				</div>
				<div class="col-lg-4 py-2">
					<p>这个元素具有在所有断点上的垂直内边距为 0.5rem</p>
				</div>
				<div class="col-xl-8 pl-xl-5">
					<p>这个元素具有在 xl 断点及以上的左侧内边距为 3rem</p>
				</div>
			</div>
		</div>
	</body>
</html>

在上面的示例中，我们使用了不同的 Bootstrap 5 响应式 margin 和 padding 实用程序类来设置元素之间的间距。根据不同的断点，元素的外边距和内边距会有所调整，以实现响应式布局。

请注意，示例中的类是根据常见的需求进行选择的，你可以根据自己的具体需求进行调整和组合这些类。同时，确保在适当的位置使用 Bootstrap 的容器和栅格系统，以获得最佳效果。

更多实例

`.m-# / m-*-#`	设置所有边的外边距	尝试一下
`.mt-# / mt-*-#`	margin top	尝试一下
`.mb-# / mb-*-#`	margin bottom	尝试一下
`.ms-# / ms-*-#`	margin left	尝试一下
`.me-# / me-*-#`	margin right	尝试一下
`.mx-# / mx-*-#`	margin left 与 right	尝试一下
`.my-# / my-*-#`	margin top 与 bottom	尝试一下
`.p-# / p-*-#`	使用边设置 padding	尝试一下
`.pt-# / pt-*-#`	padding top	尝试一下
`.pb-# / pb-*-#`	padding bottom	尝试一下
`.ps-# / ps-*-#`	padding left	尝试一下
`.pe-# / pe-*-#`	padding right	尝试一下
`.py-# / py-*-#`	padding top 与 bottom	尝试一下
`.px-# / px-*-#`	padding left 与 right	尝试一下

阴影

Bootstrap 5 提供了一系列用于添加阴影的实用程序类，你可以使用它们来为元素添加不同类型和大小的阴影效果。

以下是一些常用的阴影类：

.shadow-sm：添加一个小的阴影效果。
.shadow：添加默认大小的阴影效果。
.shadow-lg：添加一个大的阴影效果。
.shadow-none：移除阴影效果。

这些类可以应用于任何元素，例如 div、img 或 button 等。你可以根据具体需求选择合适的阴影类，并将其应用于相应的元素。

以下是一个示例，演示如何使用 .shadow 类为 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 mt-3">
			<div class="shadow-none p-4 mb-4 bg-light">没有阴影</div>
			<div class="shadow-sm p-4 mb-4 bg-white">小型阴影</div>
			<div class="shadow p-4 mb-4 bg-white">默认阴影</div>
			<div class="shadow-lg p-4 mb-4 bg-white">大型阴影</div>
		</div>
	</body>
</html>

请注意，在使用这些阴影类时，要根据具体需求和设计选择合适的大小和颜色，并确保在不同断点下进行测试和调整，以确保在各种屏幕尺寸和设备上都能获得最佳效果。

垂直对齐

Bootstrap 5 提供了一系列用于更改元素对齐方式的实用程序类，你可以使用它们来控制元素在垂直方向上的对齐方式。

以下是一些常用的垂直对齐类：

.align-baseline：将元素与基线对齐。
.align-top：将元素与顶部对齐。
.align-middle：将元素与中心对齐。
.align-bottom：将元素与底部对齐。
.align-text-top：将元素文本与顶部对齐。
.align-text-bottom：将元素文本与底部对齐。

这些类可以应用于任何 inline、inline-block、inline-table 和表格单元格元素，例如 span、img 或 td 等。你可以根据具体需求选择合适的对齐类，并将其应用于相应的元素。

以下是一个示例，演示如何使用 .align-middle 类将 img 元素与父元素的中心对齐：

<div class="d-flex align-items-center">
  <img src="image.jpg" alt="image" class="align-middle">
  <p class="ms-3">这是一段文本</p>
</div>

在上面的示例中，我们使用 .align-middle 类将 img 元素与父元素的中心对齐。我们还使用了其他 Bootstrap 实用程序类，如 .d-flex（将元素设置为 Flexbox 容器）和 .ms-3（设置左侧外边距），以实现更完整的样式效果。

请注意，在使用这些垂直对齐类时，要根据具体需求和设计选择合适的方式，并确保在不同断点下进行测试和调整，以确保在各种屏幕尺寸和设备上都能获得最佳效果。

纵横比

Bootstrap 5 提供了一种方便的方法来创建响应式的视频或幻灯片，通过使用 .ratio 类和 .aspect-ratio-* 类来设置纵横比。

你可以将 .ratio 类与你选择的纵横比类 .aspect-ratio-* 添加到父元素上，并在其中嵌入视频或 iframe 元素。

以下是一个示例，演示如何使用纵横比类创建一个具有16:9纵横比的响应式视频：

<div class="container mt-3">
			<div class="ratio aspect-ratio-16x9">
				<iframe src="https://v.qq.com/x/page/y14713hqp7x.html" allowfullscreen></iframe>
			</div>
		</div>

在上面的示例中，我们创建了一个父元素，并添加了 .ratio 和 .aspect-ratio-16x9 类。然后，在父元素中嵌入了一个 iframe 元素，该元素包含了一个 YouTube 视频的嵌入链接。

通过使用这些类，父元素会根据其宽度自动调整高度，以保持指定的纵横比。这样，无论父元素的宽度如何改变，嵌入的视频或幻灯片都会保持正确的纵横比，并在不同的屏幕尺寸和设备上呈现良好。

请注意，在使用纵横比类时，确保为嵌入的内容提供适当的宽度和高度属性，以便在没有 CSS 的情况下提供回退样式。

可见性

Bootstrap 5 提供了 .visible 和 .invisible 类来控制元素的可见性。

.visible 类将元素设置为可见状态，它会添加 visibility: visible; 样式规则到元素上。这意味着元素将在页面上显示，并响应用户的交互。
.invisible 类将元素设置为不可见状态，它会添加 visibility: hidden; 样式规则到元素上。这样，元素仍然占据空间，但用户将无法看到它，也无法与其进行交互。

请注意，.visible 和 .invisible 类不会更改元素的 CSS display 值。它们只会通过添加 visibility 属性来控制元素的可见性。

以下是一个示例，演示如何使用 .visible 和 .invisible 类：

<!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 class="visible">这是可见的文本。</p>
			<p class="invisible">这是不可见的文本。</p>
		</div>
	</body>
</html>

在上面的示例中，第一个段落使用 .visible 类，使其可见。第二个段落使用 .invisible 类，使其不可见。两个段落都存在于 HTML 中，但只有第一个段落对用户可见。

请注意，在使用可见性类时，你可以根据需要自定义其他样式来调整元素的外观和行为。例如，你可以结合使用这些类和其他 Bootstrap 类，如 .d-none（隐藏元素）和 .d-block（显示元素），以实现更复杂的可见性控制。

关闭图标

Bootstrap 5 提供了 .btn-close 类来设置关闭图标的样式。这个类通常用于警告框和模态框中，以便用户可以关闭它们。

.btn-close 类将元素设置为一个带有默认样式的关闭图标。该类添加了一个带有 × 文本内容的伪元素 ::before，并为其设置了 content 属性。此外，它还设置了一些基本样式，如颜色、字体大小、位置和光标类型。

以下是一个示例，演示如何使用 .btn-close 类：

<!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="alert alert-danger alert-dismissible fade show" role="alert">
				<strong>出错了！</strong> 你的操作失败了。请重试。
				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
		</div>
	</body>
</html>

在上面的示例中，我们创建了一个警告框，并在其中添加了一个关闭按钮。关闭按钮具有 .btn-close 类，这使它具有默认的关闭图标样式。此外，我们还使用了 Bootstrap 5 的 dismiss 插件，使关闭按钮可以关闭警告框。

请注意，在使用 .btn-close 类时，你可以根据需要自定义其他样式来调整关闭图标的外观和行为。例如，你可以结合使用这个类和其他 Bootstrap 类，如 .btn-sm（小型按钮）和 .text-danger（红色文本），以实现更复杂的关闭图标控制。

屏幕阅读器

Bootstrap 5 提供了 .visually-hidden 类，可以在所有设备上隐藏元素，但对于屏幕阅读器来说是可见的。

.visually-hidden 类将元素设置为不可见，同时保持其可访问性。这意味着元素对于普通用户是不可见的，但对于使用屏幕阅读器的用户是可见的。这样做是为了确保屏幕阅读器用户能够获取到元素的内容。

以下是一个示例，演示如何使用 .visually-hidden 类：

<!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">
			<button type="button" class="btn btn-primary">
				<span class="visually-hidden">购物车</span>
				<i class="bi bi-cart-fill"></i>
			</button>
		</div>
	</body>
</html>

在上面的示例中，我们创建了一个带有购物车图标的按钮。购物车文本使用了 .visually-hidden 类，这样它对于普通用户来说是不可见的，但对于屏幕阅读器用户来说是可见的。这样，屏幕阅读器用户将能够听到按钮的含义。

请注意，在使用 .visually-hidden 类时，你可以根据需要自定义其他样式来调整元素的外观和行为。例如，你可以结合使用这个类和其他 Bootstrap 类，如 .sr-only（仅屏幕阅读器可见）和 .text-danger（红色文本），以实现更复杂的可访问性控制。

颜色

下面列出了所有文本和背景颜色类的列表：

针对文本颜色的类是：

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body（默认 body 颜色/通常为黑色）
.text-light

<!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">
			<h1>上下文颜色</h1>
			<p class="text-muted">此文本已静音。</p>
			<p class="text-primary">此文字很重要。</p>
			<p class="text-success">此文本表示成功。</p>
			<p class="text-info">此文字代表了一些信息。</p>
			<p class="text-warning">此文本表示警告。</p>
			<p class="text-danger">此文字代表危险。</p>
			<p class="text-secondary">次要文本。</p>
			<p class="text-dark">此文字为深灰色。</p>
			<p class="text-body">默认主体颜色（通常为黑色）。</p>
			<p class="text-light">此文本为浅灰色（在白色背景上）。</p>
			<p class="text-white">这段文字是白色的（在白色背景上）。</p>
		</div>
	</body>
</html>

注意:上下文文本类也可用于链接：

<!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 mt-3">
  <h2>上下文链接颜色</h2>
  <a href="#" class="text-muted">静音链接</a>
  <a href="#" class="text-primary">主要链接</a>
  <a href="#" class="text-success">成功链接</a>
  <a href="#" class="text-info">信息链接</a>
  <a href="#" class="text-warning">警告链接</a>
  <a href="#" class="text-danger">危险链接</a>
  <a href="#" class="text-secondary">次要链接</a>
  <a href="#" class="text-dark">暗灰链接</a>
  <a href="#" class="text-body">主体/黑色链接</a>
  <a href="#" class="text-light">浅灰链接</a>
</div>

</body>
</html>

还可以使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 50% 的不透明度：

<!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">
  <h1>不透明度文本颜色</h1>
  <p class="text-black-50">白色背景上不透明度为 50% 的黑色文本</p>
  <p class="text-white-50 bg-dark">黑色背景上不透明度为 50% 的白色文本</p>
</div>

</body>
</html>

背景颜色

针对背景颜色的类是：

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

请注意，背景颜色不会设置文本颜色，因此在某些情况下，需要将它们与 .text-* 类一起使用。

<!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="p-3 mb-2 bg-primary text-white">.bg-primary</div>
		  <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
		  <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
		  <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
		  <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
		  <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
		  <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
		  <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
		  <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
		  <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
		  <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
		</div>
	</body>
</html>

注意：.bg-gradient 类可以设置背景颜色渐变的效果。

<!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="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary</div>
			<div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary</div>
			<div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success</div>
			<div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger</div>
			<div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning</div>
			<div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info</div>
			<div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light</div>
			<div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark</div>
			<div class="p-3 mb-2 bg-body bg-gradient text-dark">.bg-body</div>
			<div class="p-3 mb-2 bg-white bg-gradient text-dark">.bg-white</div>
			<div class="p-3 mb-2 bg-transparent bg-gradient text-dark">.bg-transparent</div>
		</div>
	</body>
</html>

正在奋斗的程序猿

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习Bootstrap 5的第十五天

Bootstrap 5 实用工具边框Bootstrap 5提供了一系列的边框类，让开发者可以方便地为元素添加或删除边框。这些边框类都是以"border-"为前缀的CSS类，其后跟着不同的属性值来描述边框的样式、颜色和大小等。此外，Bootstrap 5还提供了更加细粒度的边框类，可以通过组合不同的属性值来实现更加个性化的边框样式。边框圆角在Bootstrap 5中，您可以使用rounded类为元素添加圆角。通过使用不同的rounded类，您可以实现不同程度和形状的圆角效果。
复制链接

扫一扫