学习Bootstrap 5的第十天

已于 2023-09-10 17:53:39 修改
阅读量534 收藏 3
点赞数 2
分类专栏： Bootstrap 文章标签： 学习 bootstrap 前端
于 2023-09-10 17:08:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74293254/article/details/132781988
版权

目录

卡片

基础的卡片

实例

页眉和页脚

实例

多种颜色卡片

实例

标题、文本和链接

实例

图片卡片

实例

卡片图像叠加

实例

下拉菜单

基础的下拉列表

实例

下拉列表分隔线

实例

下拉列表标题

实例

禁用的和活动的项目

实例

下拉列表位置

实例

下拉菜单弹出方向设置

实例

下拉菜单设置文本

实例

按钮组中设置下拉菜单

实例

趣味案例

实例

卡片

基础的卡片

Bootstrap 5 提供了.card 与 .card-body 类，可以用于创建各种类型的卡片，包括简单的卡片、带有头部和底部的卡片、带有各种颜色的卡片等等。

实例

<!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="card">
				<div class="card-body">简单的卡片</div>
			</div>
		</div>
	</body>
</html>

运行结果

页眉和页脚

在 Bootstrap 5 中，.card-header 类用于创建卡片的头部样式，而 .card-footer 类用于创建卡片的底部样式。

实例

<!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="card">
				<div class="card-header"> 页眉</div>
				<div class="card-body">这是一些卡片内容。</div>
				<div class="card-footer">页脚</div>
			</div>
		</div>
	</body>
</html>

运行结果

多种颜色卡片

Bootstrap 5 提供了多种上下文类来为卡片添加不同的背景颜色。这些上下文类是：

  1. .bg-primary：主要背景颜色，通常用于突出显示或主题颜色。
  2. .bg-success：成功或积极的背景颜色，用于表示成功或完成的任务。
  3. .bg-info：信息或通知的背景颜色，用于提供额外信息或注释。
  4. .bg-warning：警告或潜在问题的背景颜色，用于提醒用户注意某些问题。
  5. .bg-danger：危险或错误的背景颜色，用于表示错误或危险的情况。
  6. .bg-secondary：次要背景颜色，通常用于次要的元素或内容。
  7. .bg-dark：深色背景颜色，用于在深色主题中使用。
  8. .bg-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>
			<div class="card">
				<div class="card-body">基础卡片</div>
			</div>
			<br>
			<div class="card bg-primary text-white">
				<div class="card-body">主要卡片</div>
			</div>
			<br>
			<div class="card bg-success text-white">
				<div class="card-body">成功卡片</div>
			</div>
			<br>
			<div class="card bg-info text-white">
				<div class="card-body">信息卡片</div>
			</div>
			<br>
			<div class="card bg-warning text-white">
				<div class="card-body">警告卡片</div>
			</div>
			<br>
			<div class="card bg-danger text-white">
				<div class="card-body">危险卡片</div>
			</div>
			<br>
			<div class="card bg-secondary text-white">
				<div class="card-body">次要卡片</div>
			</div>
			<br>
			<div class="card bg-dark text-white">
				<div class="card-body">黑色卡片</div>
			</div>
			<br>
			<div class="card bg-light text-dark">
				<div class="card-body">浅色卡片</div>
			</div>
		</div>
	</body>
</html>

运行结果

标题、文本和链接

在 Bootstrap 5 中，使用.card-title类可以设置卡片的标题样式，使用.card-body类可以设置卡片正文的内容样式，使用.card-text类可以设置在.card-body类中的<p>标签的样式，并且如果希望最后一行没有底部边距，可以移除底部边距。另外，使用.card-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">
			<h1>标题、文本和链接</h1>
			<div class="card">
				<div class="card-body">
					<h5 class="card-title">卡片标题</h5>
					<p class="card-text">卡片正文内容。</p>
					<a href="#" class="card-link">链接</a>
				</div>
			</div>
		</div>
	</body>
</html>

在上面的示例中，我们使用了.card类来创建一个卡片容器。在.card-body类内部，我们设置了一个卡片标题使用.card-title类，并且设置了一个卡片正文内容使用.card-text类。最后，我们添加了一个链接使用.card-link类。可以根据需要自定义这些类的样式，例如，可以使用CSS来更改文字颜色、背景颜色、边框样式等。

运行结果

图片卡片

在 Bootstrap 5 中，可以使用.card-img-top类将图片放置在文字上方，或使用.card-img-bottom类将图片放置在文字下方。

实例

<!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="row">
				<div class="col-sm-6">
					<p>图片在头部 (card-img-top):</p>
					<div class="card" style="width:100%">
						<img class="card-img-top" src="img/1.png" alt="Card image" style="width:100%">
						<div class="card-body">
							<h4 class="card-title">标题</h4>
							<p class="card-text">一些示例文本,一些示例文本。</p>
							<a href="#" class="card-link">链接</a>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<p>图片在底部(card-img-bottom):</p>
					<div class="card" style="width:100%">
						<div class="card-body">
							<h4 class="card-title">标题</h4>
							<p class="card-text">一些示例文本,一些示例文本。</p>
							<a href="#" class="card-link">链接</a>
						</div>
						<img class="card-img-bottom" src="img/1.png" alt="Card image" style="width:100%">
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果

卡片图像叠加

可以使用 Bootstrap 的 card 组件和 card-img-overlay 类来创建卡片图像叠加的效果。

实例

<!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="row">
				<div class="col-sm-6">
					<p>图片在头部 (card-img-top):</p>
					<div class="card" style="width:100%">
						<img class="card-img-top" src="img/1.png" alt="Card Image" style="width:100%">
						<div class="card-img-overlay">
							<h4 class="card-title text-white">标题</h4>
							<p class="card-text text-white">一些示例文本,一些示例文本。</p>
							<a href="#" class="card-link">链接</a>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<p>图片在底部(card-img-bottom):</p>
					<div class="card" style="width: 100%; position: relative;">
						<div class="card-img-overlay  d-flex align-items-end">
							<h4 class="card-title text-white">标题</h4>
							<p class="card-text text-white">一些示例文本,一些示例文本。</p>
							<a href="#" class="card-link">链接</a>
						</div>
						<img class="card-img-bottom" src="img/1.png" alt="Card Image" style="width:100%">
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果

下拉菜单

基础的下拉列表

Bootstrap 5 中的下拉菜单是可切换的，以列表格式显示链接的上下文菜单。要创建一个下拉菜单，需要遵循以下步骤：

  1. 创建一个按钮或链接，并添加 .dropdown-toggle 类和 data-bs-toggle="dropdown" 属性。这将作为下拉菜单的触发器。
  2. 在 <div> 元素上添加 .dropdown-menu 类来设置实际的下拉菜单。
  3. 在下拉菜单中添加 <div> 元素，并为其添加 .dropdown-item 类，以创建下拉菜单的选项。

实例

<!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="dropdown">
				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
					data-bs-toggle="dropdown" aria-expanded="false">
					下拉菜单按钮
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<li><a class="dropdown-item" href="#">链接 1</a></li>
					<li><a class="dropdown-item" href="#">链接 2</a></li>
					<li><a class="dropdown-item" href="#">链接 3</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

在这个示例中，我们创建了一个按钮作为下拉菜单的触发器，并添加了 data-bs-toggle="dropdown" 属性。在 <ul> 元素上添加 .dropdown-menu 类来设置实际的下拉菜单，并在每个选项中添加 .dropdown-item 类。最后，我们使用 aria-labelledby 属性将下拉菜单与触发器按钮关联起来。 

扩展小知识

aria-labelledby="dropdownMenuButton" 是一个 ARIA (Accessible Rich Internet Applications) 属性，它提供了一种方式来标识一个元素，以便辅助技术（如屏幕阅读器）能够正确理解和传达其内容。

在这个特定的例子中，aria-labelledby="dropdownMenuButton" 是用于将下拉菜单与触发它的按钮关联起来。这样，当用户与下拉菜单交互时，辅助技术将能够正确地传达下拉菜单的状态和内容。aria-labelledby 属性的值应该是一个 ID，指向与当前元素相关的另一个元素。在这个例子中，dropdownMenuButton 是触发下拉菜单的按钮的 ID。这意味着，当用户与下拉菜单交互时，辅助技术将能够正确地传达下拉菜单的状态和内容。

使用 aria-labelledby 属性可以提高网站的可访问性，使辅助技术用户能够更轻松地理解和导航网站内容。

运行结果

下拉列表分隔线

在Bootstrap中，可以使用.dropdown-divider类来在下拉菜单中添加分隔线。这个类会在菜单项之间添加一个水平的细边框，从而起到分隔的作用。

实例

<!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="dropdown">
				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
					data-bs-toggle="dropdown" aria-expanded="false">
					下拉菜单按钮
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<li><a class="dropdown-item" href="#">链接 1</a></li>
					<li><a class="dropdown-item" href="#">链接 2</a></li>
					<li><a class="dropdown-item" href="#">链接 3</a></li>
					<div class="dropdown-divider"></div>
					<li><a class="dropdown-item" href="#">链接 4</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

在这个例子中，我们创建了一个下拉菜单，其中包含了两个菜单项，然后使用.dropdown-divider类在它们之间添加了一个分隔线。最后，我们又添加了一个菜单项，它出现在分隔线的下方。

需要注意的是，.dropdown-divider类只能用在.dropdown-menu类的内部，否则将不会显示任何效果。

运行结果

下拉列表标题

在Bootstrap中，可以使用.dropdown-header类来在下拉菜单中添加标题。这个类会让元素呈现为粗体文本，并且在需要的时候添加一个分隔线。

实例

<!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="dropdown">
				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
					data-bs-toggle="dropdown" aria-expanded="false">
					下拉菜单按钮
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<div class="dropdown-header">标题 1</div>  
					<li><a class="dropdown-item" href="#">链接 1</a></li>
					<li><a class="dropdown-item" href="#">链接 2</a></li>
					<li><a class="dropdown-item" href="#">链接 3</a></li>
					<div class="dropdown-divider"></div>
					<div class="dropdown-header">标题 2</div>  
					<li><a class="dropdown-item" href="#">链接 4</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

运行结果

禁用的和活动的项目

在Bootstrap中，可以使用.active类来突出显示特定的下拉项，并使用.disabled类来禁用下拉菜单中的某个项目。

需要注意的是，禁用状态只应用于链接元素，而不是按钮元素。如果需要禁用按钮元素，可以使用.disabled类，但是需要使用自定义的CSS样式来改变按钮的禁用状态样式。

实例

<!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="dropdown">
				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
					data-bs-toggle="dropdown" aria-expanded="false">
					下拉菜单按钮
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<div class="dropdown-header">标题 1</div>
					<li><a class="dropdown-item active" href="#">链接 1</a></li>
					<li><a class="dropdown-item" href="#">链接 2</a></li>
					<li><a class="dropdown-item disabled" href="#">链接 3</a></li>
					<div class="dropdown-divider"></div>
					<div class="dropdown-header">标题 2</div>
					<li><a class="dropdown-item active" href="#">链接 4</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

运行结果

下拉列表位置

在Bootstrap中，可以使用.dropend和.dropstart类来控制下拉菜单的定位。

  1. .dropend类会将下拉菜单定位在元素的右侧。
  2. .dropstart类会将下拉菜单定位在元素的左侧。

这些类需要添加到.dropdown类的元素上。

实例

<!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="dropdown dropend">
				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
					data-bs-toggle="dropdown" aria-expanded="false">
					右边下拉菜单按钮
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<div class="dropdown-header">标题 1</div>
					<li><a class="dropdown-item active" href="#">链接 1</a></li>
					<li><a class="dropdown-item" href="#">链接 2</a></li>
					<li><a class="dropdown-item disabled" href="#">链接 3</a></li>
					<div class="dropdown-divider"></div>
					<div class="dropdown-header">标题 2</div>
					<li><a class="dropdown-item active" href="#">链接 4</a></li>
				</ul>
			</div>
			<div class="dropdown dropstart text-end">
				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1"
					data-bs-toggle="dropdown" aria-expanded="false">
					左边下拉菜单按钮
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<div class="dropdown-header">标题 1</div>
					<li><a class="dropdown-item active" href="#">链接 1</a></li>
					<li><a class="dropdown-item" href="#">链接 2</a></li>
					<li><a class="dropdown-item disabled" href="#">链接 3</a></li>
					<div class="dropdown-divider"></div>
					<div class="dropdown-header">标题 2</div>
					<li><a class="dropdown-item active" href="#">链接 4</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

运行结果

下拉菜单弹出方向设置

在Bootstrap中，可以使用一些特定的类来控制下拉菜单的弹出方向。

  • 默认情况下，下拉菜单会向下弹出。
  • 如果希望下拉菜单向右下方弹出，可以在.dropdown-menu元素上添加.dropdown-menu-end类。
  • 如果希望上拉菜单向上弹出，可以在.dropdown元素上添加dropup类。
  • 如果希望下拉菜单向左弹出，可以在.dropdown-menu元素上添加dropstart类。

实例

<!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="dropdown dropdown-menu-end">
				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
					data-bs-toggle="dropdown" aria-expanded="false">
					向右下方弹出的下拉菜单
				</button>
				<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
					<li><a class="dropdown-item" href="#">Action</a></li>
					<li><a class="dropdown-item" href="#">Another action</a></li>
					<li><a class="dropdown-item" href="#">Something else here</a></li>
				</ul>
			</div><br />

			<!-- 向上弹出的上拉菜单 -->
			<div class="dropdown dropup text-center">
				<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
					data-bs-toggle="dropdown" aria-expanded="false">
					向上弹出的上拉菜单
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<li><a class="dropdown-item" href="#">Action</a></li>
					<li><a class="dropdown-item" href="#">Another action</a></li>
					<li><a class="dropdown-item" href="#">Something else here</a></li>
				</ul>
			</div><br />

			<!-- 向左弹出的下拉菜单 -->
			<div class="dropdown dropstart text-end">
				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
					data-bs-toggle="dropdown" aria-expanded="false">
					向左弹出的下拉菜单
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<li><a class="dropdown-item" href="#">Action</a></li>
					<li><a class="dropdown-item" href="#">Another action</a></li>
					<li><a class="dropdown-item" href="#">Something else here</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

运行结果

下拉菜单设置文本

在Bootstrap 5中，可以使用.dropdown-item-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">
			<h1>下拉菜单设置文本</h1>
			<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
				下拉菜单设置文本
			</button>
			<div class="dropdown-menu">
				<div class="dropdown-item-text">仅仅是文本</div>
				<a class="dropdown-item" href="#">链接 1</a>
				<a class="dropdown-item" href="#">链接 2</a>
				<a class="dropdown-item" href="#">链接 3</a>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item-text" href="#">文本链接</a>
			</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">
			<h1>按钮组中设置下拉菜单</h1>
			<h2>在按钮中添加下拉菜单</h2>
			<div class="btn-group">
				<button type="button" class="btn btn-primary">按钮 1</button>
				<button type="button" class="btn btn-primary">按钮 2</button>
				<div class="btn-group">
					<button type="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>
			<h2>垂直方向内嵌按钮组</h2>
			<div class="btn-group-vertical">
				<button type="button" class="btn btn-primary">按钮 1</button>
				<button type="button" class="btn btn-primary">按钮 2</button>
				<div class="btn-group">
					<button type="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-4">
			<h3>中文日历</h3>
			<div class="row">
				<div class="col-md-6">
					<div class="dropdown">
						<button class="btn btn-primary dropdown-toggle" type="button" id="monthDropdown"
							data-bs-toggle="dropdown" aria-expanded="false">
							选择月份
						</button>
						<ul class="dropdown-menu" aria-labelledby="monthDropdown">
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 1)">一月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 2)">二月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 3)">三月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 4)">四月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 5)">五月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 6)">六月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 7)">七月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 8)">八月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 9)">九月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 10)">十月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 11)">十一月</a>
							</li>
							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 12)">十二月</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-6">
					<div class="input-group">
						<input type="number" class="form-control" id="yearInput" placeholder="输入年份" min="1900"
							max="2100">
						<button class="btn btn-primary" type="button" onclick="updateYear()">更新</button>
					</div>
				</div>
			</div>

			<hr>

			<table class="table table-bordered mt-3">
				<thead>
					<tr>
						<th>周日</th>
						<th>周一</th>
						<th>周二</th>
						<th>周三</th>
						<th>周四</th>
						<th>周五</th>
						<th>周六</th>
					</tr>
				</thead>
				<tbody id="calendarBody">

				</tbody>
			</table>
		</div>

		<script>
			var selectedYear = (new Date()).getFullYear();

			// 初始化
			generateCalendar(selectedYear, (new Date()).getMonth() + 1);

			function generateCalendar(year, month) {
				var calendarBody = document.getElementById("calendarBody");
				calendarBody.innerHTML = "";

				var date = new Date();
				date.setFullYear(year);
				date.setMonth(month - 1);
				date.setDate(1);

				var firstDayOfWeek = date.getDay();

				var daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

				var tableRow = document.createElement("tr");

				for (var i = 0; i < firstDayOfWeek; i++) {
					var emptyCell = document.createElement("td");
					tableRow.appendChild(emptyCell);
				}

				for (var day = 1; day <= daysInMonth; day++) {
					var tableCell = document.createElement("td");
					tableCell.textContent = day;
					tableRow.appendChild(tableCell);

					if ((firstDayOfWeek + day - 1) % 7 === 6) {
						calendarBody.appendChild(tableRow);
						tableRow = document.createElement("tr");
					}
				}

				if (tableRow.innerHTML !== "") {
					calendarBody.appendChild(tableRow);
				}
			}

			function updateYear() {
				var yearInput = document.getElementById("yearInput");
				var year = parseInt(yearInput.value);

				if (!isNaN(year)) {
					selectedYear = year;
					generateCalendar(selectedYear, (new Date()).getMonth() + 1);
				}
			}
		</script>
	</body>
</html>

在上述代码中，我们添加了一个输入框和一个按钮，用于更新选择的年份。输入框接受用户输入的年份，按钮点击后调用updateYear()函数来更新年份。在JavaScript中，我们引入了一个额外的selectedYear变量，用于存储用户选择的年份。在初始加载页面时，默认使用当前年份。generateCalendar()函数也进行了修改，将选择的年份作为参数传入，并相应地更新日期表格。通过这种方式，用户可以选择要显示的月份和年份，并根据选择更新日历显示。

运行结果

程序员老李头
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
第一次记录Bootstrap table学习笔记（1）
01-19
第一次使用Bootstrap-table这个表格插件，记录一下使用过程中遇到的问题。 |引入CSS文件 <link rel=stylesheet href=bootstrap.min.css> <link rel=stylesheet href=bootstrap-table.css> |引入相关库 我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件 [removed][removed] [removed][removed] <script sr
Bootstrap5详细讲解
Harris-H的博客
08-30 4945
文章目录Boostrap v50.介绍1.快速开始2.布局容器 Boostrap v5 0.介绍 使用 Bootstrap 构建快速、响应式布局的网站 Bootstrap 是全球最流行的前端开源工具包，它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。 1.快速开始 <!doctype html> <html lang="zh-CN"> <head> &l
Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、 按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类
linjun的博客
07-25 2680
Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、 按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类
Bootstrap5 网格系统讲解
qq_65552364的博客
05-22 2423
一、列样式 二、网格类 三、网格系统规则 四、使用案例 五、列偏移 六、列顺序 七、对齐方式 前言 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统。随着视口尺寸的变化，根据视口的大小进行重新排布。在BootStrap5中，行(.row)是较为重要的元素，行是列的包装器，每一列最好包含在类名为row的容器之中。而每行又分为12个模板列，允许创建跨任意数量列的不同元素组合。列类指示要跨越的模板列数(例如，col-4 即跨越4个列，col-6即跨越6个列)，宽度是按百分比..
bootstrap5
云墨知秋的博客
11-06 3287
Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
Bootstrap5
2301_80438496的博客
11-12 336
container类用于固定宽度并支持响应式布局的容器.container-fluid类用于100%宽度，占据全部视口的容器。
BootStrap5基础入门
Artisan_w
10-13 826
1、引入依赖从官网 getbootstrap.com 下载 Bootstrap 5。或者Bootstrap 5 CDN注意：bootstrap.bundle.min.js 包含了 Bootstrap 的 JavaScript 组件以及必需的 Popper.js 库，它是一个捆绑版的 Bootstrap JavaScript 文件。所以，当你使用 bootstrap.bundle.min.js 时，不需要额外引入 bootstrap.min.js 或 Popper.js，因为它们已经包含在内。
Bootstrap5（快速入门）
weixin_46127956的博客
11-06 2035
Bootstrap5快速入门使用
学习Bootstrap 5的第一天
m0_74293254的博客
09-01 817
Bootstrap 简介Bootstrap 简介什么是 Bootstrap 5？Bootstrap 5 是 Bootstrap 的最新版本，它是最流行的 HTML、CSS 和 JavaScript 框架，用于创建响应式、移动优先的网站。Bootstrap5 与3 & 4的对比总体对比：具体对比：Bootstrap 3、4和5之间存在一些显著的区别。
Bootstrap 发布十周年，Bootstrap 5都有什么新功能？
前端全栈开发者
08-25 3821
近日，知名前端工具包 Bootstrap 官博宣布十周年，其创始人 Mark Otto 回顾了这十年里取得的一些成就与里程碑数据： 文档浏览量超过 25 亿次，每天超过 685,000 次； 自 2015 年以来，npm 下载量为3.94 亿，仅 2020 年就有超过 1.31 亿次下载。在过去的六年中，每天有 180,000 次。 5000 万次 RubyGems 下载 5700 万次 NuGet 下载 750 万次 Packagist 安装 被超过 22% 的网站使用 被 GitHub 上的 270
bootstrap-5-login-page:基于Bootstrap 5的登录页面模板
03-06
Bootstrap 5登录页面 这是Bootstrap 5登录页面模板，您可以根据需要使用它，并且可以免费用于个人或商业用途。 安装 让我们轻松一点！ 只需下载此模板，然后在您的项目中使用它即可。 演示版 特征 Bootstrap 5（测试版2） Bootstrap 5验证 W3C验证 包括4页（登录，注册，忘记密码，重置密码） 没有自定义类 便于使用 跨浏览器兼容性（Chrome，Firefox，Opera，IE11，Safari） 全面响应 和更多 ... 报告一些错误 发现错误？ 请，我们将对其进行修复以提供更好的模板。 贡献 始终欢迎并推荐您的贡献！ 方法如下： 分叉存储库（）。 克隆到您的机器上git clone 进行更改 创建拉取请求 变更日志 2021年3月6日 Bootstrap 5版本的初始版本 2017年8月29日 BOotstrap 4版本的初始发行版（
bootstrap5：Bootstrap 5-示例和练习项目
03-04
Desenvolver布局baseado no arquivo MODELO SITE： 1 Colunas ao ser visualizado否celular 2 Colunas ao ser visualizado否平板电脑4 Colunas ao ser visualizado否computador Deveráconter： 影像 文字报 文本 Botãocom o texto-塞巴舞 软件ERP Trabalhamos comvários的客户，DES PORTE Pequenoatémulti nacionais e estamos prreparados para melhor lender。 （imagem：software.png） Aplicativos移动版 Android应用程序和IOS参数集成软件。 （imagem：mobile.png） Desen
第十篇BootStrap轮播插件使用详解
09-02
Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。本文给大家介绍BootStrap轮播插件使用详解，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧
JAVA WEB学习课件及代码详解第三部分
07-07
JAVA的J2EE WEB学习资料，其中包括了学习视频、讲义、笔记、以及练习代码等，适合刚接触JAVA同时需要搭建WEB平台的同学使用。 此为第一部分，包括以下课程内容： 1、day09_JavaScript基础 2、day10_JavaScript高级 3...
100DaysOfCode:100天的代码学习和完成的项目
04-27
第1天到第10天 第11天到第27天 第28天投资组合 重新创建了我的投资组合网站balu.dev及其源代码 回到顶部 第29天-Bootstrap V4.6 通过使用引导程序的文档创建产品登录页面来学习引导程序（V4.6）。 截屏 回到...
Linux 学习之路 -- 进程篇 -- 进程控制
2302_79538079的博客
04-24 1151
进程控制的简单介绍
力扣数据库题库学习（4.28日）--1587. 银行账户概要 II
最新发布
Jesse_Kyrie的博客
04-28 165
对于力扣题1587. 银行账户概要 II的解答，提供解题思路与解题方法，知识点为:1. GROUP BY 2. SUM 3. LEFT JOIN 4. HAVING
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 711
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
集成学习算法学习笔记
m0_46521579的博客
04-27 413
三个臭皮匠顶一个诸葛亮集成学习会考虑多个评估器的建模结果，汇总后得到一个综合的结果，以此来获取比单个模型更好的回归或分类表现。很多独立的机器学习算法：决策树、神经网络、支持向量机集成学习构建了一组基学习器，并将它们综合起来作为最终的模型。在很多集成学习模型中，对基学习器的要求很低。集成学习适用于机器学习的几乎所有领域：回归、分类、推荐和排序。相同的多个基学习器不会带来任何提升，不同的模型取长补短，每个基学习器都会犯不同的错误，综合起来犯错的可能性不大。
bootstrap 学习
05-26
Bootstrap是一个开源的前端框架，由Twitter的设计师和工程师共同开发。它提供了一系列的CSS、JavaScript和HTML组件，可用于快速搭建现代化的响应式网站和Web应用程序。 学习Bootstrap可以帮助你更高效地开发Web应用程序，减少开发时间和成本。以下是一些学习Bootstrap的步骤： 1. 了解Bootstrap的基础知识：Bootstrap提供了一系列的CSS类和JavaScript插件，用于快速搭建响应式布局、表单、导航条等组件。你可以先了解Bootstrap的基础知识，包括网格系统、排版、颜色、图标等。 2. 阅读Bootstrap文档：Bootstrap官方文档提供了详细的说明和示例，可以帮助你更好地理解Bootstrap的用法和功能。你可以按照文档的顺序逐步学习Bootstrap的各个组件和插件，从而掌握其使用方法。 3. 实践Bootstrap的应用：通过实践应用，你可以更深入地理解Bootstrap的用法和功能。你可以从简单的网站布局开始，逐步尝试使用Bootstrap的各个组件和插件，例如导航条、表单、模态框等。 4. 学习Bootstrap的扩展库：Bootstrap有许多扩展库，例如Bootstrap Material Design、BootstrapVue等，可以进一步扩展Bootstrap的功能和应用范围。你可以学习这些扩展库，并尝试将其应用到你的项目中。 5. 查阅Bootstrap的案例：Bootstrap已经被广泛应用于各种类型的Web应用程序，你可以查阅一些Bootstrap的案例，例如Bootstrap官方网站、Bootstrap Expo等，了解Bootstrap在实际项目中的应用和优化方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员老李头

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

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

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

打赏作者

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

抵扣说明：

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

余额充值