Bootstrap 5学习教程，从入门到精通，Bootstrap 5 复选框（Checkbox）与单选框（Radio）语法知识点及案例代码（30）
Bootstrap 5 复选框（Checkbox）与单选框（Radio）语法知识点及案例代码
Bootstrap 5 提供了简洁且响应式的复选框和单选框组件，通过使用 Bootstrap 的内置类，可以轻松创建美观的表单控件。
一、复选框（Checkbox）
1. 基本语法
复选框允许用户从多个选项中选择一个或多个。使用 Bootstrap 5 的复选框类，可以快速创建样式统一的复选框。
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
默认复选框
label>
div>
2. 关键类说明
form-check：用于包裹复选框及其标签，提供适当的间距和对齐。form-check-input：应用于元素，指定其为复选框输入。form-check-label：应用于元素，关联到对应的输入框。
3. 禁用状态
要禁用某个复选框，可以在 元素上添加 disabled 属性。
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
禁用复选框
label>
div>
4. 内联复选框
如果希望复选框在一行内显示，可以使用 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">选项 1label>
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">选项 2label>
div>
5. 复选框组
将多个复选框组合在一起，可以形成一个复选框组。
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
默认复选框 1
label>
div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
默认复选框 2
label>
div>
二、单选框（Radio）
1. 基本语法
单选框允许用户从多个选项中选择一个。使用 Bootstrap 5 的单选框类，可以快速创建样式统一的单选框。
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
默认单选框 1
label>
div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
默认单选框 2
label>
div>
2. 关键类说明
form-check：用于包裹单选框及其标签，提供适当的间距和对齐。form-check-input：应用于元素，指定其为单选框输入。form-check-label：应用于元素，关联到对应的输入框。
3. 禁用状态
要禁用某个单选框，可以在 元素上添加 disabled 属性。
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadiosDisabled" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
禁用单选框
label>
div>
4. 内联单选框
如果希望单选框在一行内显示，可以使用 form-check-inline 类。
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">选项 1label>
div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">选项 2label>
div>
5. 单选框组
将多个单选框组合在一起，可以形成一个单选框组。
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="radio1" value="option1" checked>
<label class="form-check-label" for="radio1">
单选框 1
label>
div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="radio2" value="option2">
<label class="form-check-label" for="radio2">
单选框 2
label>
div>
三、案例代码
以下是一个包含复选框和单选框的完整示例，包含详细注释，帮助理解每个部分的功能。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 5 复选框与单选框示例title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<div class="container mt-5">
<h2>复选框（Checkbox）示例h2>
<form>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheckbox">
<label class="form-check-label" for="defaultCheckbox">
默认复选框
label>
div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
<label class="form-check-label" for="disabledCheckbox">
禁用的复选框
label>
div>
<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">选项 1label>
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">选项 2label>
div>
form>
<h2 class="mt-5">单选框（Radio）示例h2>
<form>
<div class="form-check">
<input class="form-check-input" type="radio" name="defaultRadio" id="defaultRadio1" value="option1" checked>
<label class="form-check-label" for="defaultRadio1">
默认单选框 1
label>
div>
<div class="form-check">
<input class="form-check-input" type="radio" name="defaultRadio" id="defaultRadio2" value="option2">
<label class="form-check-label" for="defaultRadio2">
默认单选框 2
label>
div>
<div class="form-check">
<input class="form-check-input" type="radio" name="disabledRadio" id="disabledRadio" value="option3" disabled>
<label class="form-check-label" for="disabledRadio">
禁用的单选框
label>
div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadio" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">选项 Alabel>
div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadio" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">选项 Blabel>
div>
form>
div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">script>
body>
html>
代码说明
-
引入 Bootstrap 5 CSS 和 JS：
- 使用 CDN 链接引入 Bootstrap 5 的 CSS 和 JS 文件，以及 Popper.js 作为依赖。
- 这使得我们能够使用 Bootstrap 提供的样式和功能。
-
复选框部分：
- 默认复选框：包含一个可勾选的复选框和一个关联的标签。
- 禁用的复选框：通过添加
disabled属性，使其无法被交互。 - 内联复选框：使用
form-check-inline类，使复选框在一行内显示。
-
单选框部分：
- 默认单选框：多个单选框共享相同的
name属性，确保一次只能选择一个。 - 禁用的单选框：通过添加
disabled属性，使其无法被交互。 - 内联单选框：使用
form-check-inline类，使单选框在一行内显示。
- 默认单选框：多个单选框共享相同的
-
容器和间距：
- 使用
container类包裹内容，并使用mt-5类添加顶部外边距，使布局更加美观。
- 使用
四、注意事项
-
表单验证：
- 虽然 Bootstrap 提供了基本的样式，但实际应用中需要结合 JavaScript 进行表单验证，以确保用户输入符合预期。
-
可访问性：
- 使用
for属性关联和，提高表单的可访问性，方便使用屏幕阅读器的用户。
- 使用
-
响应式设计：
- Bootstrap 的表单组件是响应式的，能够适应不同的屏幕尺寸。但在设计复杂表单时，仍需注意布局的适应性。
-
自定义样式：
- 可以通过覆盖 Bootstrap 的默认样式或添加自定义 CSS 来实现更个性化的外观。
通过以上详细的语法知识点和案例代码，相信初学者能够快速掌握 Bootstrap 5 复选框与单选框的使用方法。