在本章节中，我们将详细探讨如何使用 Bootstrap 5 来创建和自定义复选框和单选按钮。这些组件在许多表单场景中都非常有用，比如用户偏好设置、多选或多选问题等。
基础用法
复选框
Bootstrap 提供了基本的复选框样式，只需添加适当的类即可。以下是一个基础的复选框示例：
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
默认复选框
</label>
</div>单选按钮
单选按钮通常用于让用户从一组选项中选择一个。同样地，通过添加适当的类来实现基本样式：
-- -------------------- ---- -------
---- -------------------
------ ------------------------ ------------ -------------------- ------------------- --------------- --------
------ ------------------------ ---------------------
---------
--------
------
---- -------------------
------ ------------------------ ------------ -------------------- ------------------- ----------------
------ ------------------------ ---------------------
--------
--------
------自定义样式
自定义复选框和单选按钮
Bootstrap 允许对复选框和单选按钮进行自定义，可以通过一些简单的 CSS 修改来改变它们的外观。例如，你可以为它们添加自定义的颜色或图标。
自定义颜色
-- -------------------- ---- -------
---- -------------------
------ ------------------------ --------------- -------- ----------------- -------------------- ----------
------ ------------------------ -------------------
---------
--------
------
---- -------------------
------ ------------------------ ------------ ------------------ ----------------- -------- -------------------- ----------
------ ------------------------ -------------------
----------
--------
------添加图标
-- -------------------- ---- -------
---- -------------------
------ ----------------------- ---------------- --------------- ------------------ --------------- -----------------
------ ------------------------ --------------------
-- ---------- -------------- -------
--------
------
---- -------------------
------ ----------------------- ---------------- ------------ -------------------- ------------------- --------------- -----------------
------ ------------------------ ---------------------
-- ---------- ------------- --------
--------
------使用辅助类
Bootstrap 还提供了一些辅助类，可以用来快速改变复选框和单选按钮的状态或外观。
状态辅助类
.disabled：禁用状态
-- -------------------- ---- -------
---- -------------------
------ ------------------------ --------------- -------- ------------------ ---------
------ ------------------------ --------------------
------
--------
------
---- -------------------
------ ------------------------ ------------ ---------------------- ------------------ --------------- ---------
------ ------------------------ --------------------
-------
--------
------颜色辅助类
.text-primary.text-secondary.text-success.text-danger.text-warning.text-info.text-light.text-dark.text-white
-- -------------------- ---- -------
---- -------------------
------ ------------------------ --------------- -------- ---------------- -------------------- ----------
------ ----------------------- ------------- ------------------
--------
--------
------
---- -------------------
------ ------------------------ ------------ ------------------- ---------------- --------------- -------------------- ----------
------ ----------------------- ------------ ------------------
---------
--------
------表格内的复选框和单选按钮
有时你需要在表格中放置复选框或单选按钮。在这种情况下，可以使用 table 类结合其他 Bootstrap 类来实现。
-- -------------------- ---- -------
------ --------------
-------
----
--- -------------------
--- -------------------
-----
--------
-------
----
-----------
----
---- -------------------
------ ------------------------ --------------- -------- ------------
------
-----
-----
----
-----------
----
---- -------------------
------ ------------------------ --------------- -------- ------------
------
-----
-----
--------
--------动态交互
控制复选框和单选按钮的状态
你可以使用 JavaScript 或 jQuery 来动态控制复选框和单选按钮的状态。例如，根据某些条件启用或禁用它们。
-- -------------------- ---- -------
---- -------------------
------ ------------------------ --------------- -------- ----------------- ------------------------
------ ------------------------ -------------------
--------
--------
------
---- -------------------
------ ------------------------ ------------ ------------------- ------------------ ----------------
------ ------------------------ --------------------
---------
--------
------
--------
-------- ------------- -
----- -------- - ----------------------------------------
----- ----- - -----------------------------------------
-- ------------------ -
-------------- - ------
- ---- -
-------------- - -----
-
-
---------以上是关于 Bootstrap 5 中复选框和单选按钮的详细介绍。通过这些基础知识和技巧，你可以轻松地在项目中使用这些组件，并根据需要进行定制化处理。