Bootstrap5 复选框与单选框学习笔记

1. 复选框（Checkbox）

使用 Bootstrap5 可以非常方便地创建一个美观的复选框。

1.1 基本用法

下面是一个基本的复选框示例：

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

效果如下：

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

1.2 内联（Inline）复选框

如果需要将多个复选框水平排列，可以使用内联复选框。

下面是一个内联复选框的示例：

htmlCopy Code
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
    内联复选框1
  </label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
  <label class="form-check-label" for="defaultCheck3">
    内联复选框2
  </label>
</div>

效果如下：

<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck2"> <label class="form-check-label" for="defaultCheck2"> 内联复选框1 </label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck3"> <label class="form-check-label" for="defaultCheck3"> 内联复选框2 </label> </div>

1.3 禁用（Disabled）复选框

如果需要禁用一个复选框，可以在 input 元素上添加 disabled 属性。

下面是一个禁用复选框的示例：

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

效果如下：

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

1.4 只读（Readonly）复选框

如果需要将一个复选框设置为只读，可以在 input 元素上添加 readonly 属性。

下面是一个只读复选框的示例：

htmlCopy Code
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="readonlyCheck" readonly>
  <label class="form-check-label" for="readonlyCheck">
    只读复选框
  </label>
</div>

效果如下：

<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="readonlyCheck" readonly> <label class="form-check-label" for="readonlyCheck"> 只读复选框 </label> </div>

2. 单选框（Radio）

使用 Bootstrap5 可以非常方便地创建一个美观的单选框。

2.1 基本用法

下面是一个基本的单选框示例：

htmlCopy Code
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio1" value="option1">
  <label class="form-check-label" for="exampleRadio1">
    默认单选框
  </label>
</div>

效果如下：

<div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio1" value="option1"> <label class="form-check-label" for="exampleRadio1"> 默认单选框 </label> </div>

2.2 内联（Inline）单选框

如果需要将多个单选框水平排列，可以使用内联单选框。

下面是一个内联单选框的示例：

htmlCopy Code
<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">
    内联单选框1
  </label>
</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">
    内联单选框2
  </label>
</div>

效果如下：

<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"> 内联单选框1 </label> </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"> 内联单选框2 </label> </div>

2.3 禁用（Disabled）单选框

如果需要禁用一个单选框，可以在 input 元素上添加 disabled 属性。

下面是一个禁用单选框的示例：

htmlCopy Code
<div class="form-check">
  <input class="form-check-input" type="radio" name="disabledRadios" id="disabledRadio" value="option1" disabled>
  <label class="form-check-label" for="disabledRadio">
    禁用单选框
  </label>
</div>

效果如下：

<div class="form-check"> <input class="form-check-input" type="radio" name="disabledRadios" id="disabledRadio" value="option1" disabled> <label class="form-check-label" for="disabledRadio"> 禁用单选框 </label> </div>

2.4 只读（Readonly）单选框

如果需要将一个单选框设置为只读，可以在 input 元素上添加 readonly 属性。

下面是一个只读单选框的示例：

htmlCopy Code
<div class="form-check">
  <input class="form-check-input" type="radio" name="readonlyRadios" id="readonlyRadio" value="option1" readonly>
  <label class="form-check-label" for="readonlyRadio">
    只读单选框
  </label>
</div>

效果如下：

<div class="form-check"> <input class="form-check-input" type="radio" name="readonlyRadios" id="readonlyRadio" value="option1" readonly> <label class="form-check-label" for="readonlyRadio"> 只读单选框 </label> </div>