学习Bootstrap 5的第六天

.alert-success：这个类用于表示成功或积极的消息，通常用于表示一个操作成功或没有问题。它使用绿色的背景和白色的文字来传达这种成功或积极的情感。
.alert-info：这个类用于表示信息性的消息，通常用于提供一些额外的信息或说明。它使用浅蓝色的背景和白色的文字来传达这种信息性的情感。
.alert-warning：这个类用于表示警告或潜在的问题，通常用于提醒用户注意某些潜在的问题或风险。它使用黄色的背景和黑色的文字来传达这种警告或潜在问题的情感。
.alert-danger：这个类用于表示危险或错误消息，通常用于表示一个操作失败或出现错误。它使用红色的背景和白色的文字来传达这种危险或错误的情感。
.alert-primary：这个类用于提供主要或最重要的警告消息。它使用深蓝色的背景和白色的文字来传达这种重要性的情感。
.alert-secondary：这个类用于提供次要的或辅助的警告消息。它使用浅灰色的背景和黑色的文字来传达这种次要或辅助的情感。
.alert-light：这个类用于提供轻盈的或柔和的警告消息。它使用浅白色的背景和黑色的文字来传达这种轻盈或柔和的情感。
.alert-dark：这个类用于提供深色的或沉重的警告消息。它使用深黑色的背景和白色的文字来传达这种深色或沉重的情感。

实例


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-success">
				<strong>alert-success：strong> 指定操作成功提示信息。
			div>
			<div class="alert alert-info">
				<strong>alert-info：strong> 请注意这个信息。
			div>
			<div class="alert alert-warning">
				<strong>alert-warning：strong> 设置警告信息。
			div>
			<div class="alert alert-danger">
				<strong>alert-danger：strong> 失败的操作
			div>
			<div class="alert alert-primary">
				  <strong>alert-primary：strong> 这是一个重要的操作信息。
			div>
			<div class="alert alert-secondary">
				  <strong>alert-secondary：strong> 显示一些不重要的信息。
			div>
			<div class="alert alert-dark">
				  <strong>alert-dark：strong> 深灰色提示框。
			div>
			<div class="alert alert-light">
				  <strong>alert-light：strong>浅灰色提示框。
			div>
		div>
	body>
html>

每一个警告类都有其特定的背景颜色和文字颜色，以便更清晰地传达警告的类型和严重性。

运行结果：

警告框链接

.alert-link 类是一个Bootstrap5提供的辅助类，用于在警告框内的链接中创建匹配的彩色链接。当将 .alert-link 类添加到警告框内的任何链接中时，链接的文本将自动变为与警告框的背景色相同的颜色，以提高警告框的可读性和用户体验。

实例


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-success">
				<strong>alert-success：strong> <a href="#" class="alert-link">指定操作成功提示信息。a>
			div>
			<div class="alert alert-info">
				<strong>alert-info：strong> <a href="#" class="alert-link">请注意这个信息。a>
			div>
			<div class="alert alert-warning">
				<strong>alert-warning：strong> <a href="#" class="alert-link">设置警告信息。a>
			div>
			<div class="alert alert-danger">
				<strong>alert-danger：strong> <a href="#" class="alert-link">失败的操作a>
			div>
			<div class="alert alert-primary">
				  <strong>alert-primary：strong> <a href="#" class="alert-link">这是一个重要的操作信息。a>
			div>
			<div class="alert alert-secondary">
				  <strong>alert-secondary：strong> <a href="#" class="alert-link">显示一些不重要的信息。a>
			div>
			<div class="alert alert-dark">
				  <strong>alert-dark：strong> <a href="#" class="alert-link">深灰色提示框。a>
			div>
			<div class="alert alert-light">
				  <strong>alert-light：strong> <a href="#" class="alert-link">浅灰色提示框。a>
			div>
		div>
	body>
html>

在上面的代码中，将 .alert-link 类添加到标签中，使其文本颜色与警告框的背景相匹配，从而提高了可读性。

使用 .alert-link 类可以方便地创建与警告框风格一致的链接，使警告框的外观更加协调和一致。

问题：为什么我们在链接的 href 属性中写一个 #？

答：在 HTML 中，href 属性用于指定链接的目标地址。当在 href 属性中使用 #，这实际上是在告诉浏览器，这个链接的目标是当前页面的特定位置。

具体来说，# 是一个特殊的 URL 符号，表示页面的 "hash" 或 "fragment"。在 URL 中，#后面通常跟着一个标识符，用来指向页面内部的一个特定元素。例如，#top 就会将页面滚动到该页面的顶部。

然而，如果在 href 属性中只写 #，而不附加任何标识符，这意味着链接的目标是当前页面的顶部。这在某些情况下很有用，例如：

当想要创建一个可以点击但实际上不跳转到其他页面的 "空链接"。
当想要创建一个 "返回顶部" 的链接，可以在点击时使用 JavaScript 来实现页面滚动的效果。

请注意，虽然这种方式在某些情况下有用，但它并不能真正链接到其他页面。因此，当你点击这样的链接时，浏览器不会尝试加载任何新的页面，也不会改变浏览器的历史记录。

运行结果：

关闭警告框

.alert-dismissible 类是Bootstrap 5中用于关闭警告框的机制。

通过在警告框的

元素中添加 .alert-dismissible 类，可以启用关闭警告框的功能。然后，在关闭按钮的链接上添加 class="btn-close" 和 data-bs-dismiss="alert"，指定要关闭的警告框的元素。

实例


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-success alert-dismissible">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				<strong>alert-success：strong> <a href="#" class="alert-link">指定操作成功提示信息。a>
			div>
			<div class="alert alert-info alert-dismissible">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				<strong>alert-info：strong> <a href="#" class="alert-link">请注意这个信息。a>
			div>
			<div class="alert alert-warning alert-dismissible">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				<strong>alert-warning：strong> <a href="#" class="alert-link">设置警告信息。a>
			div>
			<div class="alert alert-danger alert-dismissible">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				<strong>alert-danger：strong> <a href="#" class="alert-link">失败的操作a>
			div>
			<div class="alert alert-primary alert-dismissible">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				  <strong>alert-primary：strong> <a href="#" class="alert-link">这是一个重要的操作信息。a>
			div>
			<div class="alert alert-secondary alert-dismissible">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				  <strong>alert-secondary：strong> <a href="#" class="alert-link">显示一些不重要的信息。a>
			div>
			<div class="alert alert-dark alert-dismissible">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				  <strong>alert-dark：strong> <a href="#" class="alert-link">深灰色提示框。a>
			div>
			<div class="alert alert-light alert-dismissible">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				  <strong>alert-light：strong> <a href="#" class="alert-link">浅灰色提示框。a>
			div>
		div>
	body>
html>

在上面的代码中，.alert-dismissible 类被添加到

元素中，然后在关闭按钮的链接上使用了 class="btn-close" 和 data-bs-dismiss="alert"。当用户点击 "关闭" 按钮时，警告框将自动关闭。

使用这种关闭提示框的机制可以提供更好的用户体验，让用户能够更方便地关闭或忽略不需要的警告信息。

运行结果：

警告框动画

.fade 和 .show 类是用于控制警告框动画的两个辅助类。

.fade 类用于将警告框的元素从可见到不可见，并使用淡出效果过渡。这意味着当警告框被关闭时，它将以淡出的方式逐渐消失。
.show 类用于将警告框的元素设置为可见，并显示出来。这是默认的警告框显示方式，当警告框被创建时，它将自动使用 .show 类来显示出来。

这两个类可以结合使用，以实现警告框的淡入淡出效果。

实例


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-success alert-dismissible fade show">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				<strong>alert-success：strong> <a href="#" class="alert-link">指定操作成功提示信息。a>
			div>
			<div class="alert alert-info alert-dismissible fade show">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				<strong>alert-info：strong> <a href="#" class="alert-link">请注意这个信息。a>
			div>
			<div class="alert alert-warning alert-dismissible fade show">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				<strong>alert-warning：strong> <a href="#" class="alert-link">设置警告信息。a>
			div>
			<div class="alert alert-danger alert-dismissible fade show">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				<strong>alert-danger：strong> <a href="#" class="alert-link">失败的操作a>
			div>
			<div class="alert alert-primary alert-dismissible fade show">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				  <strong>alert-primary：strong> <a href="#" class="alert-link">这是一个重要的操作信息。a>
			div>
			<div class="alert alert-secondary alert-dismissible fade show">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				  <strong>alert-secondary：strong> <a href="#" class="alert-link">显示一些不重要的信息。a>
			div>
			<div class="alert alert-dark alert-dismissible fade show">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				  <strong>alert-dark：strong> <a href="#" class="alert-link">深灰色提示框。a>
			div>
			<div class="alert alert-light alert-dismissible fade show">
				<button type="button" class="btn-close" data-bs-dismiss="alert">button>
				  <strong>alert-light：strong> <a href="#" class="alert-link">浅灰色提示框。a>
			div>
		div>
	body>
html>

在上面的代码中，使用了 .fade 和 .show 类，这样当警告框被创建时，它会以淡入的方式出现，并在被关闭时以淡出的方式消失。使用这些类可以增强警告框的动画效果，提供更流畅的用户体验。

运行结果：

按钮

按钮样式

Bootstrap 5 提供了多种按钮样式，可以用于创建不同类型的按钮，以满足不同的设计需求。

注意：按钮类可用于 ,

相关阅读:
java有关的HttpsUtils工具类 https请求工具类
【C++中cin、cin.get()、cin.getline()、getline() 的区别】
IT职业规划：大公司VS小公司，怎样选择更有前途？
【 java 常用类】StringBuffer 源码分析以及 StringBuffer 底层的数组扩容机制
全球133种语言自动翻译mishop大米外贸商城系统
CVE-2020-1472-ZeroLogon复现
索引数据结构
笔记 mysql text 不能设置他的默认值如not null
Prometheus基于Consul的 Redis 多实例监控方案
5G投资下降，遥遥领先的主流5G或被运营商抛弃，“假5G”更获青睐

原文地址：https://blog.csdn.net/m0_74293254/article/details/132718183