Bootstrap 5学习教程，从入门到精通，Bootstrap 5 选择区间（Range）语法知识点及案例代码详解（31）
Bootstrap 5 选择区间（Range）语法知识点及案例代码详解
Bootstrap 5 提供了强大的表单控件组件，其中**选择区间（Range Slider）**是常用的输入控件之一。
目录
- 引入 Bootstrap 5
- 选择区间的基本结构
- 选择区间的属性
- 自定义选择区间
- 完整案例代码
- 运行效果预览
1. 引入 Bootstrap 5
首先，需要在 HTML 文件中引入 Bootstrap 5 的 CSS 和 JS 文件。可以使用 CDN 方式快速引入：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 5 选择区间示例title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>
说明：
- Bootstrap CSS：引入 Bootstrap 的样式表。
- Bootstrap JS：引入 Bootstrap 的 JavaScript 及其依赖（如 Popper.js），用于交互功能。
2. 选择区间的基本结构
在 Bootstrap 5 中，选择区间通常使用原生的 元素，并通过 Bootstrap 的类进行样式和功能增强。
基本示例
<div class="mb-3">
<label for="customRange" class="form-label">选择一个范围label>
<input type="range" class="form-range" id="customRange" min="0" max="100" step="1">
div>
解释：
- ：Bootstrap 的 margin组容器，添加了下边距（margin-bottom）。
：为选择区间添加标签，for属性与输入元素的id对应，增强可访问性。：class="form-range"：应用 Bootstrap 的表单范围样式。id="customRange"：与标签对应。min="0"和max="100"：设置选择区间的最小和最大值。step="1"：设置步长，即每次拖动的增量。
3. 选择区间的属性
常用属性
min：范围的最小值。max：范围的最大值。step：步长，即每次拖动的增量。value：默认值。disabled：禁用选择区间。
示例
<input type="range" class="form-range" id="disabledRange" min="0" max="50" step="5" value="20" disabled>说明：
value="20"：设置默认值为 20。disabled：禁用该选择区间，用户无法交互。
4. 自定义选择区间
添加标签和说明
可以在选择区间下方添加当前值显示或自定义标签。
<div class="mb-3"> <label for="customRange" class="form-label">自定义范围label> <input type="range" class="form-range" id="customRange" min="0" max="100" step="1" value="50"> <div class="d-flex justify-content-between"> <span>0span> <span>50span> <span>100span> div> div>说明：
- ：使用 Flexbox 布局，使标签均匀分布。
：显示最小值、当前值和最大值。显示当前值
为了实时显示当前选择的值，可以使用 JavaScript：
<div class="mb-3"> <label for="customRange" class="form-label">选择范围并查看当前值label> <input type="range" class="form-range" id="customRange" min="0" max="100" step="1" value="50"> <div class="value-display mt-2">当前值: 50div> div> <script> const range = document.getElementById('customRange'); const display = document.querySelector('.value-display'); range.addEventListener('input', function() { display.textContent = '当前值: ' + this.value; }); script>说明：
- ：用于显示当前选择的值。
- JavaScript：
- 获取选择区间和显示元素。
- 监听
input事件，实时更新显示值。
5. 完整案例代码
以下是一个完整的 Bootstrap 5 选择区间示例，包含多个自定义功能：
DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 5 选择区间示例title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> /* 自定义样式（可选） */ .value-display { font-weight: bold; color: #0d6efd; } style> head> <body> <div class="container mt-5"> <h1 class="mb-4">Bootstrap 5 选择区间示例h1> <div class="mb-4"> <label for="basicRange" class="form-label">基本选择区间label> <input type="range" class="form-range" id="basicRange" min="0" max="100" step="1" value="50"> div> <div class="mb-4"> <label for="labeledRange" class="form-label">带标签的选择区间label> <input type="range" class="form-range" id="labeledRange" min="0" max="100" step="1" value="30"> <div class="d-flex justify-content-between"> <span>0span> <span>50span> <span>100span> div> div> <div class="mb-4"> <label for="displayRange" class="form-label">显示当前值的选择区间label> <input type="range" class="form-range" id="displayRange" min="0" max="100" step="1" value="70"> <div class="value-display mt-2">当前值: 70div> div> <div class="mb-4"> <label for="disabledRange" class="form-label">禁用状态的选择区间label> <input type="range" class="form-range" id="disabledRange" min="0" max="100" step="1" value="20" disabled> div> <div class="mb-4"> <label for="customStepRange" class="form-label">自定义范围和步长label> <input type="range" class="form-range" id="customStepRange" min="10" max="500" step="10" value="100"> <div class="d-flex justify-content-between"> <span>10span> <span>250span> <span>500span> div> div> <script> // 显示当前值的选择区间 const displayRange = document.getElementById('displayRange'); const displayDisplay = document.querySelector('.value-display'); displayRange.addEventListener('input', function() { displayDisplay.textContent = '当前值: ' + this.value; }); // 其他选择区间（可选） // 例如，动态更新标签或其他功能 script> div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script> body> html>代码说明：
-
基本选择区间：
- 简单的选择区间，用户可以拖动以选择值。
-
带标签的选择区间：
- 在选择区间下方添加了标签，显示最小值、当前值和最大值。
-
显示当前值的选择区间：
- 通过 JavaScript 实时显示当前选择的值。
- 使用
input事件监听用户拖动操作，更新显示内容。
-
禁用状态的选择区间：
- 设置
disabled属性，使用户无法交互。
- 设置
-
自定义范围和步长：
- 设置不同的
min,max和step值，展示更广泛的应用场景。
- 设置不同的
-
JavaScript 部分：
- 为显示当前值的选择区间添加交互功能。
- 可以根据需要扩展其他功能，如动态更新标签等。
6. 运行效果预览
以下是上述代码的运行效果：
(请将链接替换为实际图片链接)
说明：
- 基本选择区间：用户可以自由拖动选择值。
- 带标签的选择区间：标签显示最小值、当前值和最大值。
- 显示当前值的选择区间：当前值实时更新显示。
- 禁用状态的选择区间：用户无法交互，显示为灰色。
- 自定义范围和步长：展示不同的范围和步长设置。
7.完整案例代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Range Input 示例</title> <!-- 引入 Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> /* 自定义样式 */ .range-value { display: inline-block; width: 40px; text-align: center; margin-left: 10px; } /* 自定义滑块颜色 */ .custom-range-color::-webkit-slider-thumb { background: #ff5722; } .custom-range-color::-moz-range-thumb { background: #ff5722; } .custom-range-color::-ms-thumb { background: #ff5722; } </style> </head> <body> <div class="container py-5"> <h1 class="text-center mb-5">Bootstrap 5 Range Input 示例</h1> <!-- 基础示例 --> <div class="row mb-4"> <div class="col-md-6 mx-auto"> <h3>1. 基础 Range Input</h3> <input type="range" class="form-range" id="basicRange"> <p class="text-muted">最简单的 range input 示例</p> </div> </div> <!-- 带标签和值的示例 --> <div class="row mb-4"> <div class="col-md-6 mx-auto"> <h3>2. 带标签和值显示</h3> <label for="labeledRange" class="form-label">音量控制: <span id="rangeValue" class="range-value">50</span></label> <input type="range" class="form-range" id="labeledRange" min="0" max="100" value="50"> <p class="text-muted">使用 JavaScript 实时显示当前值</p> </div> </div> <!-- 自定义范围的示例 --> <div class="row mb-4"> <div class="col-md-6 mx-auto"> <h3>3. 自定义范围</h3> <label for="customRange" class="form-label">温度调节 (10°C 到 40°C): <span id="tempValue" class="range-value">25</span>°C</label> <input type="range" class="form-range" id="customRange" min="10" max="40" step="0.5" value="25"> <p class="text-muted">设置了 min, max 和 step 属性</p> </div> </div> <!-- 禁用状态 --> <div class="row mb-4"> <div class="col-md-6 mx-auto"> <h3>4. 禁用状态</h3> <label for="disabledRange" class="form-label">禁用滑块</label> <input type="range" class="form-range" id="disabledRange" disabled> <p class="text-muted">添加 disabled 属性禁用滑块</p> </div> </div> <!-- 自定义样式 --> <div class="row mb-4"> <div class="col-md-6 mx-auto"> <h3>5. 自定义滑块颜色</h3> <label for="styledRange" class="form-label">自定义滑块颜色</label> <input type="range" class="form-range custom-range-color" id="styledRange"> <p class="text-muted">通过 CSS 自定义滑块颜色</p> </div> </div> <!-- 多滑块控制 --> <div class="row mb-4"> <div class="col-md-6 mx-auto"> <h3>6. 多滑块控制</h3> <label for="rangeMin" class="form-label">价格区间: <span id="minValue" class="range-value">20</span> - <span id="maxValue" class="range-value">80</span> </label> <input type="range" class="form-range mb-2" id="rangeMin" min="0" max="100" value="20"> <input type="range" class="form-range" id="rangeMax" min="0" max="100" value="80"> <p class="text-muted">使用两个滑块创建一个区间选择器</p> </div> </div> <!-- 与表单控件结合 --> <div class="row"> <div class="col-md-6 mx-auto"> <h3>7. 与其他表单控件结合</h3> <form> <div class="mb-3"> <label for="username" class="form-label">用户名</label> <input type="text" class="form-control" id="username"> </div> <div class="mb-3"> <label for="brightness" class="form-label">屏幕亮度: <span id="brightnessValue" class="range-value">75</span>%</label> <input type="range" class="form-range" id="brightness" min="0" max="100" value="75"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="autoBrightness"> <label class="form-check-label" for="autoBrightness">自动调节亮度</label> </div> <button type="submit" class="btn btn-primary">保存设置</button> </form> </div> </div> </div> <!-- 引入 Bootstrap 5 JS 和 Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <!-- 自定义 JavaScript --> <script> // 实时显示 range 的值 document.getElementById('labeledRange').addEventListener('input', function() { document.getElementById('rangeValue').textContent = this.value; }); document.getElementById('customRange').addEventListener('input', function() { document.getElementById('tempValue').textContent = this.value; }); // 多滑块控制 const rangeMin = document.getElementById('rangeMin'); const rangeMax = document.getElementById('rangeMax'); rangeMin.addEventListener('input', function() { if (parseInt(rangeMax.value) < parseInt(this.value)) { rangeMax.value = this.value; document.getElementById('maxValue').textContent = this.value; } document.getElementById('minValue').textContent = this.value; }); rangeMax.addEventListener('input', function() { if (parseInt(rangeMin.value) > parseInt(this.value)) { rangeMin.value = this.value; document.getElementById('minValue').textContent = this.value; } document.getElementById('maxValue').textContent = this.value; }); // 亮度控制 document.getElementById('brightness').addEventListener('input', function() { document.getElementById('brightnessValue').textContent = this.value; }); </script> </body> </html>总结
通过以上内容，我们详细介绍了 Bootstrap 5 中选择区间的语法知识点，包括基本结构、常用属性以及自定义方法，并通过一个完整的案例代码展示了如何实现各种功能。
- JavaScript：