复选框
复选框-Bootstrap 5和Material Design 2.0表格
复选框是一个组件,用于允许用户做出广泛的多项选择 用于表格和调查。复选框用于选择列表中的一个或多个选项, 而 无线电(选项)按钮用于选择一个选项 从很多。
基本例子
使用 .form-check
代替浏览器默认复选框和单选框,
两种输入类型的一系列类,可改善HTML的布局和行为
元素,可提供更大的自定义和跨浏览器的一致性。复选框用于
在列表中选择一个或多个选项,而收音机则是从中选择一个选项
许多。
在结构上,我们的<input>
s 和 <label>
s 在同级
元素与<input>
在一个 <label>
. 这个
如您必须指定的那样,稍微冗长一些 id
和 for
属性
关联 <input>
and <label>
.
我们使用兄弟选择器(~
) 为了我们所有 <input>
状态,
喜欢 :checked
要么 :disabled
.当与
.form-check-label
类,我们可以根据
<input>
的状态。
<!-- Default checkbox -->
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckDefault"
/>
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<!-- Checked checkbox -->
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckChecked"
checked
/>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
残障人士
添加 disabled
属性和关联的 <label>
s 是
自动设置样式以与较浅的颜色匹配,以帮助指示输入状态。
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckDisabled"
disabled
/>
<label class="form-check-label" for="flexCheckDisabled"> Disabled checkbox </label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckCheckedDisabled"
checked
disabled
/>
<label class="form-check-label" for="flexCheckCheckedDisabled">
Disabled checked checkbox
</label>
</div>
排队
通过添加将同一水平行上的复选框或单选按钮分组
.form-check-inline
到任何 .form-check
。
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" />
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" />
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox3"
value="option3"
disabled
/>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
没有标签
对于没有标签文本的复选框和单选框,请省略包装的 .form-check
。
请记住,仍要为辅助技术提供某种形式的标签(例如,使用
aria-label
)。
<div>
<input
class="form-check-input"
type="checkbox"
id="checkboxNoLabel"
value=""
aria-label="..."
/>
</div>
<div>
<input
class="form-check-input"
type="checkbox"
id="checkboxNoLabel2"
value=""
aria-label="..."
/>
</div>