Bootstrap - 复选框与单选按钮：初学者指南

你好，未来的网页开发者们！今天，我们将深入了解Bootstrap表单控件的世界，特别是复选框和单选按钮。这些小小的交互式元素看起来可能很简单，但它们在收集用户输入时非常强大。那么，让我们卷起袖子开始吧！

Bootstrap表单控件简介

在我们深入细节之前，让我们先花点时间欣赏一下我们为什么要学习Bootstrap。想象一下你正在建造一座房子。你可以从头开始制作每一块砖，或者你可以使用预制的组件。Bootstrap就像是为你网站准备的预制组件宝库。它节省时间并确保一致性。现在，让我们探索我们的第一个组件！

复选框：多选奇迹

基本复选框

复选框就像是可以让用户点击以选择多个选项的小方块。当你希望用户从列表中选择多个项目时，它们非常完美。让我们创建我们的第一个复选框：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
默认复选框
</label>
</div>

在这个例子中，我们使用Bootstrap类来设置复选框的样式。form-check类创建了一个包装器，而form-check-input类设置了复选框本身的样式。标签中的for属性与输入的id相匹配，将它们连接起来。

预选状态

有时，你希望复选框默认选中。这只需添加checked属性：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
预选复选框
</label>
</div>

不确定状态

现在，这里有一个有趣的事实：复选框可以有第三种状态，称为“不确定”。这就像当你的青少年打扫他们的房间时 - 它们既不太干净，也不完全乱糟糟的。我们无法在HTML中设置这个状态，但我们可以用JavaScript来设置：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
不确定复选框
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

禁用复选框

有时，你可能想要显示一个复选框但不允许用户与之交互。这时disabled属性就派上用场了：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
禁用复选框
</label>
</div>

单选按钮：单选冠军

基本单选按钮

单选按钮就像复选框的表亲。它们看起来相似但行为不同。复选框允许多选，而单选按钮则在一个组内强制单选。让我们创建一组单选按钮：

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
默认单选
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
默认选中单选
</label>
</div>

注意两个单选按钮都有相同的name属性？这把它们组合在一起，确保一次只能选择一个。

禁用单选按钮

就像复选框一样，我们也可以禁用单选按钮：

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
禁用单选
</label>
</div>

开关：现代切换

开关是复选框的时尚替代品。它们非常适合用于开关设置。让我们创建一个：

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">默认开关复选框输入</label>
</div>

form-switch类将我们的复选框变成了一个时尚的切换开关。

布局选项

默认（垂直堆叠）

默认情况下，复选框和单选按钮是垂直堆叠的：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">堆叠复选框 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">堆叠复选框 2</label>
</div>

水平布局

想要你的选项并排显示？使用form-check-inline类：

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

反向布局

想要标签在复选框之前？使用form-check-reverse：

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">反向复选框</label>
</div>

无标签

有时，你可能希望复选框或单选按钮没有标签：

<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

记住为了可访问性使用aria-label！

切换按钮

切换按钮是复选框和单选按钮的一种花哨用法。它们看起来像普通按钮，但行为像复选框或单选按钮：

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">单个切换</label>

轮廓样式

想要更微妙的外观？使用轮廓样式：

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">单个切换</label>

结论

恭喜你！你刚刚对Bootstrap的复选框和单选按钮进行了一次精彩的巡游。这些小组件可能看起来很简单，但它们是交互式表单的基石。记住，熟能生巧。尝试以不同的方式组合这些元素，为你的用户创建引人入胜的表单。

以下是我们所涵盖的方法的快速参考表：

方法	描述
基本复选框	<input class="form-check-input" type="checkbox">
预选复选框	添加checked属性
不确定复选框	用JavaScript设置
禁用复选框	添加disabled属性
基单选	<input class="form-check-input" type="radio">
禁用单选	添加disabled属性
开关	使用form-switch类
水平布局	使用form-check-inline类
反向布局	使用form-check-reverse类
无标签	省略标签，使用aria-label
切换按钮	使用btn-check类
轮廓样式	使用btn-outline-*类

继续尝试，继续学习，最重要的是，在构建惊人的表单时享受乐趣！

Credits: Image by storyset