复选框 · Bootstrap 6.0 中文文档

基本复选框

所有复选框样式都直接通过.check类应用于<input>。其作用如下：

覆盖默认设置 <input> 带主题颜色的外观。
呈现 :checked 以及通过 CSS 的不确定图标 mask 在输入的 ::before 伪元素，因此标记继承对比色，不需要内联 SVG。根据输入的状态显示适当的图标。

对于希望替换我们提供的图标的人，请覆盖 --bs-check-icon-checked 和 --bs-check-icon-indeterminate CSS 变量（或 --check-icon-* 使用你自己的 Sass 令牌 mask-image 网址。

标签和布局通过额外的 HTML 和 CSS 处理。

HTML

<input type="checkbox" id="check" class="check" checked />

不确定

复选框可以在通过 JavaScript 手动设置时使用不确定的伪类。没有可用于指定它的 HTML 属性。

HTML

<input type="checkbox" id="checkIndeterminate" class="check" />

带表单字段

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

示例新复选框

HTML

<div class="form-field">
  <input type="checkbox" id="checkLabel" class="check" />
  <label for="checkLabel">Example new checkbox</label>
</div>

描述

在标签后添加描述或其他内容。我们建议将标签和描述包含在.form-field-content中，以确保适当的间距和对齐。

示例新复选框上述标签的支持说明。

HTML

<div class="form-field">
  <input type="checkbox" id="checkDescription" class="check" />
  <div class="form-field-content">
    <label for="checkDescription">Example new checkbox</label>
    <small class="form-text">Supporting description for the above label.</small>
  </div>
</div>

主题颜色

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

HTML

<div class="form-field">
  <input type="checkbox" id="checkprimary" class="check theme-primary" checked />
  <label for="checkprimary">Example primary checkbox</label>
</div>
<div class="form-field">
  <input type="checkbox" id="checkaccent" class="check theme-accent" checked />
  <label for="checkaccent">Example accent checkbox</label>
</div>
<div class="form-field">
  <input type="checkbox" id="checksuccess" class="check theme-success" checked />
  <label for="checksuccess">Example success checkbox</label>
</div>
<div class="form-field">
  <input type="checkbox" id="checkdanger" class="check theme-danger" checked />
  <label for="checkdanger">Example danger checkbox</label>
</div>
<div class="form-field">
  <input type="checkbox" id="checkwarning" class="check theme-warning" checked />
  <label for="checkwarning">Example warning checkbox</label>
</div>
<div class="form-field">
  <input type="checkbox" id="checkinfo" class="check theme-info" checked />
  <label for="checkinfo">Example info checkbox</label>
</div>
<div class="form-field">
  <input type="checkbox" id="checkinverse" class="check theme-inverse" checked />
  <label for="checkinverse">Example inverse checkbox</label>
</div>
<div class="form-field">
  <input type="checkbox" id="checksecondary" class="check theme-secondary" checked />
  <label for="checksecondary">Example secondary checkbox</label>
</div>

残疾

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

示例新复选框

HTML

<div class="form-field">
  <input type="checkbox" id="checkDisabled" class="check" disabled />
  <label for="checkDisabled">Example new checkbox</label>
</div>

<div class="form-field">
  <input type="checkbox" id="checkDisabledChecked" class="check" checked disabled />
  <label for="checkDisabledChecked">Example new checkbox</label>
</div>

尺寸

添加 .check-sm 或 .check-lg 以使你的复选框显示得更小或更大。

小复选框

默认复选框

大复选框

HTML

<div class="form-field">
  <input type="checkbox" id="checkSizeSm" class="check check-sm" checked />
  <label for="checkSizeSm">Small checkbox</label>
</div>
<div class="form-field">
  <input type="checkbox" id="checkSizeMd" class="check" checked />
  <label for="checkSizeMd">Default checkbox</label>
</div>
<div class="form-field">
  <input type="checkbox" id="checkSizeLg" class="check check-lg" checked />
  <label for="checkSizeLg">Large checkbox</label>
</div>

CSS

变量

复选框件的 CSS 变量是基于 Sass 变量构建的。

scss/表单/_check.scss

// stylelint-disable-next-line scss/dollar-variable-default
$check-tokens: defaults(
  (
    --check-size: 1.25rem,
    --check-margin-block: .125rem,
    --check-bg: var(--bg-body),
    --check-border-color: var(--border-color),
    --check-border-radius: var(--radius-5),
    --check-icon-checked: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/></svg>"))},
    --check-icon-indeterminate: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/></svg>"))},
    --check-checked-bg: var(--control-checked-bg),
    --check-checked-border-color: var(--control-checked-border-color),
    --check-indeterminate-bg: var(--control-checked-bg),
    --check-indeterminate-border-color: var(--control-checked-border-color),
    --check-active-bg: var(--control-active-bg),
    --check-active-border-color: var(--control-active-border-color),
    --check-disabled-bg: var(--control-disabled-bg),
    --check-disabled-opacity: var(--control-disabled-opacity),
  ),
  $check-tokens
);