学习Bootstrap 5的第十天

news2025/1/18 21:21:35

目录

卡片

基础的卡片

实例

页眉和页脚

实例

多种颜色卡片

实例

标题、文本和链接

实例

图片卡片

实例

卡片图像叠加

实例

下拉菜单

基础的下拉列表

实例

下拉列表分隔线

实例

下拉列表标题

实例

禁用的和活动的项目

实例

下拉列表位置

实例

下拉菜单弹出方向设置

实例

下拉菜单设置文本

实例

按钮组中设置下拉菜单

实例

趣味案例

实例

卡片

基础的卡片

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()函数也进行了修改，将选择的年份作为参数传入，并相应地更新日期表格。通过这种方式，用户可以选择要显示的月份和年份，并根据选择更新日历显示。

运行结果

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

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

相关文章

SpringMVC之文件的上传下载（教你如何使用有关SpringMVC知识实现文件上传下载的超详细博客）

SpringMVC之文件的上传下载（教你如何使用有关SpringMVC知识实现文件上传下载的超详细博客）

目录 前言 一、文件上传 1. 配置多功能视图解析器&#xff08;spring-mvc.xml&#xff09; 2. 添加文件上传页面&#xff08;upload.jsp&#xff09; upload.jsp 3.做硬盘网络路径映射 4. 编写一个处理页面跳转的类 PageController.java ClazzController.java 5. 初步模…
阅读更多...
【数据分享】STRM 90米分辨率DEM地形数据（无需转发/全国/分省/分市）

【数据分享】STRM 90米分辨率DEM地形数据（无需转发/全国/分省/分市）

地形数据是我们在各种设计、研究中都经常使用的基础数据&#xff01;之前我们分享过12.5米精度的DEM地形数据、30米精度的DEM地形数据(均可查看之前的文章获悉详情&#xff09;。 本次给大家带来的是90米分辨率的DEM地形数据——STRM 90m高程数据&#xff01;该数据是由美国太…
阅读更多...
学成在线-网站搭建

学成在线-网站搭建

文章目录 代码素材来自b站pink老师 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线首…
阅读更多...
《PWA实战：如何为你的网站增加离线功能和推送通知》

《PWA实战：如何为你的网站增加离线功能和推送通知》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
Hbase解决ERROR: KeeperErrorCode = ConnectionLoss for /hbase/master报错

Hbase解决ERROR: KeeperErrorCode = ConnectionLoss for /hbase/master报错

1、在单机模式中&#xff0c;要先修改一个文件&#xff1a;/usr/local/hbase/conf/hbase-site.xml hbase-site.xml内容&#xff1a; <configuration><property><name>hbase.rootdir</name><value>file:///usr/local/hbase/hbase-tmp</value…
阅读更多...
dji uav建图导航系列（）move_base

dji uav建图导航系列（）move_base

文章目录 1、导航框架2、move_base功能包3、amcl功能包4、代价地图的配置4.1、通用配置文件4.2、全局规划配置文件4.3、局部规划配置文件5、局部规划器配置6、launch文件1、导航框架 导航的关键是机器人定位和路径规划两大部分 move_base：实现机器人导航中的最优路径规划 am…
阅读更多...
ES8生产实践——pod日志采集（Elastic Agent方案）

ES8生产实践——pod日志采集（Elastic Agent方案）

pod日志采集方案 方案选型 DaemonSetElastic Agent方案&#xff1a;使用DaemonSet控制器在每个kubernetes集群节点上运行elastic agent服务&#xff0c;业务容器日志目录统一挂载到节点指定目录下。在fleet中配置集成Custom Logs集成策略&#xff0c;指定日志采集目录和inges…
阅读更多...
【C语言 C++ 源码】课程设计 学生成绩管理系统

【C语言 C++ 源码】课程设计 学生成绩管理系统

文章目录 演示 对学生的信息、学科成绩进行管理&#xff0c;并进行统计。 对信息进行读写文件操作。自动保存数据到文件。 演示 此课设分为C语言和C两个版本。对于学生数据&#xff0c;会自动保存数据到本地&#xff0c;下次运行自动读取数据。 部分源码&#xff1a; printf…
阅读更多...
OceanBase 来参加外滩大会了(内附干货PPT)

OceanBase 来参加外滩大会了(内附干货PPT)

9 月 7 日至 9 日&#xff0c;2023 inclusion外滩大会在上海黄浦世博园区举办。8 日&#xff0c;由赛迪顾问与 OceanBase 联合主办的外滩大会“分布式数据库助力数实融合”见解论坛圆满落幕。 数字经济加速发展&#xff0c;数字化转型进入深水区&#xff0c;企业对海量数据的存…
阅读更多...
大数据课程L5——网站流量项目的实时业务系统搭建

大数据课程L5——网站流量项目的实时业务系统搭建

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 掌握网站流量项目的 Flume—>Kafka 连通； ⚪ 掌握网站流量项目的实时业务系统搭建； 一、Flume—>Kafka 连通 1. 实现步骤 1. 启动三台服务器。 2. 启动 Zookeeper 集群。 执行指…
阅读更多...
I2C总线驱动：裸机版、应用层的使用、二级外设驱动三种方法

I2C总线驱动：裸机版、应用层的使用、二级外设驱动三种方法

一、I2C总线背景知识 SOC芯片平台的外设分为&#xff1a; 一级外设&#xff1a;外设控制器集成在SOC芯片内部二级外设&#xff1a;外设控制器由另一块芯片负责&#xff0c;通过一些通讯总线与SOC芯片相连 Inter-Integrated Circuit&#xff1a; 字面意思是用于“集成电路之间…
阅读更多...
解决absolute绝对定位带来的div穿透问题

解决absolute绝对定位带来的div穿透问题

首先来看症状&#xff1a; 按理说蓝色和红色div应该并排同行显示&#xff0c;但是很明显&#xff1a;两个元素重叠了 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv&q…
阅读更多...
RNN项目实战——文本输入与预测

RNN项目实战——文本输入与预测

在本篇博客文章中&#xff0c;我们将使用pytorch搭建RNN模型来生成文本。 文本输入 神经网络不像人类那样善于处理文本数据。因为绝大多数的NLP任务&#xff0c;文本数据都会先通过嵌入码&#xff08;Embedding code)&#xff0c;独热编码(One-hot encoding)等方式转为数字编码…
阅读更多...
python DVWA命令注入POC练习

python DVWA命令注入POC练习

这里同样是抓包&#xff0c;访问DVWA低难度的命令注入 <?phpif( isset( $_POST[ Submit ] ) ) {// Get input$target $_REQUEST[ ip ];// Determine OS and execute the ping command.if( stristr( php_uname( s ), Windows NT ) ) {// Windows$cmd shell_exec( ping …
阅读更多...
RHCSA-VM-Linux基础配置命令

RHCSA-VM-Linux基础配置命令

1.代码命令 1.查看本机IP地址&#xff1a; ip addr 或者 ip a [foxbogon ~]$ ip addre [foxbogon ~]$ ip a 1&#xff1a;<Loopback,U,LOWER-UP> 为环回2网卡 2: ens160: <BROADCAST,MULTICAST,UP,LOWER_UP>为虚拟机自身网卡 2.测试网络联通性&#xff1a; [f…
阅读更多...
浅谈OPenGL中的纹理过滤

浅谈OPenGL中的纹理过滤

纹理图像中的纹理单元和屏幕上的像素几乎从来不会形成一对一的对应关系。如果程序员足够细心&#xff0c;确实可以实现这个效果&#xff0c;但这需要在对几何图形进行纹理贴图时进行精心的计划&#xff0c;使出现在屏幕上的纹理单元和像素能够对齐&#xff08;实际上在用OPenGL…
阅读更多...
项目协作软件对比分析：各大竞品的优缺点客观评析

项目协作软件对比分析：各大竞品的优缺点客观评析

随着科技的发展&#xff0c;越来越多的企业和团队开始使用项目协作软件来提高工作效率和协同能力。然而&#xff0c;市场上众多的项目协作软件让许多用户感到困惑&#xff0c;不知道如何选择最适合自己的工具。本文将从多个角度对目前市场上的主要项目协作软件进行客观分析&…
阅读更多...
cesium wall （动态立体墙效果）

cesium wall （动态立体墙效果）

cesium 动态立体墙效果 以下为源码直接复制可用 实现效果 实现思路 通过修改“material”自定义材质实现动态效果 核心类（WallCorrugationsMaterialProperty ）自定义材质 class WallCorrugationsMaterialProperty {constructor(options) {this
阅读更多...
51单片机的简易计算器数码管显示仿真设计( proteus仿真+程序+原理图+报告+讲解视频）

51单片机的简易计算器数码管显示仿真设计( proteus仿真+程序+原理图+报告+讲解视频）

51单片机的简易计算器数码管显示仿真设计 1.主要功能&#xff1a;2.仿真3. 程序代码4. 原理图5. 设计报告6. 设计资料内容清单&&下载链接 51单片机的简易计算器数码管显示仿真设计( proteus仿真程序原理图报告讲解视频&#xff09; 仿真图proteus7.8及以上 程序编译器…
阅读更多...
pyqt5设置背景图片

pyqt5设置背景图片

PyQt5设置背景图片 1、打开QTDesigner 创建一个UI&#xff0c;camera.ui。 2、创建一个pictures.qrc文件 在ui文件同级目录下先创建一个pictures.txt&#xff0c;填写内容&#xff1a; <RCC><qresource prefix"media"><file>1.jpg</file>…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023