Tshawb xyuas thiab xov tooj cua

Tsim kom muaj qhov sib npaug ntawm qhov browser thiab cross-device checkboxes thiab xov tooj cua nrog peb cov ntawv txheeb xyuas tag nrho.

Ntawm nplooj ntawv no

Mus cuag

Browser default checkboxes thiab xov tooj cua yog hloov nrog kev pab los ntawm .form-check, ib tug series ntawm cov chav kawm ntawv rau ob qho tib si input hom uas txhim kho cov layout thiab tus cwj pwm ntawm lawv cov ntsiab HTML, uas muab ntau customization thiab cross browser sib xws. Checkboxes yog xaiv ib lossis ob peb txoj kev xaiv hauv ib daim ntawv teev npe, thaum lub xov tooj cua yog xaiv ib qho kev xaiv los ntawm ntau.

Raws li txoj cai, peb <input>cov s thiab <label>s yog cov kwv tij txheeb ze uas tsis yog <input>nyob hauv ib qho <label>. Qhov no yog me ntsis ntau verbose raws li koj yuav tsum qhia meej idthiab forcwj pwm los cuam tshuam cov <input>thiab <label>. Peb siv tus kwvtij xaiv ( ~) rau tag nrho peb <input>lub xeev, xws li :checkedlossis :disabled. Thaum ua ke nrog cov .form-check-labelchav kawm, peb tuaj yeem yooj yim style cov ntawv rau txhua yam khoom raws li lub <input>xeev.

Peb cov tshev mis siv cov cim Bootstrap kev cai los qhia txog lub xeev kuaj lossis tsis paub meej.

Kev kuaj

Default checkbox

Kos lub thawv

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Tsis paub meej

Checkboxes tuaj yeem siv cov :indeterminatechav kawm pseudo thaum manually teeb tsa ntawm JavaScript (tsis muaj HTML tus cwj pwm los qhia nws).

Indeterminate checkbox

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Indeterminate checkbox
  </label>
</div>

Neeg tsis taus

Ntxiv tus disabledcwj pwm thiab cov kev txuam nrog <label>s tau txais styled kom phim nrog cov xim sib dua los pab qhia cov tswv yim lub xeev.

Disabled indeterminate checkbox

Disabled checkbox

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

Xov tooj cua

Xov tooj cua qub

Cov xov tooj cua uas tau kuaj xyuas lawm

html

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

Neeg tsis taus

Ntxiv tus disabledcwj pwm thiab cov kev txuam nrog <label>s tau txais styled kom phim nrog cov xim sib dua los pab qhia cov tswv yim lub xeev.

Xov tooj cua tsis taus

Disabled checked radio

html

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

Hloov

Ib qho kev hloov pauv muaj qhov cim ntawm lub npov kev cai tab sis siv cov .form-switchchav kawm los ua qhov hloov pauv. Xav txog kev siv role="switch"los qhia qhov tseeb ntawm kev tswj hwm rau cov thev naus laus zis uas txhawb nqa lub luag haujlwm no. Hauv cov cuab yeej pabcuam qub, nws tsuas yog yuav tshaj tawm raws li lub thawv tsis tu ncua raws li qhov rov qab. Switches kuj txhawb tus disabledcwj pwm.

Default hloov checkbox input

Checked hloov checkbox input

Disabled hloov checkbox input

Disabled checked switch checkbox input

html

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Default (stacked)

Los ntawm lub neej ntawd, txhua tus naj npawb ntawm checkboxes thiab xov tooj cua uas yog cov kwv tij tam sim ntawd yuav raug vertically stacked thiab tsim nyog spaced nrog .form-check.

Default checkbox

Disabled checkbox

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Xov tooj cua qub

Xov tooj cua thib ob

Xov tooj cua tsis taus

html

<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">
    Default radio
  </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">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Hauv kab

Pab pawg checkboxes lossis xov tooj cua ntawm tib kab kab rov tav los ntawm kev ntxiv .form-check-inlinerau ib qho .form-check.

3 (neeg xiam)

html

<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">1</label>
</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">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (neeg xiam)

html

<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="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Rov qab

Muab koj lub checkboxes, xov tooj cua, thiab keyboards ntawm sab nraud nrog cov .form-check-reversechav kawm hloov kho.

Rov qab checkbox

Disabled rov qab checkbox

Rov qab hloov checkbox input

html

<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>

Tsis muaj daim ntawv lo

Tshem tawm cov ntawv qhwv .form-checkrau lub thawv ntawv thiab xov tooj cua uas tsis muaj ntawv sau npe. Nco ntsoov tseem muab qee hom npe siv tau rau kev pabcuam thev naus laus zis (piv txwv li, siv aria-label). Saib cov ntaub ntawv txheej txheem nkag mus rau seem kom paub meej.

html

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

Toggle khawm

Tsim cov pob zoo li checkboxes thiab xov tooj cua nyees khawm los ntawm kev siv cov .btnqauv es tsis yog .form-check-labelntawm cov <label>ntsiab lus. Cov nyees khawm toggle no tuaj yeem txuas ntxiv rau hauv ib pawg khawm yog tias xav tau.

Checkbox toggle nyees khawm

Ib leeg toggle

html

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

Tshawb xyuas

html

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

Neeg tsis taus

html

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Visually, cov checkbox toggle nyees khawm yog zoo tib yam rau cov khawm plugin toggle nyees khawm . Txawm li cas los xij, lawv raug xa tawm txawv los ntawm kev pabcuam thev naus laus zis: lub checkbox toggles yuav raug tshaj tawm los ntawm cov neeg nyeem cov tshuaj ntsuam raws li "checked" / "tsis tau kuaj" (vim, txawm tias lawv zoo li, lawv tseem nyob hauv checkboxes), whereas lub khawm plugin toggle nyees khawm yuav yog. tshaj tawm raws li "khawm" / "khawm nias". Qhov kev xaiv ntawm ob txoj hauv kev no yuav nyob ntawm seb hom toggle koj tab tom tsim, thiab seb qhov toggle yuav ua rau muaj kev nkag siab rau cov neeg siv thaum tshaj tawm raws li lub checkbox lossis raws li lub pob tiag.

Xov tooj cua toggle nyees khawm

Tshawb xyuas Xov tooj cua Neeg tsis taus Xov tooj cua

html

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

Cov qauv qhia

Txawv sib txawv ntawm .btn, xws li ntawm ntau yam qauv qhia, tau txais kev txhawb nqa.

Ib leeg toggle
Tshawb xyuas
Tshawb xyuas xov tooj cua Xov tooj cua Danger

html

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

Sass

Hloov pauv

$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 1px solid rgba($black, .25);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;