Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

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 coj cwj pwm ntawm lawv HTML ntsiab, uas muab ntau customization thiab cross browser sib xws. Checkboxes yog xaiv ib lossis ntau txoj hauv kev 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

<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).

<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.

<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

<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.

<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.

<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.

<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>
<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.

<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>
<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>

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.

<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

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
<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

<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.



<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 10l3 3l6-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;