开关

开关-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>