Bootstrap 5 范围

Bootstrap 5 范围使用自定义输入或值以实现跨浏览器一致性和内置自定义。

bootstrap 5 范围输入类型允许我们要求用户输入一个数字，即使用户不在乎或不了解所选的特定数值。以下是范围输入通常使用的一些示例：音频控件，例如音量和平衡，以及过滤器控件。

Bootstrap 5 技术使用类来创建自定义范围控件。轨道或背景和值都设置样式，使其在所有浏览器中看起来相同。我们现在不支持从拇指的左侧或右侧“填充”它们的轨道以直观地指示进度，因为只有 Firefox 这样做。

Bootstrap 5 自定义范围

“.form-range”类使用 input 元素和“range”类型创建自定义范围控件。自定义范围用作值的简单和默认功能。

语法

bootstrap 5 自定义范围元素在下面显示语法。

示例

以下示例使用带有范围类型和表单中“form-range”类的 input 标签创建自定义范围。

输出

下面的图像显示了使用 bootstrap 5 类和元素的自定义范围。

Bootstrap 5 禁用范围

“.form-range”类使用“disabled”关键字创建禁用的范围控件。它需要 input 元素和“range”类型。禁用的范围会停用该功能，并且我们不使用该功能。

语法

bootstrap 5 禁用范围元素在下面显示语法。

示例

以下示例使用“disabled”关键字与范围类型和表单中“form-range”类创建禁用的范围。

输出

下面的图像显示了使用 bootstrap 5 类和元素的自定义范围。

Bootstrap 5 最小和最大范围

范围功能提供最小值和最大值。最小值和最大值分别为 0 和 100。它需要 input 元素和“range”类型。“form-range”类使用带有值的“min”和“max”关键字来控制范围。

语法

bootstrap 5 禁用范围元素在下面显示语法。

示例

以下示例使用表单中的元素创建最小值和最大值的范围。

输出

下面的图像显示了使用 bootstrap 5 类和元素的最小和最大范围。

Bootstrap 5 步进范围

bootstrap 5 范围函数提供步骤来使用数据控制函数。范围数字之间的间隔默认为 1。 “step”属性允许我们调整它。此功能需要 input 元素和“range”类型。“form-range”类使用带有值的“step”关键字来控制范围。

语法

bootstrap 5 步进范围元素在下面显示语法。

示例

以下示例使用带有值的“step”关键字和表单中的“form-range”类创建步进范围。

输出

下面的图像显示了使用 bootstrap 5 类和元素的步进范围。

结论

bootstrap 5 范围函数控制输入函数的值。我们可以使用范围元素更改输入的值。这些功能用于用户交互的形式。 bootstrap 5 范围函数创建一个表单函数来控制数值。