学习Bootstrap 5的第十八天

目录

选择菜单

选择菜单

选择菜单的大小

禁用选择菜单

数据列表

复选框和单选按钮

复选框

单选按钮

切换开关

表单浮动标签

浮动标签/动画标签

文本框

选择菜单

表单验证

表单验证

---

选择菜单

选择菜单

可以使用.form-select类来创建选择菜单，并为其应用Bootstrap 5的样式。

以下是一个示例代码，用于创建一个选择菜单：

	
		
		
		
		
		
	
	
		

			

				单选下拉菜单：
				
					1
					2
					3
					4
				
                Submit
			
		
	

在这个例子中，我们使用元素创建了一个选择菜单，并添加了.form-select类来应用Bootstrap 5的样式。aria-label属性用于提供一个标签，描述选择菜单的用途。

选择菜单允许用户从预定义的选项中选择一项。默认情况下，第一个选项会被选中（使用selected属性）。

如果您希望允许用户选择多个选项，请使用多选菜单。请参考以下示例代码：

	
		
		
		
		
		
	
	
		

			

				多选下拉菜单（按住 ctrl 或 shift（或用鼠标拖动）可选择多个）：
				

1 2 3 4 5 Submit

在这个示例中，我们添加了multiple属性来启用多选功能。

选择菜单的大小

可以使用.form-select-lg和.form-select-sm类来修改下拉菜单的大小。

通过添加.form-select-lg类，您可以将下拉菜单设置为大号（large）大小。通过添加.form-select-sm类，您可以将下拉菜单设置为小号（small）大小。根据所选的大小类，下拉菜单的外观会相应地增大或缩小。

以下是示例代码：

	
		
		
		
		
		
	
	
		

			

				大号下拉菜单：
				
					1
					2
					3
					4
				
				


				正常下拉菜单：
				
					1
					2
					3
					4
					5
				
				


				小号下拉菜单：
				
					1
					2
					3
					4
					5
				
				提交
			
		
	

在以上例子中，我们将.form-select-lg和.form-select-sm类与.form-select类一起使用，以确保应用Bootstrap 5的样式并修改下拉菜单的大小。

禁用选择菜单

可以使用disabled属性来禁用选择菜单。

通过在元素上添加disabled属性，您可以将选择菜单设置为禁用状态，使用户无法进行选择。以下是示例代码：

	
		
		
		
		
		
	
	
		

			

				禁用下拉菜单：
				

1 2 3 4 5 提交

数据列表

Bootstrap也支持使用

	
		
		
		
		
		
	
	
		

			

				选择水果：
				
				
				提交
			
		
	

在这个例子中，我们使用

用户可以在输入框中开始输入内容，然后根据数据列表中的选项进行选择。

请注意，使用

Option 2

Option 3

提交

在这个例子中，我们使用.form-check类来包装复选框元素。我们还添加了.form-check-label类来设置标签的样式，以及.form-check-input类来设置复选框的样式。第一个复选框使用checked属性来默认选中，第三个复选框使用disabled属性来禁止选中。

单选按钮

单选框是一种常用的表单元素，用户可以从预设选项列表中选择一个选项。在Bootstrap中，您可以使用元素来创建单选框。

要创建单选框，请按照以下步骤进行操作：

1. 使用class="form-check"的包装元素，确保标签和单选框有适当的外边距。
2. 将class="form-check-label"添加到标签元素，以设置标签的样式。
3. 在.form-check容器内，将class="form-check-input"添加到单选框输入元素中，以正确设置单选框的样式。
4. 给每个单选框设置相同的name属性，以确保它们在同一组中。

以下是一个示例代码，展示如何创建带有预设选项列表的单选框：

	
		
		
		
		
		
	
	
		

			

				

					
					
						Option 1
					
				

				

					
					
						Option 2
					
				

				

					
					
						Option 3
					
				
				提交
			
		
	

在这个例子中，我们使用.form-check类来包装单选框元素。我们还添加了.form-check-label类来设置标签的样式，以及.form-check-input类来设置单选框的样式。每个单选框都具有相同的name属性，以确保它们在同一组中。第一个单选框使用checked属性来默认选中。 

切换开关

可以使用Bootstrap中的.form-switch类将复选框转换为可切换的开关。

要创建一个切换开关，请按照以下步骤进行操作：

1. 使用class="form-check"的包装元素，确保标签和复选框有适当的外边距。
2. 将class="form-check-label"添加到标签元素，以设置标签的样式。
3. 在.form-check容器内，将class="form-check-input"添加到复选框输入元素中，以正确设置复选框的样式。
4. 使用.form-switch类来将复选框转换为切换开关。

以下是一个示例代码，展示如何创建一个切换开关：

	
		
		
		
		
		
	
	
		

			

				

					
					深色模式
				
				提交
			
		
	

表单浮动标签

浮动标签/动画标签

默认情况下，使用标签（label）时，它们通常出现在输入字段的顶部：

通过使用浮动标签，您可以在输入字段内插入标签，并在单击输入字段时使它们浮动/动画化：

	
		
		
		
		
		
	
	
		

			

				

					
					电邮
				
				

					
					密码
				
			
		
	

 关于浮动标签的注意事项： 元素必须在 元素之后，并且每个 元素都需要 placeholder 属性（即使未显示）。

文本框

文本框 textarea 也可以有浮动效果：

	
		
		
		
		
		
	
	
		

			

				

					
					评论在这里
				
				提交
			
		
	

选择菜单

还可以在选择菜单上使用“浮动标签”。但是，它们不会浮动/动画化。标签将始终出现在左上角的选择菜单内。

	
		
		
		
		
		
	
	
		

			

				

					
						1
						2
						3
						4
					
					选择列表（选择一项）：
				
				提交
			
		
	

表单验证

表单验证

我们可以使用不同的验证类来设置表单的验证功能。

• .was-validated 或 .needs-validation 添加到
  元素中，input 输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。
• .valid-feedback 或 .invalid-feedback 类用来告诉用户缺少什么信息，或者在提交表单之前需要完成什么。

实例

使用 .was-validated 类显示表单在提交之前需要填写的内容：

	
		
		
		
		
		
	
	
		

			
				

					用户名：
					
					
验证成功！
					
请输入用户名！
				
				

					密码：
					
					
验证成功！
					
请输入密码！
				
				

					
						 同意协议
						
验证成功！
						
同意协议才能提交。
					
				
				提交
			
		
	

使用 .needs-validation，它将在表单提交之后验证缺少的内容。这里需要添加一些 JavaScript 代码才能使代码正常工作：

	
		
		
		
		
		
	
	
		

			

				

					用户名：
					
					
验证成功！
					
请输入用户名！
				
				

					密码：
					
					
验证成功！
					
请输入密码！
				
				

					
						 同意协议
						
验证成功！
						
同意协议才能提交。
					
				
				提交