Ebikebera ne leediyo

Tonda obutakyukakyuka cross-browser ne cross-device checkboxes ne radios n'ekitundu kyaffe eky'okukebera ekiddamu okuwandiikibwa ddala.

Ku muko guno

Okutuukirira

Browser default checkboxes ne radios zikyusibwamu nga ziyambibwako .form-check, omuddirirwa gwa classes for both input types ezilongoosa ensengeka n’enneeyisa y’ebintu byabwe HTML, ebiwa customization okusingawo n’okusalako browser consistency. Ebibokisi ebikebera biba bya kulonda ekintu kimu oba ebiwerako mu lukalala, ate leediyo za kulonda ekintu kimu okuva mu bingi.

Mu nsengeka, <input>s ne <label>s zaffe elementi za baganda okusinga an <input>munda mu a <label>. Kino kisingako katono verbose nga olina okulaga idne forattributes okukwataganya <input>ne <label>. Tukozesa ekisunsula baganda ( ) ku masaza ~gaffe gonna, nga oba . Bwe tugattibwa ne kiraasi, tusobola bulungi okukola sitayiro y’ekiwandiiko ku buli kintu okusinziira ku mbeera ya 's.<input>:checked:disabled.form-check-label<input>

Okukebera kwaffe kukozesa ebifaananyi bya Bootstrap eby’enjawulo okulaga embeera ezikebereddwa oba ezitategeerekeka.

Okukebera

Akabokisi akasooka okukebera

Akabokisi akalaga akabonero

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>

Obutasalibwawo

Checkboxes zisobola okukozesa :indeterminatepseudo class nga ziteekeddwa mu ngalo nga ziyita mu JavaScript (tewali HTML attribute eriwo okukirambika).

Akabokisi akalaga nti tekategeerekese

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>

Obutesobola

Okwongerako disabledekintu era <label>s ezikwatagana zikolebwa mu ngeri ey’otoma okukwatagana ne langi enzirugavu okuyamba okulaga embeera y’okuyingiza.

Eremeddwa akabokisi akalaga obutasaliddwawo

Akabokisi k'okukebera akalemeddwa

Disabled eteekeddwako akabonero akalaga

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>

Leediyo

Leediyo eya bulijjo

Default leediyo ekebereddwa

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>

Obutesobola

Okwongerako disabledekintu era <label>s ezikwatagana zikolebwa mu ngeri ey’otoma okukwatagana ne langi enzirugavu okuyamba okulaga embeera y’okuyingiza.

Leediyo eriko obulemu

Leediyo eyakeberebwa eriko obulemu

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>

Ebikyusakyusa

Sswiiki erina markup ya custom checkbox naye ekozesa .form-switchclass okulaga toggle switch. Lowooza ku kukozesa role="switch"okutuusa obulungi obutonde bw‟okufuga eri tekinologiya ayamba awagira omulimu guno. Mu tekinologiya omukadde okuyamba, kijja kumala kulangirirwa nga checkbox eya bulijjo nga fallback. Switches nazo ziwagira disabledattribute.

Okuyingiza mu kabokisi akalaga switch akasookerwako

Ebiyingizibwa mu kabokisi akalaga switch kakebereddwa

Okuyingiza mu kabokisi k'okukebera kwa switch kulemeseddwa

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

Ekisookerwako (ekitumbibwa) .

Nga bwekiba, omuwendo gwonna ogw'ebibokisi ebikebera ne leediyo ezibeera muganda ow'amangu zijja kuteekebwa mu vertikal era nga ziteekeddwa mu bbanga erisaanira ne .form-check.

Akabokisi akasooka okukebera

Akabokisi k'okukebera akalemeddwa

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>

Leediyo eya bulijjo

Leediyo eyookubiri eya bulijjo

Leediyo eriko obulemu

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>

Mu layini

Gamba ebibokisi ebikebera oba leediyo ku lunyiriri lwe lumu olw'okwebungulula ng'ogatta .form-check-inlineku yonna .form-check.

3 (abaliko obulemu) .

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 (abaliko obulemu) .

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>

Okudda emabega

Teeka checkboxes zo, radios, ne switches ku ludda olulala ne .form-check-reversemodifier class.

Okudda emabega akabokisi akalaga

Disabled okudda emabega checkbox

Reverse switch checkbox okuyingiza

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>

Awatali bipande

Leka okuzinga .form-checkku checkboxes ne radios ezitalina biwandiiko bya label. Jjukira okukyawa engeri emu ey’erinnya erituukirirwa eri tekinologiya ayamba (okugeza, okukozesa aria-label). Laba ekitundu ky’okutuuka ku foomu okulambika okumanya ebisingawo.

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>

Okukyusakyusa obutambi

Tonda ebibokisi ebiringa bbaatuuni ne bbaatuuni za leediyo ng’okozesa .btnsitayiro okusinga .form-check-labelku <label>elementi. Butaamu zino ezikyusakyusa zisobola okwongera okukuŋŋaanyizibwa mu kibinja kya button bwe kiba kyetaagisa.

Checkbox buttons ezikyusakyusa

Okukyusakyusa okumu

html

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

Bakebereddwa

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>

Obutesobola

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>

Mu kulaba, obutambi buno obukyusakyusa mu kasanduuko kabonero bufaanagana ne butaamu obukyusakyusa mu plugin ya button . Naye, zituusibwa mu ngeri ey’enjawulo tekinologiya ayamba: okukyusakyusa mu kasanduuko kajja kulangirirwa abasomi ku ssirini nga “kukebereddwa”/“tekukebereddwa” (okuva, wadde nga zirabika, mu musingi zikyali bbokisi z’okukebera), so nga obutambi bw’okukyusakyusa mu plugin ya button bujja kuba bwe kityo erangiriddwa nga “button”/“button enyigiddwa”. Okulonda wakati w’enkola zino ebbiri kijja kusinziira ku kika kya toggle ky’okola, era oba toggle ejja kukola amakulu eri abakozesa nga elangirirwa nga checkbox oba nga button yennyini oba nedda.

Ebintu ebikyusakyusa leediyo

Bakebereddwa Leediyo Obutesobola Leediyo

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>

Emisono egyalagiddwa

Enjawulo ez’enjawulo eza .btn, nga ku sitayiro ez’enjawulo eziragiddwa, ziwagirwa.

Okukyusakyusa okumu
Bakebereddwa
Yakebereddwa leediyo y'obuwanguzi Leediyo y’akabi

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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

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