开关

开关具有自定义复选框的标记,但使用 .form-switch 类来呈现切换开关。考虑使用 role="switch" 更准确地将控件的性质传达给支持此角色的辅助技术。在较旧的辅助技术中,它只会作为一个常规复选框被宣布为后备。开关也支持禁用属性。

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">默认开关复选框输入</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">选中开关复选框输入</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">禁用开关复选框输入</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">禁用复选开关复选框输入</label>
</div>
不同颜色的开关