一个复选框表单元素就是一个类型是 checkbox 的 input .. 它上面可以添加一个 form-check-input .. 复选框一般都有个标签 ... 一组 label 元素，标签上面要添加一个 form-check-label .. 可以使用这组 label 包装一下复选框 ..

在它们周围再添加一个包装 .. 一个 div，上面加上 form-check ..

再复制两份 .. 修改一下标签上的文字 .. B ... 最后这个是 C ...

默认这些复选框会堆叠到一块儿 .. 让它们在一行显示，可以在复选框元素的包装元素上，再添加一个 form-check-inline ...

现在这几个复选框元素就会在一行显示了 ..

radio

单选按钮的结构还有用法跟复选框是一样的 .. 可以直接复制一份 ... 然后修改一下这几个 input 元素的类型 ... 把 checkbox .. 修改成 radio .. 这样我们就会得到一组单选按钮 ...

勾选一下这些单选按钮 .. 你会发现可以选中所有的单选按钮 ..

因为我们没有给单选按钮添加 name 属性，所以浏览器认为这几个单选按钮来自不同的群组 ..

回到编辑器 .. 我们可以给这几个单选按钮添加一个统一的名字，添加一个 name 属性，它的值都设置成一样的 .. 这样就几个单选按钮就属于一组了 .. 后面可以再添加一个 value 属性 .. 它表示的单选按钮的值 .. 这个是 a ，下面这个可以是 b ，最后这个是 c

这样选中 a 这个单选按钮，这组名字是 demo 的单选按钮的值就会是 a ..

回到浏览器 ..

这次我们就只能选中这群单选按钮里面的其中的一个了 ...