学习Bootstrap 5的第六天

news2024/12/25 0:06:00

目录

信息警告框

警告框

实例

警告框链接

实例

关闭警告框

实例

警告框动画

实例

按钮

按钮样式

实例

按钮轮廓

实例

​编辑按钮尺寸

实例

块级按钮

实例

实例

活动/禁用按钮

实例

加载器按钮

实例

扩展小知识

信息警告框

警告框

警告框是使用 .alert 类创建的，后跟上下文类之一：

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

实例

<!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-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 类添加到警告框内的任何链接中时，链接的文本将自动变为与警告框的背景色相同的颜色，以提高警告框的可读性和用户体验。

实例

<!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-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 类添加到 <a> 标签中，使其文本颜色与警告框的背景相匹配，从而提高了可读性。

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

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

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

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

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

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

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

运行结果：

关闭警告框

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

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

实例

<!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-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 类被添加到 <div> 元素中，然后在关闭按钮的链接上使用了 class="btn-close" 和 data-bs-dismiss="alert"。当用户点击 "关闭" 按钮时，警告框将自动关闭。

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

运行结果：

警告框动画

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

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

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

实例

<!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-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 提供了多种按钮样式，可以用于创建不同类型的按钮，以满足不同的设计需求。

注意：按钮类可用于 <a>, <button>, 或 <input> 元素上。

以下是一些常用的按钮样式：

  1. .btn：这是最基本的按钮样式，用于创建一个基本的按钮。
  2. .btn-primary：这是主要按钮样式，用于突出显示最重要的操作或功能。
  3. .btn-secondary：这是次要按钮样式，用于突出显示次要的操作或功能。
  4. .btn-success：这是成功按钮样式，用于表示成功或积极的操作或功能。
  5. .btn-info：这是信息按钮样式，用于表示提供信息或说明的操作或功能。
  6. .btn-warning：这是警告按钮样式，用于表示警告或需要注意的操作或功能。
  7. .btn-danger：这是危险按钮样式，用于表示危险或消极的操作或功能。
  8. .btn-dark：这是深色按钮样式，用于表示重要或严肃的操作或功能。
  9. .btn-light：这是轻量按钮样式，用于表示轻量或简单的操作或功能。
  10. .btn-link：这是链接按钮样式，用于创建类似于链接的按钮，通常用于在页面中创建轻量级的交互元素。

这些样式可以单独使用，也可以组合使用，以创建具有不同外观和感觉的按钮。同时，还可以通过添加一些辅助类来进一步自定义按钮的外观和行为。 

实例

<!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">基本按钮</button>
			<button type="button" class="btn btn-primary">主要按钮</button>
			<button type="button" class="btn btn-secondary">次要按钮</button>
			<button type="button" class="btn btn-success">成功</button>
			<button type="button" class="btn btn-info">信息</button>
			<button type="button" class="btn btn-warning">警告</button>
			<button type="button" class="btn btn-danger">危险</button>
			<button type="button" class="btn btn-dark">黑色</button>
			<button type="button" class="btn btn-light">浅色</button>
			<button type="button" class="btn btn-link">链接</button>
			<button type="button" class="btn btn-primary btn-link">按钮链接</button>
		</div>
	</body>
</html>

运行结果：

按钮轮廓

Bootstrap 5 还提供了八个轮廓/边框按钮。

以下是八个轮廓/边框按钮的样式类：

  1. .btn-outline-primary：这个样式类用于创建具有主要颜色轮廓的按钮。当鼠标悬停在按钮上方时，轮廓颜色会变深。
  2. .btn-outline-secondary：这个样式类用于创建具有次要颜色轮廓的按钮。当鼠标悬停在按钮上方时，轮廓颜色会变深。
  3. .btn-outline-success：这个样式类用于创建具有成功颜色轮廓的按钮。当鼠标悬停在按钮上方时，轮廓颜色会变深。
  4. .btn-outline-info：这个样式类用于创建具有信息颜色轮廓的按钮。当鼠标悬停在按钮上方时，轮廓颜色会变深。
  5. .btn-outline-warning：这个样式类用于创建具有警告颜色轮廓的按钮。当鼠标悬停在按钮上方时，轮廓颜色会变深。
  6. .btn-outline-danger：这个样式类用于创建具有危险颜色轮廓的按钮。当鼠标悬停在按钮上方时，轮廓颜色会变深。
  7. .btn-outline-light：这个样式类用于创建具有轻量颜色轮廓的按钮。当鼠标悬停在按钮上方时，轮廓颜色会变深。
  8. .btn-outline-dark：这个样式类用于创建具有深色颜色轮廓的按钮。当鼠标悬停在按钮上方时，轮廓颜色会变深。

实例

<!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 class="btn btn-outline-primary">主要轮廓按钮</button>
			<button class="btn btn-outline-secondary">次要轮廓按钮</button>
			<button class="btn btn-outline-success">成功轮廓按钮</button>
			<button class="btn btn-outline-info">信息轮廓按钮</button>
			<button class="btn btn-outline-warning">警告轮廓按钮</button>
			<button class="btn btn-outline-danger">危险轮廓按钮</button>
			<button class="btn btn-outline-light">轻量轮廓按钮</button>
			<button class="btn btn-outline-dark">深色轮廓按钮</button>
		</div>
	</body>
</html>

这些样式类可以方便地创建与主题和样式相匹配的轮廓/边框按钮，并增强用户体验。 

运行结果：

鼠标悬停后:

按钮尺寸

Bootstrap 5 提供了几个用于调整按钮尺寸的辅助类，其中包括：

  1. .btn-lg 类：用于创建大型按钮，通常用于强调或重要操作。
  2. .btn-sm 类：用于创建小型按钮，通常用于次要操作或用于表单控件的标签。

这些辅助类可以与按钮的基本类（.btn）和其他样式类一起使用，以创建不同尺寸和外观的按钮。

实例

<!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 btn-lg">大型按钮</button>
			<button type="button" class="btn btn-primary">默认按钮</button>
			<button type="button" class="btn btn-primary btn-sm">小型按钮</button>
		</div>
	</body>
</html>

通过使用这些辅助类，可以轻松地创建不同尺寸和外观的按钮，以满足不同的设计需求。 

运行结果：

块级按钮

Bootstrap 5 中的块级按钮可以通过添加 .btn-block 类来创建。这种类型的按钮可以占据整行空间，并具有水平滚动条，通常用于需要突出显示或覆盖整个元素的操作。

注意：如需创建跨越父元素整个宽度的块级按钮，请在父元素上使用 .d-grid类。

实例

<!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-grid">
				<h1>块级按钮</h1>
				<button type="button" class="btn btn-primary btn-block">块级按钮</button>
			</div>
		</div>
	</body>
</html>

在上面的示例中，.btn-primary 是按钮的基本类，用于指定按钮的颜色和样式。.btn-block 是辅助类，用于将按钮设置为块级按钮。 

运行结果：

如果有多个块级按钮，可以使用 .gap-* 类来设置它们之间的间距。例如，.gap-5 将设置按钮之间间距为 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 mt-3">
			<div class="d-grid gap-5">
				<h1>块级按钮</h1>
				<button type="button" class="btn btn-primary btn-block">块级按钮 1</button>
				<button type="button" class="btn btn-primary btn-block">块级按钮 2</button>
			</div>
		</div>
	</body>
</html>

运行结果：

活动/禁用按钮

在Bootstrap 5中，可以通过添加.active类来激活按钮，使其处于可用状态，并可以触发JavaScript代码中的点击事件。而要禁止按钮的点击，可以使用disabled属性或者添加.disabled类。

注意：对于<a>元素，由于不支持disabled属性，如果要禁止链接的点击，可以添加.disabled类来实现。

实例

<!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">主要按钮</button>
			<!-- 激活按钮 -->  
			<button class="btn btn-primary active">激活按钮</button>  
			  
			<!-- 禁止按钮 -->  
			<button class="btn btn-primary" disabled>禁止按钮 1</button>
			<button class="btn btn-primary disabled">禁止按钮 2</button>
			  
			<!-- 禁止链接 -->  
			<a href="#" class="btn btn-primary disabled">禁止链接</a>
		</div>
	</body>
</html>

运行结果：

加载器按钮

通过Bootstrap，我们可以很容易地设置一个正在加载的按钮。通过添加一个新的CSS类spinner-border或spinner-grow到含按钮的元素中，我们可以创建一个旋转的边框或增长的形状，以表示按钮正在加载。

实例

<!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 class="btn btn-primary">
				<span class="spinner-border spinner-border-sm"></span>
				主要按钮
			</button>

			<button class="btn btn-primary active">
				<span class="spinner-border spinner-border-lg"></span>
				激活按钮
			</button>

			<button class="btn btn-primary" disabled>
				<span class="spinner-grow spinner-grow-sm"></span>
				禁止按钮 1
			</button>
			<button class="btn btn-primary disabled">
				<span class="spinner-grow spinner-grow-lg"></span>
				禁止按钮 2
			</button>

			<a href="#" class="btn btn-primary disabled">
				<span class="spinner-border spinner-border"></span>
				禁止链接
			</a>
		</div>
	</body>
</html>

运行结果（此处是动态的）：

扩展小知识

spinner-border-sm（spinner-grow-sm同理）是一个Bootstrap提供的CSS类，用于创建一个小的旋转边框，表示加载或旋转的状态。它可以应用于任何元素，但通常会将其应用于按钮或其他具有交互性的元素。

这个类使用了CSS的伪元素和动画，通过定义边框的旋转动画来实现加载效果。通过将这个类应用于按钮或其他元素，可以使其在加载或旋转时呈现动态效果，提供更好的用户体验。

此外，Bootstrap还提供了其他大小的旋转边框类，如spinner-border和spinner-border-lg，可以根据需要选择适当的大小来适配不同的场景。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/982455.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

手写Spring：第15章-通过注解注入属性信息

手写Spring：第15章-通过注解注入属性信息

文章目录 一、目标&#xff1a;通过注解注入属性信息二、设计&#xff1a;通过注解注入属性信息三、实现&#xff1a;通过注解注入属性信息3.1 工程结构3.2 自动扫描注入占位符配置和对象类图3.3 读取属性并填充到容器中3.3.1 定义解析字符串接口3.3.2 配置Bean工厂添加解析器3…
阅读更多...
低能量电子束曝光技术

低能量电子束曝光技术

引言 直接蚀刻和剥离是两种比较流行的图案转移工艺。在直接蚀刻工艺中&#xff0c;首先使用光刻技术对聚合物抗蚀剂进行构图&#xff0c;然后通过干法蚀刻技术用抗蚀剂作为掩模将图案转移到衬底或子层上。 剥离过程中&#xff0c;膜(通常是金属)被涂覆在抗蚀剂结构上&#xf…
阅读更多...
RoboTAP：由 Google DeepMind 开发的一款机器人操作系统

RoboTAP：由 Google DeepMind 开发的一款机器人操作系统

Google DeepMind 开发的一款机器人操作系统RoboTAP。该系统能够通过只需几分钟的示范&#xff0c;就能让机器人学会新的视觉运动任务。你只需要给它展示几次如何做某件事&#xff0c;比如拿起一个苹果放到果冻上&#xff0c;它就能学会这个动作。 工作原理 该系统能够通过视觉…
阅读更多...
CMS-织梦[dede]-通用免登发布插件

CMS-织梦[dede]-通用免登发布插件

CMS-织梦[dede]-通用免登发布插件 1. 织梦通用免登陆发布插件功能说明2. 织梦通用免登陆发布接口使用说明2-1 下载插件2-2 安装插件3 对接火车头等采集工具 3 爬虫【古诗文网】示例[可选]测试火车头入库模型 使用火车头&#xff0c;简数采集器&#xff0c;八爪鱼等文章采集工具…
阅读更多...
直播系统源码，系统分析篇：不可或缺的云转码系统

直播系统源码，系统分析篇：不可或缺的云转码系统

科技的进步发展让人们的生活越来越便利&#xff0c;而当今社会我们最常使用让我们生活变得更便利的方式&#xff0c;就是下载适合我们解决困难的相关直播系统源码搭建出来的APP&#xff0c;在一个完整的APP内&#xff0c;有着多种的功能强大的系统&#xff0c;从这篇文章开始&a…
阅读更多...
凡邦数据提供了多种API接口服务，包括淘宝API、1688API、京东API、拼多多API、抖音API等

凡邦数据提供了多种API接口服务，包括淘宝API、1688API、京东API、拼多多API、抖音API等

API接口在现代数字化时代中扮演着至关重要的角色&#xff0c;它们连接着不同的系统、软件和服务&#xff0c;促进着数据流动和业务创新。API接口供应商则是提供这些接口的服务的商家&#xff0c;它们为开发者提供了方便快捷的渠道&#xff0c;以便快速获取和使用各种API接口。 …
阅读更多...
一站式数字营销SaaS平台Klaviyo申请纳斯达克IPO上市

一站式数字营销SaaS平台Klaviyo申请纳斯达克IPO上市

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;美国一站式数字营销SaaS平台Klaviyo近期已向美国证券交易委员会&#xff08;SEC&#xff09;提交招股书&#xff0c;申请在纳斯达克IPO上市&#xff0c;股票代码为&#xff08;KVYO&#xff09;&am…
阅读更多...
用Windows自带的工具检查磁盘

用Windows自带的工具检查磁盘

例如用的是win7。打开计算机&#xff0c;点击选中某个磁盘&#xff0c;右键点击鼠标&#xff0c;出现弹出菜单&#xff1a; 选中属性&#xff0c;出现下面窗口&#xff1a; 点击“工具”这个tab页&#xff1a; 点击开始检查&#xff0c;出现如下界面&#xff1a; 两个复选框都选…
阅读更多...
开源机密计算平台：蓬莱-OpenHarmony

开源机密计算平台：蓬莱-OpenHarmony

演讲嘉宾 | 杜 东 回顾整理 | 廖 涛 排版校对 | 李萍萍 嘉宾简介 杜东&#xff0c;上海交通大学助理研究员。中国计算机学会CCF会员&#xff0c;ACM会员。研究兴趣为操作系统与体系结构、服务器无感知&#xff08;Serverless&#xff09;计算、系统安全。在包括ASPLOS、ISC…
阅读更多...
【扩散模型 李宏毅B站教学以及基础代码运用】

【扩散模型 李宏毅B站教学以及基础代码运用】

李宏毅教学视频&#xff1a; Link1 B站DDPM公式推导以及代码实现&#xff1a; Link2 这个视频里面有论文里面的公式推导&#xff0c;并且1小时10分开始讲解实例代码。 文章目录 扩散模型概念&#xff1a;Diffusion Model工作原理&#xff1a;影像生成模型本质上的共同目标B站…
阅读更多...
qt使用QCustomplot绘制cpu和内存使用率图

qt使用QCustomplot绘制cpu和内存使用率图

一、QCustomPlot介绍 QCustomPlot是一个开源的Qt C图表库&#xff0c;用于可视化数据。该库提供了多种类型的可定制的图表&#xff0c;包括散点图、线图、柱状图和等高线图等。它还支持自定义绘制&#xff0c;可以创建任意形状和大小的元素&#xff0c;并使其与其他元素交互。Q…
阅读更多...
iPad电容笔贵吗？开学季比较好用的ipad手写笔

iPad电容笔贵吗？开学季比较好用的ipad手写笔

“ipad好买&#xff0c;但是ipad的配件不好买”&#xff0c;我相信很多人都会有这个问题&#xff0c;如果你想要购买像Apple Pencil这样的官方配件&#xff0c;却很难舍得下手&#xff0c;因为一款Apple Pencil的价格就已经接近1000元了。就像许多人不愿购买昂贵的苹果官方产品…
阅读更多...
05 C/C++ 指针复杂类型说明 9月5日

05 C/C++ 指针复杂类型说明 9月5日

目录 C语⾔ (1)数组 (2)指针 指针变量 空指针 (3)指针复杂类型 int a 0; int *p &a; int p[3];​​​​​​​ int *p[3]; int (*p)[3]; int **p; int p(int); int(*p)(int); C语⾔ (1)数组 当数据具有相同的数据类型&#xff1b;使用过程中需要保留原始…
阅读更多...
在学习DNS的过程中给我的启发

在学习DNS的过程中给我的启发

在国内&#xff0c;关于DNS相关的话题一直络绎不绝&#xff0c;比如DNS根服务器为什么中国没有&#xff0c;还有Anycast BGP实现负载&#xff0c;为什么DNS只有13个&#xff0c;还有DNS over HTTPS 和 DNS over TLS的优劣等等问题&#xff0c;接下来我会找出几个一一说一下其中…
阅读更多...
【Linux】- 一文秒懂shell编程

【Linux】- 一文秒懂shell编程

shell编程 1.1 Shell 是什么1.2 Shell 脚本的执行方式1.3 编写第一个 Shell 脚本2.1 Shell 的变量2.2 shell 变量的定义2.3 设置环境变量3.1 位置参数变量3.2 预定义变量4.1 运算符4.2 条件判断5.1 流程控制5.2 case 语句5.3 for 循环5.4 while 循环5.5 read基本语法6.1函数6.2…
阅读更多...
API接口已经成为企业应用程序开发和管理的重要组成部分

API接口已经成为企业应用程序开发和管理的重要组成部分

API接口的价值 随着数字化时代的到来&#xff0c;API接口已经成为企业应用程序开发和管理的重要组成部分。API不仅是一种连接不同系统、提高数据流动性和促进协作的工具&#xff0c;而且还是一种重要的商业战略&#xff0c;可以为组织带来许多实际的价值。本文将探讨API接口的…
阅读更多...
Android的本地数据

Android的本地数据

何为本地&#xff0c;即写完之后除非手动修改&#xff0c;否像嘎了一样在那固定死了 在实际安卓开发中&#xff0c;这种写死的概念必不可少&#xff0c;如控件的id&#xff0c;某一常量&#xff0c;Kotlin中的Val 当然&#xff0c;有些需求可能也会要求我们去写死数据&#x…
阅读更多...
一文搞懂XaaS

一文搞懂XaaS

云服务是指通过互联网按需提供给企业和客户的各种服务&#xff0c;大致可以分为IaaS、PaaS、SaaS三类&#xff0c;每一类又衍生出不同细分的云服务模式。本文介绍了当前已经提出的19种云服务模式&#xff0c;原文: The Comprehensive Concept of IaaS, PaaS, SaaS, AaaS, BaaS,…
阅读更多...
基于STM32,TB6612,TCRT5000的简易红外循迹小车

基于STM32,TB6612,TCRT5000的简易红外循迹小车

提醒&#xff1a;本文章只叙述此小车相关大概内容&#xff08;如模块的设置&#xff0c;C语言基础实现等&#xff09;&#xff0c;单片机详细教学不涉及。 摘要 循迹小车是学习单片机的“地基”&#xff0c;它能够让初学者认识单片机内部硬件结构及其功能&#xff0c;熟悉单片机…
阅读更多...
安装RabbitMQ的各种问题（包括已注册成windows服务后，再次重新安装，删除服务重新注册遇到的问题）

安装RabbitMQ的各种问题（包括已注册成windows服务后，再次重新安装，删除服务重新注册遇到的问题）

一、安装Erlang&#xff08;傻瓜式安装&#xff09; 安装完成之后&#xff0c;配置环境变量&#xff1a; 1.新建系统变量名为&#xff1a;ERLANG_HOME 变量值为erlang安装地址 2. 双击系统变量path&#xff0c;点击“新建”&#xff0c;将%ERLANG_HOME%\bin加入到path中。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023