小白教程
所有教程
关于
Search
172.70.131.174
172.70.131.174
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 选择区间”的源代码
本页内容
上一节:
Bootstrap5_复选框与单选框
下一节:
Bootstrap5_输入框组
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 选择区间}}[[Category:Bootstrap 5 教程|34]] = Bootstrap5 选择区间 = 要设置一个选择区间可以在 '''input''' 元素中添加 '''type="range"''' 并使用 .form-range 类: 选择区间: <sample title="" desc="" lang="html" hererun="1"> <label for="customRange" class="form-label">Custom range</label> <input type="range" class="form-range" id="customRange"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>选择区间</h2> <p>要设置一个选择区间可以在 input 元素中添加 type="range" 并使用 .form-range 类:</p> <form action="/action_page.php"> <label for="customRange" class="form-label">自定义选择区间</label> <input type="range" class="form-range" id="customRange" name="points"> <label for="customRange" class="form-label">默认选择区间</label> <input type="range" id="defaultRange" name="points"><br> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run> == 步长 == 默认情况下,步长为 1,可以通过 step 属性来设置: <sample title="" desc="" lang="html" hererun="1"> <input type="range" class="form-range" step="10"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>选择区间步长</h2> <p>默认情况下,步长为 1,可以通过 step 属性来设置:</p> <form action="/action_page.php"> <label for="customRange" class="form-label">自定义步长</label> <input type="range" class="form-range" step="10"> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run> == 最大最小值 == 默认情况下,最小值为 0,最大值为 100,可以通过 min(最小) 或 max(最大) 属性来设置: <sample title="" desc="" lang="html" hererun="1"> <input type="range" class="form-range" min="0" max="4"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>选择区间最大最小值</h2> <p>默认情况下,最小值为 0,最大值为 100,可以通过 min(最小) 或 max(最大) 属性来设置:</p> <form action="/action_page.php"> <label for="customRange" class="form-label">自定义步长</label> <input type="range" class="form-range" min="0" max="4"> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run>
返回至“
Bootstrap5 选择区间
”。
上一节:
Bootstrap5_复选框与单选框
下一节:
Bootstrap5_输入框组