开关 · Bootstrap 6.0 中文文档

基本开关

开关的工作原理是将一个隐形的复选框叠加在自定义开关指示器上。这在保持交互性的同时，提供了一个可以完全自定义的底层层。开关还包括 switch 属性，适用于支持该属性的浏览器，当切换时会提供触觉反馈。

HTML

<div class="switch">
  <input type="checkbox" value="" id="switch" role="switch" switch>
</div>

带表单字段

将.switch包裹在.form-field布局容器中并添加你的标签。网格布局会将开关和标签并排放置。

默认开关

HTML

<div class="form-field">
  <div class="switch">
    <input type="checkbox" value="" id="switchMdLabel" role="switch" switch>
  </div>
  <label for="switchMdLabel">Default switch</label>
</div>

主题颜色

通过添加来修改开关的外观 .theme-{color} 到班 .switch 元素。这将把选中状态的背景和边框颜色设置为主题颜色。

HTML

 <div class="form-field">
  <div class="switch theme-primary">
    <input type="checkbox" value="" id="switchprimary" role="switch" switch checked>
  </div>
  <label for="switchprimary">Example primary switch</label>
</div>
 <div class="form-field">
  <div class="switch theme-accent">
    <input type="checkbox" value="" id="switchaccent" role="switch" switch checked>
  </div>
  <label for="switchaccent">Example accent switch</label>
</div>
 <div class="form-field">
  <div class="switch theme-success">
    <input type="checkbox" value="" id="switchsuccess" role="switch" switch checked>
  </div>
  <label for="switchsuccess">Example success switch</label>
</div>
 <div class="form-field">
  <div class="switch theme-danger">
    <input type="checkbox" value="" id="switchdanger" role="switch" switch checked>
  </div>
  <label for="switchdanger">Example danger switch</label>
</div>
 <div class="form-field">
  <div class="switch theme-warning">
    <input type="checkbox" value="" id="switchwarning" role="switch" switch checked>
  </div>
  <label for="switchwarning">Example warning switch</label>
</div>
 <div class="form-field">
  <div class="switch theme-info">
    <input type="checkbox" value="" id="switchinfo" role="switch" switch checked>
  </div>
  <label for="switchinfo">Example info switch</label>
</div>
 <div class="form-field">
  <div class="switch theme-inverse">
    <input type="checkbox" value="" id="switchinverse" role="switch" switch checked>
  </div>
  <label for="switchinverse">Example inverse switch</label>
</div>
 <div class="form-field">
  <div class="switch theme-secondary">
    <input type="checkbox" value="" id="switchsecondary" role="switch" switch checked>
  </div>
  <label for="switchsecondary">Example secondary switch</label>
</div>

残疾

添加 disabled 属性后，相关的 <label> 会自动应用更浅的颜色样式，以帮助指示输入的状态。

禁用开关

禁用已选开关

HTML

<div class="form-field">
  <div class="switch">
    <input type="checkbox" value="" id="switchDisabledLabel" role="switch" switch disabled>
  </div>
  <label for="switchDisabledLabel">Disabled switch</label>
</div>

<div class="form-field">
  <div class="switch">
    <input type="checkbox" value="" id="switchCheckedDisabledLabel" role="switch" switch disabled checked>
  </div>
  <label for="switchCheckedDisabledLabel">Disabled checked switch</label>
</div>

尺寸

添加尺寸修饰类以使开关看起来更小或更大。

小开关

默认开关

大开关

HTML

<div class="form-field">
  <div class="switch switch-sm">
    <input type="checkbox" value="" id="switchSizeSm" role="switch" switch>
  </div>
  <label for="switchSizeSm">Small switch</label>
</div>
<div class="form-field">
  <div class="switch">
    <input type="checkbox" value="" id="switchSizeMd" role="switch" switch>
  </div>
  <label for="switchSizeMd">Default switch</label>
</div>
<div class="form-field">
  <div class="switch switch-lg">
    <input type="checkbox" value="" id="switchSizeLg" role="switch" switch>
  </div>
  <label for="switchSizeLg">Large switch</label>
</div>

自定义宽度

通过覆盖 CSS 变量，自定义开关的任意宽度和指示器大小。例如，为了获得更现代的外观，你可以加宽开关和指示器。

[!代码高亮]

自定义宽度开关

HTML

<div class="form-field">
  <div class="switch" style="--bs-switch-width: 2.75rem; --bs-switch-indicator-width: 1.5rem;">
    <input type="checkbox" value="" id="switchCustomWidth" role="switch" switch>
  </div>
  <label for="switchCustomWidth">Custom width switch</label>
</div>

CSS

变量

scss/表单/_开关.scss

// stylelint-disable-next-line scss/dollar-variable-default
$switch-tokens: defaults(
  (
    --switch-height: 1.25rem,
    --switch-width: calc(var(--switch-height) * 1.75),
    --switch-padding: .0625rem,
    --switch-margin-block: .125rem,
    // Share the form-control motion tokens so switch, checkbox, and radio move
    // in sync; the overshoot ("back") easing makes the thumb bounce as it settles.
    --switch-transition-duration: var(--control-transition-duration),
    --switch-transition-timing: var(--control-transition-timing),
    --switch-bg: var(--bg-3),
    --switch-border-width: var(--border-width),
    --switch-border-color: var(--border-color),
    --switch-indicator-bg: var(--white),
    --switch-indicator-width: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2),
    --switch-indicator-height: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2),
    --switch-checked-bg: var(--control-checked-bg),
    --switch-checked-border-color: var(--switch-checked-bg),
    --switch-checked-indicator-bg: var(--white),
    --switch-disabled-bg: var(--control-disabled-bg),
    --switch-disabled-indicator-bg: var(--fg-3),
  ),
  $switch-tokens
);