学习Bootstrap 5的第六天

已于 2023-09-07 19:35:57 修改
阅读量445 收藏 2
点赞数 1
分类专栏： Bootstrap 文章标签： 学习 bootstrap 前端
于 2023-09-06 21:33:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74293254/article/details/132718183
版权

目录

信息警告框

警告框

实例

警告框链接

实例

关闭警告框

实例

警告框动画

实例

按钮

按钮样式

实例

按钮轮廓

实例

​编辑按钮尺寸

实例

块级按钮

实例

实例

活动/禁用按钮

实例

加载器按钮

实例

扩展小知识

按钮组

按钮组

实例

实例

垂直按钮组

实例

并排按钮组

实例

内嵌按钮组及下拉菜单

实例

垂直按钮组及下拉菜单

实例

信息警告框

警告框

警告框是使用 .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，可以根据需要选择适当的大小来适配不同的场景。

按钮组

按钮组

Bootstrap 5 提供了按钮组的功能，允许将多个按钮组合在一起。要创建一个按钮组，需要使用带有 .btn-group 类的 <div> 元素。

实例

以下是一个示例代码，展示了如何使用 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 mt-3">
			<div class="btn-group">
				<button type="button" class="btn btn-primary">按钮 1</button>
				<button type="button" class="btn btn-secondary">按钮 2</button>
				<button type="button" class="btn btn-success">按钮 3</button>
			</div>
		</div>
	</body>
</html>

在上面的代码中，我们使用了一个 <div> 元素，并给它添加了 .btn-group 类来创建按钮组。然后，我们添加了三个按钮元素，每个按钮都具有不同的样式类，例如 .btn-primary、.btn-secondary 和 .btn-success。 

运行结果：

注意：如果你想要调整按钮组的尺寸，你可以使用 .btn-group-* 类。例如，.btn-group-lg 可以用于创建大按钮组，而 .btn-group-sm 可以用于创建小按钮组。

实例

<!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>
			<div class="btn-group">
				<button type="button" class="btn btn-primary">按钮 1</button>
				<button type="button" class="btn btn-secondary">按钮 2</button>
				<button type="button" class="btn btn-success">按钮 3</button>
			</div><br />
			<h1>大按钮:</h1>
			<div class="btn-group-lg">
				<button type="button" class="btn btn-primary">大按钮 1</button>
				<button type="button" class="btn btn-secondary">大按钮 2</button>
				<button type="button" class="btn btn-success">大按钮 3</button>
			</div><br />
			<h1>小按钮:</h1>
			<div class="btn-group-sm">
				<button type="button" class="btn btn-primary">小按钮 1</button>
				<button type="button" class="btn btn-secondary">小按钮 2</button>
				<button type="button" class="btn btn-success">小按钮 3</button>
			</div>
		</div>
	</body>
</html>

运行结果：

垂直按钮组

Bootstrap 5 提供了垂直按钮组的功能，可以使用 .btn-group-vertical 类来创建。

实例

以下是一个示例代码，展示如何使用 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 mt-3">
			<div class="btn-group-vertical">
				<button type="button" class="btn btn-primary">按钮 1</button>
				<button type="button" class="btn btn-secondary">按钮 2</button>
				<button type="button" class="btn btn-success">按钮 3</button>
			</div>
		</div>
	</body>
</html>

在上面的代码中，我们使用了一个 <div> 元素，并给它添加了 .btn-group-vertical 类来创建垂直按钮组。然后，我们添加了三个按钮元素，每个按钮都具有不同的样式类，例如 .btn-primary、.btn-secondary 和 .btn-success。 

运行结果：

并排按钮组

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 mt-3">
			<div class="btn-group">
				<button type="button" class="btn btn-primary">按钮 1</button>
				<button type="button" class="btn btn-secondary">按钮 2</button>
				<button type="button" class="btn btn-success">按钮 3</button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-primary">按钮 1</button>
				<button type="button" class="btn btn-secondary">按钮 2</button>
				<button type="button" class="btn btn-success">按钮 3</button>
			</div>
		</div>
	</body>
</html>

运行结果：

内嵌按钮组及下拉菜单

实例

<!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="btn-group">
				<button class="btn btn-primary">按钮 1</button>
				<button class="btn btn-primary">按钮 2</button>
				<div class="btn-group">
					<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">按钮3</button>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item" href="#">按钮 1</a></li>
						<li><a class="dropdown-item" href="#">按钮 2</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：

垂直按钮组及下拉菜单

实例

<!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="btn-group-vertical">
				<button class="btn btn-primary">按钮 1</button>
				<button class="btn btn-primary">按钮 2</button>
				<div class="btn-group">
					<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">按钮3</button>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item" href="#">按钮 1</a></li>
						<li><a class="dropdown-item" href="#">按钮 2</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：

正在奋斗的程序猿
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap 5-按钮
m0_73839298的博客
09-18 1241
• btn-outline-light text-dark（浅色，浅白色）• btn-outline-secondary（次要，灰色）• btn-outline-primary（主要，蓝色）• btn-out1ine-success（成功，绿色）• btn-outline-warning（警告，黄色）• btn-outline-danger（危险，红色）• btn-out1ine-info（信息，天蓝色）• btn-out1ine-dark（深色，深绿）• btn-info（信息，天蓝色）
BootStrap4：组件
分享日常工作技术
03-29 1726
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
m0_69034993的博客
11-07 4973
使用.btn-outline-*类可以没置按钮的边框，*可以从prirnary、secondary、success、danger.warning、info、light和dark中进行选择。Bootstrap提供了btn来定义按钮，btn定义了基本的按钮样式类。Bootstrap提供了.btn-group-lg，.btn-group-sm类作用在.btn-group类的容器，可以控制按钮组下的每个子按钮，实现样式缩放。使用.btn-lg、.btn-sm类样式，可分别实现大规格按钮、小规格按钮的定义。
BootStrap笔记-按钮相关
IT1995的博客
01-17 1420
程序运行截图如下： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-
21、警示框
QilanAllen的博客
06-02 946
在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示： 在Bootstrap框架有一个独立的组件，实现上述的效果，这个组件被称为警示框。 一、默认警示框 Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果： 1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本.
BootStrap笔记-信息提示框的使用
IT1995的博客
01-17 1661
程序运行截图如下： 源码如下； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-
Bootstrap5响应式在线教育课程学习平台网站模板
07-12
在"Bootstrap5响应式在线教育课程学习平台网站模板"中，我们可以深入探讨以下几个关键知识点： 1. **Bootstrap5框架**：Bootstrap是Twitter推出的一个开源的用于前端开发的工具集，现在已经发展到第五个版本。...
Bootstrap5
04-01
6. **图标库**：Bootstrap5内置了全新的Icon组件，提供了一套矢量图标，无需额外引入第三方图标库。 7. ** Typography和间距**：Bootstrap5更新了排版样式，优化了行高、字间距等，提供了更一致的视觉效果。同时，...
bootStrap学习
01-25
BootStrap3是BootStrap的第三个主要版本，它在2013年发布，并在后续几年内得到了广泛的应用和更新，提供了丰富的组件、网格系统、JavaScript插件以及易于定制的CSS、JS和LESS文件。 **一、BootStrap概述** ...
开启BootStrap学习之旅
09-02
Bootstrap是目前最流行的前端开发...通过学习Bootstrap，开发者不仅可以提升开发效率，还能创建出响应式、一致性和具有良好用户体验的网站。无论你是初学者还是经验丰富的开发者，Bootstrap都能为你带来极大的便利。
23.4 Bootstrap 框架5
最新发布
10-07
Bootstrap框架5是一个流行的前端开发工具，它用于构建响应式、移动优先的网页项目。...同时，通过阅读"23.4 Bootstrap 框架5.md"文件和查看"Bootstrap5"目录下的资源，可以更深入地学习和实践这些概念。
Bootstrap警告框
歪脖先生的博客
05-22 2394
警告框 在交互式网页中，经常要根据用户操作的上下文为用户提供灵活的提示信息，比如操作成功、操作失败、错误提示等。 Bootstrap的警告框组件，用于为这些提示信息提供样式支持。警告框的关闭行为还需要 警告框插件 （alert.js）的支持。因此，如果要创建可以关闭的警告框，还必须引入 alert.js 文件。 创建警告框 将任意文本和一个可选的关闭按钮组合在一起，就能组成一个警告框。默认...
Bootstrap4学习
Suxiaomowang的博客
08-25 845
btn 按钮 btn 按钮没有边框和背景 btn-xxxx 设置按钮背景 btn-outline-primary 设置按钮边框颜色鼠标进入后修改背景颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt.
Bootstrap系列之警告框（Alert）
老__L的博客
05-28 7420
警告框（Alert）
【Bootstrap 4】按钮
扬大酸奶的博客
12-31 1014
设置按钮 （.btn-*） 按钮类可用于&lt;a&gt;,&lt;button&gt;,&lt;input&gt;元素上  &lt;a href="#" class="btn btn-info" role="button"&gt;链接按钮&lt;/a&gt; &lt;button type="button" class=&quo
asp.net div显示带样式的字符串_Bootstrap的按钮样式
weixin_35599815的博客
12-26 223
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。颜色class.btn-primary.btn-secondary.btn-success.btn-danger.btn-warning.btn-info.btn-light.btn-dark.btn-link按钮标签.btn可以在<button>元素上使用，您也可以在&l...
Bootstrap系列之按钮（Buttons）
热门推荐
老__L的博客
05-28 1万+
按钮（Buttons）
bootstrap4学习记录1——初始化、按钮与文字
weixin_44089544的博客
02-18 776
boostrap小弟也是久仰大名了，今天正式进入学习，记录一下学习的内容。 完整练习代码在最下方，有兴趣的同学可以一起尝试！ Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。boostrap提供了一整套完善的、响应式的UI组件, 从PC端到移动端可以一站式开发，比较适合后台管理系统、门户 官网：https://v4.bootcs...
Bootstrap组件——提示、徽章、面包屑导航、按钮、按钮组
xun__xing的博客
07-29 1688
组件一、提示（alert）1.颜色2.链接颜色3.额外附加内容4.关闭警告二、徽章（badge）1.徽章样式的使用2.会继承父元素的一些属性3.在按钮里使用4.胶囊徽章三、面包屑导航（nav）四、按钮（btn）1.正常样式颜色2.其它类型的按钮3.带边框的按钮4.大小不同的按钮5.block类型的按钮6.启用与停用状态的按钮7.切换按钮的active状态8.选项卡的效果五、按钮组（btn-group）1.基本按钮组2.按钮工具栏3.大小规格和尺寸缩放4.嵌套5.垂直排列 一、提示（alert） 1.颜色 警
Bootstrap 4深度学习：第二版
"Learning.Bootstrap.4.2nd.Edition - 这是一本关于Bootstrap 4的第二版教程，由作者Matt Lambert编写，由Packt Publishing出版。这本书旨在帮助读者利用Bootstrap 4创建响应式且美观的现代网页，涵盖了最新的Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

正在奋斗的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值