学习Bootstrap 5的第十九天

目录

范围

自定义范围

步进

最小值和最大值

输入框组

输入组

输入组大小

带复选框和单选框的输入组

输入组按钮

带下拉按钮的输入组

输入框组标签

---

范围

自定义范围

可以通过将.form-range类添加到type="range"的输入元素来自定义范围菜单的样式。

要创建一个自定义范围菜单，请按照以下步骤进行操作：

1. 使用class="form-range"将.form-range类添加到范围输入元素（）上。
2. 可选：如果需要，可以在.form-range元素外部添加.form-floating类来创建一个浮动标签。

以下是一个示例代码，展示如何创建一个自定义范围菜单：

	
		
		
		
		
		
	
	
		

			

				自定义选择区间
				
				默认选择区间
				

			
		
	

步进

可以使用step属性来更改范围菜单的步进间隔。

step属性指定了范围菜单中数值之间的间隔大小。默认情况下，step属性的值为1，即范围菜单的数值以1为单位递增或递减。

要更改步进间隔，请按照以下步骤进行操作：

1. 在范围输入元素（）上添加step属性。
2. 将step属性的值设置为您想要的步进间隔大小。

以下是一个示例代码，展示如何更改范围菜单的步进间隔：

	
		
		
		
		
		
	
	
		

			

				自定义步长
				
			
		
	

在这个例子中，我们将step属性设置为0.5，表示范围菜单的数值以0.5为单位递增或递减。

请注意，步进间隔的精度取决于浏览器和操作系统。某些浏览器和操作系统可能对步进值有一些限制。

最小值和最大值

可以使用min和max属性来更改范围菜单的最小值和最大值。

min属性指定了范围菜单中的最小值，而max属性指定了范围菜单中的最大值。默认情况下，最小值为0，最大值为100。

要更改最小值和最大值，请按照以下步骤进行操作：

1. 在范围输入元素（）上添加min属性。
2. 将min属性的值设置为您想要的最小值。
3. 在范围输入元素上添加max属性。
4. 将max属性的值设置为您想要的最大值。

以下是一个示例代码，展示如何更改范围菜单的最小值和最大值：

	
		
		
		
		
		
	
	
		

			

				自定义步长
				
			
		
	

在这个例子中，我们将min属性设置为10，表示范围菜单的最小值为10。然后，我们将max属性设置为50，表示范围菜单的最大值为50。

请注意，根据浏览器和操作系统的不同，对于超出指定范围的值可能会有不同的处理方式。一些浏览器会自动限制用户输入的值，而其他浏览器可能允许用户输入超出指定范围的值。

输入框组

输入组

.input-group类可以用于包装具有类似功能或关联的表单元素，并添加额外的样式，例如在输入字段前后添加图标、文本或按钮等。

为了创建一个输入组，请按照以下步骤进行操作：

• 在
  元素中添加.input-group类。
• 在
  元素中添加一个或多个表单元素，例如或。

  在

  元素中添加一个帮助文本元素，例如标签或按钮元素，以增强输入。

  要设置帮助文本元素的样式，请使用.input-group-text类。这将应用于帮助文本元素和任何嵌套的文本或图标。

  以下是一个示例代码，展示如何创建一个输入组：

  
  
  	
  		
  		
  		
  		
  		
  	
  	
  		
  
  			
  
  				
  
  					@
  					

  @example.com

输入组大小

可以使用.input-group-sm类将小型输入组样式应用到.input-group容器上，以获得更小的输入组。

同样，也可以使用.input-group-lg类将大型输入组样式应用到.input-group容器上，以获得更大的输入组。

以下是示例代码，演示如何创建不同大小的输入组：

	
		
		
		
		
		
	
	
		

			

				

					小型
					
				

				

					默认
					
				

				

					大型
					
				
			
		
	

在这个例子中，我们分别使用.input-group-sm和.input-group-lg类来设置小型和大型输入组的样式。

带复选框和单选框的输入组

可以在.input-group容器中包含复选框和单选框，并结合使用.input-group-text类来创建带有复选框和单选框的输入组。

以下是一个示例代码，展示如何创建带有复选框和单选框的输入组：

在这个例子中，我们分别创建了一个带有复选框和一个带有单选框的输入组。我们使用.input-group-text类将复选框和单选框包装在

元素内，并将其添加到.input-group-prepend容器中。

输入组按钮

	
		
		
		
		
		
	
	
		

			

				

					基础按钮
					
				

				

					
					Go
				

				

					
					OK
					Cancel
				
			
		
	

带下拉按钮的输入组

如果想在输入组中添加一个下拉按钮，您可以使用.input-group-append类将按钮包装在.input-group容器中，并使用.dropdown-toggle类为按钮添加下拉样式。

以下是一个示例代码，展示如何创建带有下拉按钮的输入组：

	
		
		
		
		
		
	
	
		

			

				

					
					

						下拉按钮
						

							链接 1
							链接 2
							链接 3
						
					
				

			
		
	

输入框组标签

要在输入框组中设置标签并使其与输入框关联，您可以使用元素，并将其for属性设置为相应输入框组的id。这样，在点击标签时，相关的输入框组将获得聚焦。

以下是一个示例代码，演示如何在输入框组中添加标签并实现聚焦效果：

	
		
		
		
		
		
	
	
		

			

				这里输入您的邮箱:
				

					
					@runoob.com
				
			
		
	

在这个例子中，我们使用元素来创建输入框组的标签，并将其for属性设置为相应输入框组的id（这里是inputGroupExample）。然后，我们将输入框组包装在.input-group容器中。

当用户点击标签时，与该标签相关联的输入框组将获得聚焦效果。

请注意，要使标签和输入框组之间产生关联，确保将元素放置在输入框组之前。