开关
开关-Bootstrap 5和Material Design 2.0表格
开关是用于激活两个预定义选项之一的简单组件。通常 用作开/关按钮。
基本例子
交换机具有自定义复选框的标记,但使用
.form-switch
类以呈现切换开关。开关也支持
disabled
属性。
<!-- Default switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
<label class="form-check-label" for="flexSwitchCheckDefault"
>Default switch checkbox input</label
>
</div>
<!-- Checked switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked />
<label class="form-check-label" for="flexSwitchCheckChecked"
>Checked switch checkbox input</label
>
</div>
<!-- Default disabled switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled />
<label class="form-check-label" for="flexSwitchCheckDisabled"
>Disabled switch checkbox input</label
>
</div>
<!-- Checked disabled switch -->
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="flexSwitchCheckCheckedDisabled"
checked
disabled
/>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled"
>Disabled checked switch checkbox input</label
>
</div>