学习Bootstrap 5的第十二天

目录

轮播

轮播所使用的类说明

创建轮播

实例

轮播图片上添加描述

实例

模态框

如何创建模态框

实例

模态框尺寸

全屏模态

实例一

实例二

模态框居中显示

实例

模态框滚动条

实例

---

轮播

轮播所使用的类说明

类	描述
.carousel	创建轮播。
.carousel-indicators	为轮播添加指示器。它们是每张幻灯片底部的小点。 表示轮播中有多少张幻灯片，以及用户当前正在查看哪张幻灯片。
.carousel-inner	将幻灯片添加到轮播。
.carousel-item	规定每张幻灯片的内容。
.carousel-control-prev	向轮播添加一个向左（上一个）按钮，允许用户在幻灯片之间回退。
.carousel-control-next	向轮播添加一个向右（下一个）按钮，允许用户在幻灯片之间前进。
.carousel-control-prev-icon	与 .carousel-control-prev 一起使用，创建“上一个”按钮。
.carousel-control-next-icon	与 .carousel-control-next 一起使用，创建“下一个”按钮。
.slide	从一个项目滑到下一个项目时添加 CSS 过渡和动画效果。 如果您不想要这种效果，请删除此类。

创建轮播

实例

	
		
		
		
		
		
	
	
		

			
			

				

				

				

			

			
			

				

					
				
				

					
				
				

					
				
			

			
			
				
				Previous
			
			
				
				Next
			
		
	

运行结果

轮播图片上添加描述

要在轮播图片上添加描述文本，你可以在每个

的内部添加一个

元素。

实例

	
		
		
		
		
		
	
	
		

			

				

				

				

			

			

				

					
					

						
描述标题
						
这是图片1的描述
					
				
				

					
					

						
描述标题
						
这是图片2的描述
					
				
				

					
					

						
描述标题
						
这是图片3的描述
					
				
			

			
				
				Previous
			
			
				
				Next
			
		
	

运行结果

模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

如何创建模态框

要创建一个Bootstrap5模态框，需要使用以下步骤：

1. 在HTML文档中添加一个触发模态框的按钮。这个按钮可以是任何元素，比如一个普通的按钮或一个链接。
2. 创建模态框窗口。我们可以使用
   标签来创建模态框窗口。给

   元素添加两个重要的类名：modal 和 fade（使用 .fade 类可以设置模态框弹出或关闭的效果）。同时为

   元素指定唯一的id属性，这个id属性将会被用于后续的JavaScript代码中。注意，模态框的主体内容应该放在一个

   元素内。

实例

	
		
		
		
		
		
	
	
		

			
				打开模态框
			
			

				

					

						
						

							
模态框标题
							
						
						
						

							
这是模态框的内容
						
						
						

							关闭
							保存更改
						
					
				
			
		
	

运行结果

模态框尺寸

要调整模态框的尺寸，可以将 .modal-dialog 类与尺寸类（.modal-sm、.modal-lg、.modal-xl）一同添加到

元素。

全屏模态

如果你想要一个全屏的模态框，可以添加.modal-fullscreen类到.modal-dialog元素上。这样模态框将会占据整个屏幕。

注意：使用 .modal-fullscreen-*-* 类可以控制在什么尺寸下全屏幕显示:

类	描述	实例
.modal-fullscreen-sm-down	576px 以下尺寸全屏幕显示	尝试一下
.modal-fullscreen-md-down	768px 以下尺寸全屏幕显示	尝试一下
.modal-fullscreen-lg-down	992px 以下尺寸全屏幕显示	尝试一下
.modal-fullscreen-xl-down	1200px 以下尺寸全屏幕显示	尝试一下
.modal-fullscreen-xxl-down	1400px 以下尺寸全屏幕显示	尝试一下

实例一

以下是如何为模态框设置全屏模态的示例代码： 

	
		
		
		
		
		
	
	
		

			
				打开模态框
			
			

				

					

						
						

							
模态框标题
							
						
						
						

							
这是模态框的内容
						
						
						

							关闭
							保存更改
						
					
				
			
		
	

在这个示例中，.modal-dialog 元素添加了 .modal-fullscreen 类和 .modal-dialog-centered 类（用于居中显示模态框）。这将使模态框成为一个全屏模态框，并且居中显示在屏幕上。 

实例二

以下是如何为模态框设置不同尺寸的示例代码： 

	
		
		
		
		
		
	
	
		

			
				打开模态框
			
			

				

					

						
						

							
模态框标题
							
						
						
						

							
这是模态框的内容
						
						
						

							关闭
							保存更改
						
					
				
			
		
	

在这个示例中，.modal-dialog 类被添加了 .modal-lg 类。这将使模态框变为大型模态框，具有最大宽度为 800px 的样式。可以根据需要选择适当的尺寸类（.modal-sm、.modal-lg、.modal-xl）来调整模态框的大小。

运行结果

模态框居中显示

要让模态框水平和垂直方向都居中显示，可以使用.modal-dialog-centered类。将该类添加到.modal-dialog元素上即可。

实例

	
		
		
		
		
		
	
	
		

			
				打开模态框
			
			

				

					

						
						

							
模态框标题
							
						
						
						

							
这是模态框的内容
						
						
						

							关闭
							保存更改
						
					
				
			
		
	

运行结果

模态框滚动条

默认情况下模态框如果包含很多内容，页面会自动生成一个滚动，模态框随着页面的滚动而滚动。

但是，如果我们只想在模态框里头设置一个滚动条，可以使用 .modal-dialog-scrollable 类。

实例

	
		
		
		
		
		
	
	
		

			
				打开模态框
			
			

				

					

						
						

							
模态框标题
							
						
						
						

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

							模态框内容..

						
						
						

							关闭
							保存更改
						
					
				
			
		
	

运行结果