in English

Iitshekhi kunye nonomathotholo

Yenza ibrowser engaguqukiyo kunye neebhokisi zokukhangela izixhobo ezinqamlezileyo kunye nonomathotholo kunye necandelo lethu lokujonga elibhalwe ngokutsha.

Kweli phepha

Indlela

Iibhokisi zokukhangela ezingagqibekanga zebhrawuza kunye nerediyo zitshintshwa ngoncedo lwe .form-check, uthotho lweeklasi kuzo zombini iintlobo zegalelo eziphucula uyilo kunye nokuziphatha kwezinto zazo zeHTML, ezibonelela ngokwenziwa ngokwezifiso okukhulu kunye nokuhambelana komkhangeli zincwadi. Iibhokisi zokukhangela zezokukhetha enye okanye iinketho ezininzi kuluhlu, ngelixa oonomathotholo bezokukhetha ukhetho olunye kwabaninzi.

Ngokwesakhiwo, imizalwane yethu <input>zizinto <label>ezizalanayo ngokuchaseneyo <input>nengaphakathi <label>. Oku kukwi-verbose kancinane njengoko kufuneka ukhankanye idkunye forneempawu zokunxulumana <input>ne <label>. Sisebenzisa umkhethi wabazalwana ( ~) kuwo onke <input>amazwe ethu, njenga :checkedokanye :disabled. Xa zidityaniswe .form-check-labelneklasi, sinokubhala ngokulula okubhaliweyo kumba ngamnye ngokusekelwe <input>kwimeko.

Iitshekhi zethu zisebenzisa ii-icon ze-Bootstrap zesiko ukubonisa amazwe ahlolisisiweyo okanye angaqinisekanga.

Iitshekhi

Ibhokisi yokukhangela ehlala ikho

Ibhokisi yokukhangela

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>

Okungamiselwanga

Iibhokisi zokukhangela zinokusebenzisa udidi :indeterminatelosinga olungelulo xa lucwangciswe ngesandla ngeJavaScript (akukho phawu lukhoyo lweHTML lokuyikhankanya).

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>

Kukhubazekile

Yongeza disableduphawu kunye nonxulumano <label>s zilungiswe ngokuzenzekelayo ukuze zitshatise nombala olula ukunceda ukubonisa imeko yegalelo.

Kuvaliwe ibhokisi yokukhangela engamiselwanga

Ibhokisi yokujonga ivaliwe

Ibhokisi yokukhangela ivaliwe

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>

Oonomathotholo

Irediyo ehlala ikho

Irediyo ijongiwe ngokusesikweni

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>

Kukhubazekile

Yongeza disableduphawu kunye nonxulumano <label>s zilungiswe ngokuzenzekelayo ukuze zitshatise nombala olula ukunceda ukubonisa imeko yegalelo.

Irediyo ekhubazekileyo

Irediyo ekhangelwe yacinywa

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>

Iiswitshi

Iswitshi inophawu lwebhokisi yokukhangela yesiko kodwa isebenzisa .form-switchiklasi ukunikezela iswitshi yokuguqula. Cinga ukusebenzisa role="switch"ukuhambisa ngokuchanekileyo ngakumbi ubume bolawulo kwiiteknoloji ezincedisayo ezixhasa le ndima. Kwiitekhnoloji zokuncedisa ezindala, iya kubhengezwa nje njengebhokisi yokukhangela eqhelekileyo njengokubuyisela umva. Iiswitshi zikwaxhasa disableduphawu.

Ufakelo lwebhokisi yokukhangela ehlala ikho

Itshekishwa igalelo lebhokisi yokukhangela

Ukufakwa kwebhokisi yokukhangela kuvaliwe

Ungeniso lwebhokisi yokukhangela luvaliwe

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>

Okuhlala kukho (kupakishwe)

Ngokungagqibekanga, naliphi na inani leebhokisi zokukhangela kunye nonomathotholo abazalanayo baya kugcinwa ngokuthe nkqo kwaye zibekwe ngokufanelekileyo nge .form-check.

Ibhokisi yokukhangela ehlala ikho

Ibhokisi yokujonga ivaliwe

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>

Irediyo ehlala ikho

Irediyo yesibini emiselweyo

Irediyo ekhubazekileyo

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>

Nomgca

Qela iibhokisi zokukhangela okanye iirediyo kumqolo othe tye ngokudibanisa .form-check-inlinenakweyiphi .form-check.

3 (ikhubazekile)

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 (ikhubazekile)

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>

Umva

Beka iibhokisi zakho zokukhangela, iirediyo, kunye nokutshintsha kwelinye icala kunye .form-check-reverseneklasi yesilungisi.

Reverse checkbox

Kuvaliwe ibhokisi yokukhangela umva

Reverse tshintsha igalelo lebhokisi yokukhangela

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>

Ngaphandle kweelebhile

Shiya ukusongwa kweebhokisi .form-checkzokukhangela kunye nerediyo ezingenalo mbhalo wombhalo. Khumbula ukuba usenokubonelela ngolunye uhlobo lwegama elifikelelekayo kwiitekhnoloji ezincedisayo (umzekelo, ukusebenzisa aria-label). Jonga icandelo lokufikeleleka kwefomula ngeenkcukacha.

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>

Guqula amaqhosha

Yenza iibhokisi zokukhangela ezifana neqhosha kunye namaqhosha erediyo ngokusebenzisa izimbo .btnkuneziqalelo . La maqhosha aqhoboshele angaphinda adityaniswe kwiqela lamaqhosha ukuba ayafuneka..form-check-label<label>

Ibhokisi yokukhangela amaqhosha okuguqula

Uguqulelo olunye

html

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

Ijongiwe

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>

Kukhubazekile

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>

Ngokubonakalayo, la maqhosha ebhokisi yokukhangela ayafana namaqhosha okuguqula iplagi yeqhosha . Nangona kunjalo, zihanjiswa ngokwahlukileyo ngobuchwepheshe obuncedisayo: iibhokisi zokukhangela ziya kubhengezwa ngabafundi besikrini njenge "tshekiweyo"/"ayikhangelwanga" (ekubeni, nangona inkangeleko yazo, iseyibhokisi yokukhangela), ngelixa amaqhosha okuguqula iplagin aya kuba ibhengezwe njenge "iqhosha"/"iqhosha licinezelwe". Ukukhetha phakathi kwezi ndlela zimbini kuya kuxhomekeka kuhlobo loguqulo olwenzayo, kwaye nokuba uguqulo luya kwenza ingqiqo kubasebenzisi xa bebhengezwa njengebhokisi yokukhangela okanye njengeqhosha lokwenyani.

Amaqhosha okuguqula unomathotholo

Ijongiwe Unomathotholo Kukhubazekile Unomathotholo

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>

Izimbo ezichaziweyo

Iiyantlukwano ezahlukeneyo ze .btn, ezifana kwizimbo ezahlukeneyo ezidwelisiweyo, ziyaxhaswa.

Uguqulelo olunye
Ijongiwe
Uphumelele unomathotholo Irediyo yengozi

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

Izinto eziguquguqukayo

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