• 学习Bootstrap 5的第十天

    目录

    卡片

    基础的卡片

    实例

    页眉和页脚

    实例

    多种颜色卡片

    实例

    标题、文本和链接

    实例

    图片卡片

    实例

    卡片图像叠加

    实例

    下拉菜单

    基础的下拉列表

    实例

    下拉列表分隔线

    实例

    下拉列表标题

    实例

    禁用的和活动的项目

    实例

    下拉列表位置

    实例

    下拉菜单弹出方向设置

    实例

    下拉菜单设置文本

    实例

    按钮组中设置下拉菜单

    实例

    趣味案例

    实例

    卡片

    基础的卡片

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

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>简单的卡片h1>
    13. 			<div class="card">
    14. 				<div class="card-body">简单的卡片div>
    15. 			div>
    16. 		div>
    17. 	body>
    18. html>

    运行结果

    页眉和页脚

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

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>页眉和页脚h1>
    13. 			<div class="card">
    14. 				<div class="card-header"> 页眉div>
    15. 				<div class="card-body">这是一些卡片内容。div>
    16. 				<div class="card-footer">页脚div>
    17. 			div>
    18. 		div>
    19. 	body>
    20. 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：浅色背景颜色，用于在浅色主题中使用。

    要使用这些上下文类，只需将其应用于卡片的容器元素上即可。

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>多种颜色卡片h1>
    13. 			<div class="card">
    14. 				<div class="card-body">基础卡片div>
    15. 			div>
    16. 			<br>
    17. 			<div class="card bg-primary text-white">
    18. 				<div class="card-body">主要卡片div>
    19. 			div>
    20. 			<br>
    21. 			<div class="card bg-success text-white">
    22. 				<div class="card-body">成功卡片div>
    23. 			div>
    24. 			<br>
    25. 			<div class="card bg-info text-white">
    26. 				<div class="card-body">信息卡片div>
    27. 			div>
    28. 			<br>
    29. 			<div class="card bg-warning text-white">
    30. 				<div class="card-body">警告卡片div>
    31. 			div>
    32. 			<br>
    33. 			<div class="card bg-danger text-white">
    34. 				<div class="card-body">危险卡片div>
    35. 			div>
    36. 			<br>
    37. 			<div class="card bg-secondary text-white">
    38. 				<div class="card-body">次要卡片div>
    39. 			div>
    40. 			<br>
    41. 			<div class="card bg-dark text-white">
    42. 				<div class="card-body">黑色卡片div>
    43. 			div>
    44. 			<br>
    45. 			<div class="card bg-light text-dark">
    46. 				<div class="card-body">浅色卡片div>
    47. 			div>
    48. 		div>
    49. 	body>
    50. html>

    运行结果

    标题、文本和链接

    在 Bootstrap 5 中，使用.card-title类可以设置卡片的标题样式，使用.card-body类可以设置卡片正文的内容样式，使用.card-text类可以设置在.card-body类中的

    标签的样式，并且如果希望最后一行没有底部边距，可以移除底部边距。另外，使用.card-link类可以设置链接的颜色样式。这些类可以帮助我们更好地控制和美化卡片的显示效果。

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>标题、文本和链接h1>
    13. 			<div class="card">
    14. 				<div class="card-body">
    15. 					<h5 class="card-title">卡片标题h5>
    16. 					<p class="card-text">卡片正文内容。p>
    17. 					<a href="#" class="card-link">链接a>
    18. 				div>
    19. 			div>
    20. 		div>
    21. 	body>
    22. html>

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

    运行结果

    图片卡片

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

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>图片卡片h1>
    13. 			<div class="row">
    14. 				<div class="col-sm-6">
    15. 					<p>图片在头部 (card-img-top):p>
    16. 					<div class="card" style="width:100%">
    17. 						<img class="card-img-top" src="img/1.png" alt="Card image" style="width:100%">
    18. 						<div class="card-body">
    19. 							<h4 class="card-title">标题h4>
    20. 							<p class="card-text">一些示例文本,一些示例文本。p>
    21. 							<a href="#" class="card-link">链接a>
    22. 						div>
    23. 					div>
    24. 				div>
    25. 				<div class="col-sm-6">
    26. 					<p>图片在底部(card-img-bottom):p>
    27. 					<div class="card" style="width:100%">
    28. 						<div class="card-body">
    29. 							<h4 class="card-title">标题h4>
    30. 							<p class="card-text">一些示例文本,一些示例文本。p>
    31. 							<a href="#" class="card-link">链接a>
    32. 						div>
    33. 						<img class="card-img-bottom" src="img/1.png" alt="Card image" style="width:100%">
    34. 					div>
    35. 				div>
    36. 			div>
    37. 		div>
    38. 	body>
    39. html>

    运行结果

    卡片图像叠加

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

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>卡片图像叠加h1>
    13. 			<div class="row">
    14. 				<div class="col-sm-6">
    15. 					<p>图片在头部 (card-img-top):p>
    16. 					<div class="card" style="width:100%">
    17. 						<img class="card-img-top" src="img/1.png" alt="Card Image" style="width:100%">
    18. 						<div class="card-img-overlay">
    19. 							<h4 class="card-title text-white">标题h4>
    20. 							<p class="card-text text-white">一些示例文本,一些示例文本。p>
    21. 							<a href="#" class="card-link">链接a>
    22. 						div>
    23. 					div>
    24. 				div>
    25. 				<div class="col-sm-6">
    26. 					<p>图片在底部(card-img-bottom):p>
    27. 					<div class="card" style="width: 100%; position: relative;">
    28. 						<div class="card-img-overlay  d-flex align-items-end">
    29. 							<h4 class="card-title text-white">标题h4>
    30. 							<p class="card-text text-white">一些示例文本,一些示例文本。p>
    31. 							<a href="#" class="card-link">链接a>
    32. 						div>
    33. 						<img class="card-img-bottom" src="img/1.png" alt="Card Image" style="width:100%">
    34. 					div>
    35. 				div>
    36. 			div>
    37. 		div>
    38. 	body>
    39. html>

    运行结果

    下拉菜单

    基础的下拉列表

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

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

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>基础的下拉列表h1>
    13. 			<div class="dropdown">
    14. 				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
    15. 					data-bs-toggle="dropdown" aria-expanded="false">
    16. 					下拉菜单按钮
    17. 				button>
    18. 				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    19. 					<li><a class="dropdown-item" href="#">链接 1a>li>
    20. 					<li><a class="dropdown-item" href="#">链接 2a>li>
    21. 					<li><a class="dropdown-item" href="#">链接 3a>li>
    22. 				ul>
    23. 			div>
    24. 		div>
    25. 	body>
    26. html>

    在这个示例中，我们创建了一个按钮作为下拉菜单的触发器，并添加了 data-bs-toggle="dropdown" 属性。在

      元素上添加 .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类来在下拉菜单中添加分隔线。这个类会在菜单项之间添加一个水平的细边框，从而起到分隔的作用。

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>基础的下拉列表h1>
      13. 			<div class="dropdown">
      14. 				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
      15. 					data-bs-toggle="dropdown" aria-expanded="false">
      16. 					下拉菜单按钮
      17. 				button>
      18. 				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      19. 					<li><a class="dropdown-item" href="#">链接 1a>li>
      20. 					<li><a class="dropdown-item" href="#">链接 2a>li>
      21. 					<li><a class="dropdown-item" href="#">链接 3a>li>
      22. 					<div class="dropdown-divider">div>
      23. 					<li><a class="dropdown-item" href="#">链接 4a>li>
      24. 				ul>
      25. 			div>
      26. 		div>
      27. 	body>
      28. html>

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

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

      运行结果

      下拉列表标题

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

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>基础的下拉列表h1>
      13. 			<div class="dropdown">
      14. 				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
      15. 					data-bs-toggle="dropdown" aria-expanded="false">
      16. 					下拉菜单按钮
      17. 				button>
      18. 				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      19. 					<div class="dropdown-header">标题 1div>  
      20. 					<li><a class="dropdown-item" href="#">链接 1a>li>
      21. 					<li><a class="dropdown-item" href="#">链接 2a>li>
      22. 					<li><a class="dropdown-item" href="#">链接 3a>li>
      23. 					<div class="dropdown-divider">div>
      24. 					<div class="dropdown-header">标题 2div>  
      25. 					<li><a class="dropdown-item" href="#">链接 4a>li>
      26. 				ul>
      27. 			div>
      28. 		div>
      29. 	body>
      30. html>

      运行结果

      禁用的和活动的项目

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

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

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>基础的下拉列表h1>
      13. 			<div class="dropdown">
      14. 				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
      15. 					data-bs-toggle="dropdown" aria-expanded="false">
      16. 					下拉菜单按钮
      17. 				button>
      18. 				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      19. 					<div class="dropdown-header">标题 1div>
      20. 					<li><a class="dropdown-item active" href="#">链接 1a>li>
      21. 					<li><a class="dropdown-item" href="#">链接 2a>li>
      22. 					<li><a class="dropdown-item disabled" href="#">链接 3a>li>
      23. 					<div class="dropdown-divider">div>
      24. 					<div class="dropdown-header">标题 2div>
      25. 					<li><a class="dropdown-item active" href="#">链接 4a>li>
      26. 				ul>
      27. 			div>
      28. 		div>
      29. 	body>
      30. html>

      运行结果

      下拉列表位置

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

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

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

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>基础的下拉列表h1>
      13. 			<div class="dropdown dropend">
      14. 				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
      15. 					data-bs-toggle="dropdown" aria-expanded="false">
      16. 					右边下拉菜单按钮
      17. 				button>
      18. 				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      19. 					<div class="dropdown-header">标题 1div>
      20. 					<li><a class="dropdown-item active" href="#">链接 1a>li>
      21. 					<li><a class="dropdown-item" href="#">链接 2a>li>
      22. 					<li><a class="dropdown-item disabled" href="#">链接 3a>li>
      23. 					<div class="dropdown-divider">div>
      24. 					<div class="dropdown-header">标题 2div>
      25. 					<li><a class="dropdown-item active" href="#">链接 4a>li>
      26. 				ul>
      27. 			div>
      28. 			<div class="dropdown dropstart text-end">
      29. 				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1"
      30. 					data-bs-toggle="dropdown" aria-expanded="false">
      31. 					左边下拉菜单按钮
      32. 				button>
      33. 				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      34. 					<div class="dropdown-header">标题 1div>
      35. 					<li><a class="dropdown-item active" href="#">链接 1a>li>
      36. 					<li><a class="dropdown-item" href="#">链接 2a>li>
      37. 					<li><a class="dropdown-item disabled" href="#">链接 3a>li>
      38. 					<div class="dropdown-divider">div>
      39. 					<div class="dropdown-header">标题 2div>
      40. 					<li><a class="dropdown-item active" href="#">链接 4a>li>
      41. 				ul>
      42. 			div>
      43. 		div>
      44. 	body>
      45. html>

      运行结果

      下拉菜单弹出方向设置

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

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

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>下拉菜单弹出方向设置h1>
      13. 			
      14. 			<div class="dropdown dropdown-menu-end">
      15. 				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
      16. 					data-bs-toggle="dropdown" aria-expanded="false">
      17. 					向右下方弹出的下拉菜单
      18. 				button>
      19. 				<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
      20. 					<li><a class="dropdown-item" href="#">Actiona>li>
      21. 					<li><a class="dropdown-item" href="#">Another actiona>li>
      22. 					<li><a class="dropdown-item" href="#">Something else herea>li>
      23. 				ul>
      24. 			div><br />
      25.  
      26. 			
      27. 			<div class="dropdown dropup text-center">
      28. 				<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
      29. 					data-bs-toggle="dropdown" aria-expanded="false">
      30. 					向上弹出的上拉菜单
      31. 				button>
      32. 				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      33. 					<li><a class="dropdown-item" href="#">Actiona>li>
      34. 					<li><a class="dropdown-item" href="#">Another actiona>li>
      35. 					<li><a class="dropdown-item" href="#">Something else herea>li>
      36. 				ul>
      37. 			div><br />
      38.  
      39. 			
      40. 			<div class="dropdown dropstart text-end">
      41. 				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
      42. 					data-bs-toggle="dropdown" aria-expanded="false">
      43. 					向左弹出的下拉菜单
      44. 				button>
      45. 				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      46. 					<li><a class="dropdown-item" href="#">Actiona>li>
      47. 					<li><a class="dropdown-item" href="#">Another actiona>li>
      48. 					<li><a class="dropdown-item" href="#">Something else herea>li>
      49. 				ul>
      50. 			div>
      51. 		div>
      52. 	body>
      53. html>

      运行结果

      下拉菜单设置文本

      在Bootstrap 5中，可以使用.dropdown-item-text类来设置下拉菜单中的文本项。这个类可以让文本项呈现为普通的文本，而不是链接或按钮。

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>下拉菜单设置文本h1>
      13. 			<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      14. 				下拉菜单设置文本
      15. 			button>
      16. 			<div class="dropdown-menu">
      17. 				<div class="dropdown-item-text">仅仅是文本div>
      18. 				<a class="dropdown-item" href="#">链接 1a>
      19. 				<a class="dropdown-item" href="#">链接 2a>
      20. 				<a class="dropdown-item" href="#">链接 3a>
      21. 				<div class="dropdown-divider">div>
      22. 				<a class="dropdown-item-text" href="#">文本链接a>
      23. 			div>
      24. 		div>
      25. 	body>
      26. html>

      运行结果

      按钮组中设置下拉菜单

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>按钮组中设置下拉菜单h1>
      13. 			<h2>在按钮中添加下拉菜单h2>
      14. 			<div class="btn-group">
      15. 				<button type="button" class="btn btn-primary">按钮 1button>
      16. 				<button type="button" class="btn btn-primary">按钮 2button>
      17. 				<div class="btn-group">
      18. 					<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">按钮
      19. 						3button>
      20. 					<ul class="dropdown-menu">
      21. 						<li><a class="dropdown-item" href="#">标题 1a>li>
      22. 						<li><a class="dropdown-item" href="#">标题 2a>li>
      23. 					ul>
      24. 				div>
      25. 			div>
      26. 			<h2>垂直方向内嵌按钮组h2>
      27. 			<div class="btn-group-vertical">
      28. 				<button type="button" class="btn btn-primary">按钮 1button>
      29. 				<button type="button" class="btn btn-primary">按钮 2button>
      30. 				<div class="btn-group">
      31. 					<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">按钮
      32. 						3button>
      33. 					<ul class="dropdown-menu">
      34. 						<li><a class="dropdown-item" href="#">标题 1a>li>
      35. 						<li><a class="dropdown-item" href="#">标题 2a>li>
      36. 					ul>
      37. 				div>
      38. 			div>
      39. 		div>
      40. 	body>
      41. html>

      运行结果

      趣味案例

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-4">
      12. 			<h3>中文日历h3>
      13. 			<div class="row">
      14. 				<div class="col-md-6">
      15. 					<div class="dropdown">
      16. 						<button class="btn btn-primary dropdown-toggle" type="button" id="monthDropdown"
      17. 							data-bs-toggle="dropdown" aria-expanded="false">
      18. 							选择月份
      19. 						button>
      20. 						<ul class="dropdown-menu" aria-labelledby="monthDropdown">
      21. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 1)">一月a>
      22. 							li>
      23. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 2)">二月a>
      24. 							li>
      25. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 3)">三月a>
      26. 							li>
      27. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 4)">四月a>
      28. 							li>
      29. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 5)">五月a>
      30. 							li>
      31. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 6)">六月a>
      32. 							li>
      33. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 7)">七月a>
      34. 							li>
      35. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 8)">八月a>
      36. 							li>
      37. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 9)">九月a>
      38. 							li>
      39. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 10)">十月a>
      40. 							li>
      41. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 11)">十一月a>
      42. 							li>
      43. 							<li><a class="dropdown-item" href="#" onclick="generateCalendar(selectedYear, 12)">十二月a>
      44. 							li>
      45. 						ul>
      46. 					div>
      47. 				div>
      48. 				<div class="col-md-6">
      49. 					<div class="input-group">
      50. 						<input type="number" class="form-control" id="yearInput" placeholder="输入年份" min="1900"
      51. 							max="2100">
      52. 						<button class="btn btn-primary" type="button" onclick="updateYear()">更新button>
      53. 					div>
      54. 				div>
      55. 			div>
      56.  
      57. 			<hr>
      58.  
      59. 			<table class="table table-bordered mt-3">
      60. 				<thead>
      61. 					<tr>
      62. 						<th>周日th>
      63. 						<th>周一th>
      64. 						<th>周二th>
      65. 						<th>周三th>
      66. 						<th>周四th>
      67. 						<th>周五th>
      68. 						<th>周六th>
      69. 					tr>
      70. 				thead>
      71. 				<tbody id="calendarBody">
      72.  
      73. 				tbody>
      74. 			table>
      75. 		div>
      76.  
      77. 		<script>
      78. 			var selectedYear = (new Date()).getFullYear();
      79.  
      80. 			// 初始化
      81. 			generateCalendar(selectedYear, (new Date()).getMonth() + 1);
      82.  
      83. 			function generateCalendar(year, month) {
      84. 				var calendarBody = document.getElementById("calendarBody");
      85. 				calendarBody.innerHTML = "";
      86.  
      87. 				var date = new Date();
      88. 				date.setFullYear(year);
      89. 				date.setMonth(month - 1);
      90. 				date.setDate(1);
      91.  
      92. 				var firstDayOfWeek = date.getDay();
      93.  
      94. 				var daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
      95.  
      96. 				var tableRow = document.createElement("tr");
      97.  
      98. 				for (var i = 0; i < firstDayOfWeek; i++) {
      99. 					var emptyCell = document.createElement("td");
      100. 					tableRow.appendChild(emptyCell);
      101. 				}
      102.  
      103. 				for (var day = 1; day <= daysInMonth; day++) {
      104. 					var tableCell = document.createElement("td");
      105. 					tableCell.textContent = day;
      106. 					tableRow.appendChild(tableCell);
      107.  
      108. 					if ((firstDayOfWeek + day - 1) % 7 === 6) {
      109. 						calendarBody.appendChild(tableRow);
      110. 						tableRow = document.createElement("tr");
      111. 					}
      112. 				}
      113.  
      114. 				if (tableRow.innerHTML !== "") {
      115. 					calendarBody.appendChild(tableRow);
      116. 				}
      117. 			}
      118.  
      119. 			function updateYear() {
      120. 				var yearInput = document.getElementById("yearInput");
      121. 				var year = parseInt(yearInput.value);
      122.  
      123. 				if (!isNaN(year)) {
      124. 					selectedYear = year;
      125. 					generateCalendar(selectedYear, (new Date()).getMonth() + 1);
      126. 				}
      127. 			}
      128. 		script>
      129. 	body>
      130. html>

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

      运行结果

  • 相关阅读:
    【Unity】【C#】【VS】如何将VS写的通用C#窗体程序修改为Unity程序
    Python实战一：获取某云app登录cookie
    Leetcode（135）——分发糖果
    LNMP搭建
    《HCIP-openEuler实验指导手册》1.3Apache动态功能模块加载卸载练习
    ABAP 长文本操作
    Docker安装部署RabbitMq
    Android AMS——ATMS解析（四）
    数字马力面试题
    【bugfix】error in chunk.js from uglifyjs
  • 原文地址：https://blog.csdn.net/m0_74293254/article/details/132781988