Bootstrap 简明教程
Bootstrap - Checkbox and Radios
本章将讨论 Bootstrap 提供的复选框和单选按钮实用工具。复选框允许你从一个列表中选择一个或多个选项，而单选按钮则只允许你选择一个选项。
Approach
-
Bootstrap 为浏览器默认复选框和单选按钮元素提供了 wrapper 类 .form-check 以改善布局和行为。它还允许更高的定制化和跨浏览器的一致性。
-
.form-check-label 类用于显示复选框标签。
-
.form-check-input 类用于输入型复选框。
-
结构上，输入框和标签充当兄弟元素。
Bootstrap 的自定义图标用于显示选中或不确定状态。
Checkbox
复选框从列表中选择一个或多个选项。
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Checkbox</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck">
<label class="form-check-label" for="defaultCheck">
item 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
item 2
</label>
</div>
</body>
</html>Indeterminate
-
:indeterminate 伪类用于创建中间状态复选框。
-
不确定状态通过 JavaScript 设置，因为没有等效 HTML 属性可用于指定它。
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Checkbox</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="indeterminateCheckbox" >
<label class="form-check-label" for="indeterminateCheckbox">
item 1
</label>
</div>
<script>
var x = document.getElementById("indeterminateCheckbox").indeterminate = true;;
</script>
</body>
</html>Disabled checkbox
要指示禁用状态，请使用 disabled 属性。这会使关联的 <label> 变为更浅的颜色，表示禁用状态。
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Checkbox</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="disabledIndeterminateCheckbox" disabled>
<label class="form-check-label" for="disabledIndeterminateCheckbox">
item 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="disabledCheckedCheckbox" checked disabled>
<label class="form-check-label" for="disabledCheckedCheckbox">
item 2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
<label class="form-check-label" for="disabledCheckbox">
item 3
</label>
</div>
</body>
<script>
var x = document.getElementById("disabledIndeterminateCheckbox").indeterminate = true;
</script>
</html>Radios
单选按钮将列表中选项数限制为仅一个。
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Radio</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultRadio">
<label class="form-check-label" for="defaultRadio">
Item 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultCheckRadio" checked>
<label class="form-check-label" for="defaultCheckRadio">
Item 2
</label>
</div>
</body>
</html>Disabled Radio Button
要指示禁用状态，请使用 disabled 属性，并用更浅的颜色设置相关 <label> 的样式。
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form - Radio</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledRadio" disabled>
<label class="form-check-label" for="disabledRadio">
Item 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledCheckedRadio" checked disabled>
<label class="form-check-label" for="disabledCheckedRadio">
Item 2
</label>
</div>
</body>
</html>Switches
-
该开关具有自定义复选框标记，要呈现切换，请使用 .form-switch 类。使用 role="switch" 向辅助技术传达控件类型。
-
开关支持 disabled 属性。较旧的辅助技术只是将它作为一个普通复选框进行播报，作为后备。
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form - Radio</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckbox">
<label class="form-check-label" for="defaultSwitchCheckbox">Wi-fi</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckedCheckbox" checked>
<label class="form-check-label" for="defaultSwitchCheckedCheckbox">Bluetooth</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckbox" disabled>
<label class="form-check-label" for="disabledSwitchCheckbox">Whatsapp Notification</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckedCheckbox" checked disabled>
<label class="form-check-label" for="disabledSwitchCheckedCheckbox">Facebook Notification</label>
</div>
</body>
</html>Default checkbox and radios (stacked)
使用 .form-check 类可以垂直堆叠无线电和复选框。
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Checkbox and Radios</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="defaultStackedRadio" value="option2">
<label class="form-check-label" for="defaultStackedRadio">
English
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="disabledStackedRadio" value="option3" disabled>
<label class="form-check-label" for="disabledStackedRadio">
Hindi
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheckbox">
<label class="form-check-label" for="defaultCheckbox">
Marathi
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
<label class="form-check-label" for="disabledCheckbox">
Japanes
</label>
</div>
</body>
</html>Inline
为了在彼此旁边放置复选框和无线电，请在任何 .form-check 中使用类 .form-check-inline 。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Checkbox and Radios</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDeafultRadio" value="option1">
<label class="form-check-label" for="inlineDeafultRadio">English</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDisabledRadio" value="option3" disabled>
<label class="form-check-label" for="inlineDisabledRadio">Hindi</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineDeafultCheckbox" value="option1">
<label class="form-check-label" for="inlineDeafultCheckbox">Marathi</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineDisabledCheckbox" value="option3" disabled>
<label class="form-check-label" for="inlineDisabledCheckbox">Japanes</label>
</div>
</body>
</html>Reverse
使用 .form-check-reverse 修改器类将复选框、无线电和开关放在相反的侧面。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Checkbox and Radios</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-check form-check-reverse">
<h4>Inline Checkboxes</h4>
<input class="form-check-input" type="checkbox" value="" id="deafultReverseCheckbox">
<label class="form-check-label" for="deafultReverseCheckbox">
English
</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" value="" id="disabledReverseCheckbox" disabled>
<label class="form-check-label" for="disabledReverseCheckbox">
Hindi
</label>
</div>
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" id="switchReverseCheckbox">
<label class="form-check-label" for="switchReverseCheckbox">Wifi</label>
</div>
<div class="form-check form-check-reverse">
<h4>Inline Radios</h4>
<input class="form-check-input" type="radio" value="" id="deafultReverseRadio">
<label class="form-check-label" for="deafultReverseRadio">
Marathi
</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="radio" value="" id="disabledReverseRadio" disabled>
<label class="form-check-label" for="disabledReverseRadio">
Japanes
</label>
</div>
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="radio" id="switchReverseRadio">
<label class="form-check-label" for="switchReverseRadio">Bluetooth</label>
</div>
</body>
</html>Without Labels
-
对于没有任何标签文本的复选框和无线电，请跳过包装类 .form-check 。
-
为辅助技术提供一个可访问的名称（例如，使用 aria-label ）。有关信息，请参阅 Forms overview 部分的可访问性部分。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form - Checkbox and Radio Buttons</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
Item 1
</div>
<div>
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
Item 2
</div>
</body>
</html>Toggle Buttons
-
在 <label> 元素上使用类 .btn 而不要使用 .form-check-label 来创建类似于按钮的复选框和单选按钮。这些切换按钮也可以一起放在按钮组中。
-
使用 .btn-check 类，表示输入是按钮类型的复选框。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Checkbox and Radios</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h5>Checkbox Toggle Buttons</h5>
<input type="checkbox" class="btn-check" id="defaultToggleChecbox" autocomplete="off">
<label class="btn btn-primary" for="defaultToggleChecbox">Item 1</label>
<input type="checkbox" class="btn-check" id="checkedToggleChecbox" checked autocomplete="off">
<label class="btn btn-secondary" for="checkedToggleChecbox">Item 2</label>
<input type="checkbox" class="btn-check" id="disabledToggleChecbox" autocomplete="off" disabled>
<label class="btn btn-info" for="disabledToggleChecbox">Item 3</label>
<h5>Radios Toggle Buttons</h5>
<input type="radio" class="btn-check" id="defaultToggleRadio" autocomplete="off">
<label class="btn btn-primary" for="defaultToggleRadio">Item 1</label>
<input type="radio" class="btn-check" id="checkedToggleRadio" checked autocomplete="off">
<label class="btn btn-secondary" for="checkedToggleRadio">Item 2</label>
<input type="radio" class="btn-check" id="disabledToggleRadio" autocomplete="off" disabled>
<label class="btn btn-info" for="disabledToggleRadio">Item 3</label>
</body>
</html>Outlined Styles
支持 .btn 的不同变体，包括不同的轮廓样式，如下面的示例所示。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Checkbox and Radio Buttons</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<input type="checkbox" class="btn-check" id="defualtOutlineCheckbox" autocomplete="off">
<label class="btn btn-outline-primary" for="defualtOutlineCheckbox">Single toggle</label><br><br>
<input type="checkbox " class="btn-check" id="checkedOutlineCheckbox" checked autocomplete="off">
<label class="btn btn-secondary" for="checkedOutlineCheckbox">Checked</label><br><br>
<input type="radio" class="btn-check" name="options-outlined" id="checkedOutlineRadio" autocomplete="off" checked>
<label class="btn btn-info" for="checkedOutlineRadio">Checked success radio</label>
<input type="radio" class="btn-check" name="options-outlined" id="defualtOutlineRadio" autocomplete="off">
<label class="btn btn-outline-warning" for="defualtOutlineRadio">Danger radio</label>
</body>
</html>