Bootstrap5 復選框與單選框

如果您希望用戶從預設選項列表中選擇任意數(shù)量的選項，可以使用復選框：

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比容城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式容城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋容城地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

實例

<
div

class
=
"
form-check
"
>

<
input

class
=
"
form-check-input
"

type
=
"
checkbox
"

id
=
"
check1
"

name
=
"
option1
"

value
=
"
something
"

checked
>

<
label

class
=
"
form-check-label
"
>
Option 1
label
>

div
>

嘗試一下 ?

復選框通過使用 class="form-check" 來確保標簽和復選框有適當邊距。

.form-check-label 類添加到標簽元素，.form-check 容器內(nèi)添加 .form-check-input 類來設置復選框的樣式。

checked 屬性用于設置默認選中的選項。

單選框

如果您希望用戶從預設選項列表中選擇一個選項，可以使用單選框：

實例

<
div

class
=
"
form-check
"
>

<
input

type
=
"
radio
"

class
=
"
form-check-input
"

id
=
"
radio1
"

name
=
"
optradio
"

value
=
"
option1
"

checked
>
Option 1
<
label

class
=
"
form-check-label
"

for
=
"
radio1
"
>
label
>

div
>

<
div

class
=
"
form-check
"
>

<
input

type
=
"
radio
"

class
=
"
form-check-input
"

id
=
"
radio2
"

name
=
"
optradio
"

value
=
"
option2
"
>
Option 2
<
label

class
=
"
form-check-label
"

for
=
"
radio2
"
>
label
>

div
>

<
div

class
=
"
form-check
"
>

<
input

type
=
"
radio
"

class
=
"
form-check-input
"

disabled
>
Option 3
<
label

class
=
"
form-check-label
"
>
label
>

div
>

嘗試一下 ?

切換開關(guān)

如果你想把復選框變成一個可切換的開關(guān)，可以在 .form-check 容器內(nèi)使用 .form-switch 類:

實例

<
div

class
=
"
form-check form-switch
"
>

<
input

class
=
"
form-check-input
"

type
=
"
checkbox
"

id
=
"
mySwitch
"

name
=
"
darkmode
"

value
=
"
yes
"

checked
>

<
label

class
=
"
form-check-label
"

for
=
"
mySwitch
"
>
Dark Mode
label
>

div
>

嘗試一下 ?

分享題目：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5復選框與單選框
本文來源：http://www.5511xx.com/article/djojodc.html