多选与单选（Checks & radios）

方法

浏览器默认的复选框和单选按钮被.form-check所取代，这是一系列用于两种输入类型的类，它们改进了HTML元素的布局和行为，提供了更好的自定义和跨浏览器一致性。复选框用于在列表中选择一个或多个选项，而单选按钮用于从多个选项中选择一个选项。

在结构上，我们的input和label是兄弟元素，而不是label中的input。由于必须指定id和属性才能将input和label关联起来，因此这会稍微详细一些。我们对所有input状态使用同级选择器（~），例如：checked或：disabled。当与.form-check-label类结合使用时，我们可以根据input的状态轻松地为每个项设置文本样式。

复选框

Default checkbox

Checked checkbox

Copy

不确定

当通过JavaScript手动设置时，复选框可以利用不确定伪类 :indeterminate（没有可用的HTML属性来指定它）。

Indeterminate checkbox

Copy

禁用

添加disabled属性，相关的label将自动设置为与较浅颜色匹配的样式，以帮助指示输入的状态。

Disabled checkbox

Disabled checked checkbox

Copy

单选按钮

Default radio

Default checked radio

Copy

禁用

添加disabled属性，相关的label将自动设置为与较浅颜色匹配的样式，以帮助指示输入的状态。

Disabled radio

Disabled checked radio

Copy

开关

开关具有自定义复选框的标记，但使用.form-switch类来呈现切换开关。开关还支持disabled属性。

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox

input

Copy

默认 (叠放)

默认情况下，任何数量的直接同级复选框和单选按钮都将垂直堆叠，并使用 .form-check适当隔开。

Default checkbox

Disabled checkbox

Copy

Default radio

Second default radio

Disabled radio

Copy

内联

通过将.form-check-inline添加到.form-check，将复选框或单选框在同一水平行上分组显示。

1

2

3 (disabled)

Copy

1

2

3 (disabled)

Copy

无标签

对于没有标签文本的复选框和收音机，省略wrapping.form复选框。记住，仍然要为辅助技术提供某种形式的可访问名称（例如，使用aria-label标签）。有关详细信息，请参见表单概述辅助功能部分。

Copy

切换按钮

通过使用.btn样式而不是元素上的.form-check-label来创建类似按钮的复选框和单选按钮。如果需要，这些切换按钮可以进一步分组到按钮组中。

复选切换按钮

Single toggle

Copy

Single toggle

Checked

Copy

Checked

Disabled

Copy

Disabled

从外观上看，这些复选框切换按钮与按钮插件切换按钮相同。然而，辅助技术传达的方式不同：屏幕阅读器会将复选框切换宣布为“选中”/“未选中”（因为外观如此，但它们本质上仍然是复选框），而按钮插件切换按钮将宣布为“按钮”/“按下按钮”。这两种方法之间的选择将取决于您正在创建的切换类型，以及当作为复选框或实际按钮发布时，切换对用户是否有意义。

单选切换按钮

Checked

Radio

Disabled

Radio

Copy

Checked

Radio

Disabled

Radio

轮廓样式

支持.btn的不同变量，例如各种outline样式是被支持的。

Single toggle

Checked

Checked success radio

Danger radio

Copy

Single toggle

Checked

Checked success radio

Danger radio

Sass

Variables

Copy

$form-check-input-width: 1em;

$form-check-min-height: $font-size-base * $line-height-base;

$form-check-padding-start: $form-check-input-width + .5em;

$form-check-margin-bottom: .125rem;

$form-check-label-color: null;

$form-check-label-cursor: null;

$form-check-transition: null;

$form-check-input-active-filter: brightness(90%);

$form-check-input-bg: $input-bg;

$form-check-input-border: 1px solid rgba(0, 0, 0, .25);

$form-check-input-border-radius: .25em;

$form-check-radio-border-radius: 50%;

$form-check-input-focus-border: $input-focus-border-color;

$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;

$form-check-input-checked-color: $component-active-color;

$form-check-input-checked-bg-color: $component-active-bg;

$form-check-input-checked-border-color: $form-check-input-checked-bg-color;

$form-check-input-checked-bg-image: url("data:image/svg+xml,");

$form-check-radio-checked-bg-image: url("data:image/svg+xml,");

$form-check-input-indeterminate-color: $component-active-color;

$form-check-input-indeterminate-bg-color: $component-active-bg;

$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;

$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,");

$form-check-input-disabled-opacity: .5;

$form-check-label-disabled-opacity: $form-check-input-disabled-opacity;

$form-check-btn-check-disabled-opacity: $btn-disabled-opacity;

$form-check-inline-margin-end: 1rem;