开关具有自定义复选框的标记,但使用 .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>