小白教程
所有教程
关于
Search
108.162.216.92
108.162.216.92
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 复选框与单选框”的源代码
本页内容
上一节:
Bootstrap5_下拉菜单
下一节:
Bootstrap5_选择区间
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 复选框与单选框}}[[Category:Bootstrap 5 教程|33]] = Bootstrap5 复选框与单选框 = 如果您希望用户从预设选项列表中选择任意数量的选项,可以使用复选框: <sample title="" desc="" lang="html" hererun="1"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked> <label class="form-check-label">Option 1</label> </div> </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>.form-check-label 类添加到标签元素,.form-check 容器内添加 .form-check-input 类来设置复选框的样式。</p> <p>以下三个复选框,第一个默认选中,最后一个禁止选择:</p> <form action="/action_page.php"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked> <label class="form-check-label" for="check1">Option 1</label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something"> <label class="form-check-label" for="check2">Option 2</label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" disabled> <label class="form-check-label">Option 3</label> </div> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run> 复选框通过使用 class="form-check" 来确保标签和复选框有适当边距。 .form-check-label 类添加到标签元素,.form-check 容器内添加 .form-check-input 类来设置复选框的样式。 checked 属性用于设置默认选中的选项。 == 单选框 == 如果您希望用户从预设选项列表中选择一个选项,可以使用复选框: <sample title="" desc="" lang="html" hererun="1"> <div class="form-check"> <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1 <label class="form-check-label" for="radio1"></label> </div> <div class="form-check"> <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2 <label class="form-check-label" for="radio2"></label> </div> <div class="form-check"> <input type="radio" class="form-check-input" disabled>Option 3 <label class="form-check-label"></label> </div> </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>下面的表单包含三个单选按钮,默认选中第一个选项,禁用最后一个选项:</p> <form action="/action_page.php"> <div class="form-check"> <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked> <label class="form-check-label" for="radio1">Option 1</label> </div> <div class="form-check"> <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2"> <label class="form-check-label" for="radio2">Option 2</label> </div> <div class="form-check"> <input type="radio" class="form-check-input" disabled> <label class="form-check-label">Option 3</label> </div> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run> == 切换开关 == 如果你想把复选框变成一个可切换的开关,可以在 '''.form-check''' 容器内使用 .form-switch 类: <sample title="" desc="" lang="html" hererun="1"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked> <label class="form-check-label" for="mySwitch">Dark Mode</label> </div> </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>如果你想把复选框变成一个可切换的开关,可以在 .form-check 容器内使用 .form-switch 类:</p> <form action=""> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked> <label class="form-check-label" for="mySwitch">Dark Mode</label> </div> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run>
返回至“
Bootstrap5 复选框与单选框
”。
上一节:
Bootstrap5_下拉菜单
下一节:
Bootstrap5_选择区间