Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
in English

Dzodzro kple radiowo

Wɔ cross-browser kple cross-device checkbox kple radio siwo mewɔa tɔtrɔ o kple míaƒe checks component si wogbugbɔ ŋlɔ keŋkeŋ.

Le axa sia dzi

Te ɖe

Wotsɔa , si nye klass siwo kplɔ wo nɔewo ɖo na nyawo tsɔtsɔ de eme ƒomevi eveawo siaa ɖɔlia browser ƒe dzesideɖaka siwo woɖo ɖi kple radiowo .form-check, siwo naa asitɔtrɔ geɖe wu kple cross browser ƒe ɖekawɔwɔ. Aɖakawo nye tiatia ɖeka alo geɖe tiatia le xexlẽdzesi aɖe me, gake radiowo ya nye tiatia ɖeka tso geɖe me.

Le wɔwɔme nu la, míaƒe <input>s kple <label>s nye nɔviwo ƒe akpa siwo to vovo na an <input>within a <label>. Esia nye nyagbɔgblɔ geɖe wu vie abe alesi wòle be nàgblɔ idkple fornɔnɔmewo be nàtsɔ asɔ <input>kple kple <label>. Míezãa nɔviŋutsu tiatia ( ~) na míaƒe <input>dukɔwo katã, abe :checkedalo :disabled. Ne míetsɔe kpe ɖe .form-check-labelklass la ŋu la, míate ŋu anɔ te ɖe <input>'s nɔnɔme dzi atsɔ awɔ nuŋɔŋlɔa ƒe atsyã bɔbɔe na nu ɖesiaɖe.

Míaƒe dodokpɔwo zãa Bootstrap ƒe dzesi siwo wowɔ ɖe ɖoɖo nu tsɔ fiaa nɔnɔme siwo wodo kpɔ alo esiwo womeɖo ɖi o.

Dzeɖoɖowo

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

Womeɖoe kplikpaa o

Dzesiɖakawo ateŋu azã :indeterminatepseudo class ne woɖoe kple asi to JavaScript dzi (HTML nɔnɔme aɖeke meli si woatsɔ agblɔe o).

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

Si me woɖe dzo le

Tsɔ disablednɔnɔmea kpee eye wowɔa <label>s siwo do ƒome kplii ƒe atsyã le wo ɖokui si be woasɔ kple amadede si me kɔ wu be wòakpe ɖe eŋu wòafia nusi wotsɔ de eme ƒe nɔnɔme.

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

Radiowo dzi

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

Si me woɖe dzo le

Tsɔ disablednɔnɔmea kpee eye wowɔa <label>s siwo do ƒome kplii ƒe atsyã le wo ɖokui si be woasɔ kple amadede si me kɔ wu be wòakpe ɖe eŋu wòafia nusi wotsɔ de eme ƒe nɔnɔme.

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

Trɔtrɔwo

Trɔtrɔ aɖe ƒe dzesi le aɖaka si wowɔ ɖe ɖoɖo nu ŋu gake ezãa .form-switchklass la tsɔ ɖea tɔtrɔ ƒe tɔtrɔ aɖe gɔme. Trɔtrɔwo hã doa alɔ disablednɔnɔmea.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" 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" 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" 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" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Default (woƒo ƒu ɖe wo nɔewo dzi) .

Le gɔmedzedzea me la, woaɖo dzesiɖaka kple radio xexlẽme ɖesiaɖe si nye nɔvi kplikplikpli la ɖe wo nɔewo dzi le tsitrenu eye woatsɔ .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>

Le fli me

Ƒo dzesiɖakawo alo radiowo nu ƒu ɖe fli ɖeka si le tsia dzi la dzi to wo tsɔtsɔ kpe .form-check-inlineɖe ɖesiaɖe .form-checkŋu me.

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

Nuŋlɔɖiwo manɔmee

Ðe nya siwo wotsɔ blaa nu .form-checkɖe ​​dzesiɖakawo kple radio siwo me nuŋɔŋlɔ aɖeke mele o ŋu la ɖa. Ðo ŋku edzi nàgatsɔ ŋkɔ aɖe si ŋu woate ŋu aɖo kpee na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu la kokoko (le kpɔɖeŋu me, zazã aria-label). Kpɔ agbalẽviawo ŋuti nyatakaka ƒe akpa si nye mɔnukpɔkpɔwo hena numeɖeɖe bubuwo.

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

Trɔ asi le abɔtawo ŋu

Wɔ dzesideɖaka siwo le abe abɔta ene kple radio ƒe abɔtawo to .btnatsyãwo zazã me tsɔ wu be nàzãe .form-check-labelɖe <label>nuawo dzi. Woate ŋu aƒo toggle button siawo nu ƒu ɖe button ƒuƒoƒo me ne ehiã.

Trɔ asi le aɖaka me ƒe dzesiwo ŋu

<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>
Le nukpɔkpɔ me la, dzesideɖaka ƒe tɔtrɔ ƒe abɔta siawo sɔ kple abɔta ƒe ʋuƒo ƒe tɔtrɔ ƒe abɔta . Gake mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu la ɖea wo fiana le mɔ vovovowo nu: screen readers aɖe gbeƒãe be “wode dzesii”/“womede dzesi wo o” (esi wònye be, togbɔ be wodzena hã la, wogakpɔtɔ nye dzesideɖakawo le gɔmedzedzea me), gake button plugin ƒe tɔtrɔ ƒe abɔtawo ya anɔ nenema woɖe gbeƒãe be “button”/“button pressed”. Tiatia si nàwɔ le mɔnu eve siawo dome anɔ te ɖe tɔtrɔ ƒomevi si nèle wɔwɔm dzi, kple nenye be gɔmesese anɔ tɔtrɔa ŋu na ezãlawo ne woɖe gbeƒãe be enye dzesiɖaka alo abe abɔti ŋutɔŋutɔ ene alo mawɔe o.

Radio dzi ʋuƒo siwo wotsɔna trɔa asi le nu ŋu

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

Atsyã siwo ŋu woƒo nu tsoe

Wodoa alɔ , ƒe tɔtrɔ vovovowo .btn, abe le atsyã vovovo siwo woɖe ɖe go la me ene.



<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 ƒe nyawo

Nusiwo trɔna

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