一个复选框表单元素就是一个类型是 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 ..
回到浏览器 ..
这次我们就只能选中这群单选按钮里面的其中的一个了 ...