Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

Sɛgɛsɛgɛliw ni arajow

Aw ye cross-browser ni cross-device sɛgɛsɛgɛli kɛsu ni arajow dabɔ minnu bɛ bɛn ɲɔgɔn ma ni an ka sɛgɛsɛgɛli yɔrɔ sɛbɛnnen kura ye pewu.

Nin ɲɛ in kan

Surunya

Navigatɛriw ka jatebɔlanw ni arajow bɛ wuli ka bila u nɔ na ni dɛmɛ ye .form-check, o ye kalansenw ye minnu bɛ kɛ donnafɛn suguya fila bɛɛ la minnu bɛ u ka HTML fɛnw labɛncogo n’u kɛcogo ɲɛ, minnu bɛ fɛnw sɛgɛsɛgɛli caman di ani ka navigatɔrɔw ka ɲɔgɔndanba kɛ. Jateminɛ kɛyɔrɔw ye sugandili kelen walima caman sugandili ye lisi dɔ kɔnɔ, ka sɔrɔ arajow ye sugandili kelen sugandi caman cɛma.

Jatebla siratigɛ la, an ka <input>s ni <label>s ye balimakɛ-fɛnw ye k’a sɔrɔ an tɛ <input>kelen ye a kɔnɔ <label>. nin ye kumasen ye dɔɔnin i n' a fɔ i ka kan ka ɲɛfɔli idni forjogo jira walasa ka <input>ani <label>. An bɛ baara kɛ ni balimakɛ sugandilikɛlan ( ~) ye an ka <input>jamanaw bɛɛ la, i n’a fɔ :checkedwalima :disabled. Ni an farala .form-check-labelkalan kan, an bɛ se ka sɛbɛnni kɛcogo nɔgɔya fɛn kelen-kelen bɛɛ la ka da <input>'s cogoya kan.

An ka sɛgɛsɛgɛliw bɛ baara kɛ ni Bootstrap taamasiyɛnw ye minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye walasa ka cogoyaw jira minnu sɛgɛsɛgɛra walima minnu ma latigɛ.

Sɛgɛsɛgɛliw

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

A tɛ dantigɛ

Jateblaw bɛ Se ka baara Kɛ ni :indeterminatepseudo class ye ni u bɛ Se ka Kɛ ni bolo ye JavaScript fɛ (HTML fɛn si tɛ yen min bɛ Se k’a Jira).

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

A jɔ la

Fɛn min bɛ Fàra o disabledkan ani s minnu bɛ tali Kɛ ɲɔgɔn <label>na olu bɛ Kɛ u yɛrɛma cogo la walasa u ka Bɛn ni kulɛri nɔgɔman ye walasa ka dɛmɛ Dòn donta cogoya jira.

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

Arajow

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

A jɔ la

Fɛn min bɛ Fàra o disabledkan ani s minnu bɛ tali Kɛ ɲɔgɔn <label>na olu bɛ Kɛ u yɛrɛma cogo la walasa u ka Bɛn ni kulɛri nɔgɔman ye walasa ka dɛmɛ Dòn donta cogoya jira.

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

Switches (switchw).

Switch dɔ bɛ ni markup ye custom checkbox nka a bɛ baara kɛ ni .form-switchclass ye walasa ka toggle switch dɔ jira. Aw ye jateminɛ kɛ ka baara kɛ ni role="switch"a ye walasa ka kunnafoni di ka ɲɛ ka ɲɛsin kunbɛnni cogoya lase dɛmɛni fɛɛrɛw ma minnu bɛ nin jɔyɔrɔ in dɛmɛ. Dɛmɛn fɛɛrɛ kɔrɔw la, a bɛna fɔ dɔrɔn i n’a fɔ jatebɔyɔrɔ min bɛ kɛ tuma bɛɛ i n’a fɔ fallback. Switches fana bɛ disabledattribut (fɛn) in dɛmɛ.

html ye 
<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 (dafalen) .

Ka da a kan, jatebɔlanw ni arajo hakɛ o hakɛ min ye balimakɛw ye teliya la, olu bɛna bila ɲɔgɔn kan cogo bɛnnen na ni .form-check.

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

Inline kɔnɔ

kuluw lajɛyɔrɔw walima arajow kulu kelen kan jirisunba kelen kan ni dɔ farali .form-check-inlineye fɛn o fɛn .form-checkkan .

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

Ka yɛlɛma

Aw bɛ aw ka jatebɔyɔrɔw, arajow ani switchw bila fan dɔ fɛ ni .form-check-reversemodifier class ye.

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

Ni labeliw tɛ

Aw ye sɛbɛnfura bɔ .form-checkyen min bɛ kɛ ka sɛgɛsɛgɛli kɛyɔrɔw ni arajow lajɛ minnu tɛ ni labeli sɛbɛn ye. Aw ye aw hakili to a la hali bi ka tɔgɔ sugu dɔ di min bɛ se ka sɔrɔ dɛmɛni fɛɛrɛw la (misali la, ka baara kɛ ni aria-label). Aw ye sɛbɛn ɲɛw lajɛcogo lajɛ yɔrɔ la walasa ka kunnafoni wɛrɛw sɔrɔ.

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

Butɔnw bɛ wuli ka bɔ ɲɔgɔn na

Butɔnw ni arajo butɔni minnu bɛ i n’a fɔ butɔni, olu dabɔ ni baara kɛli ye ni .btncogoyaw ye sanni ka baara .form-check-labelkɛ ni fɛnw ye <label>minnu bɛ fɛnw kan. O butɔni caman bɛ se ka fara ɲɔgɔn kan ka taa a fɛ butɔni kulu dɔ kɔnɔ ni mago bɛ u la.

Butɔnw sɛgɛsɛgɛli kɛsu

html ye 
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
html ye 
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
html ye 
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
Yecogo la, nin jatebɔ-yɔrɔ-yɔrɔ-ko-butɔnw ni butɔni-yɔrɔ-yɔrɔ-ko-butɔni bɛ kelen ye . Nka, u bɛ Lase cogo wɛrɛ la dɛmɛn-fɛɛrɛw fɛ: jatebɔ-yɔrɔ-yɔrɔ-ko-yɔrɔ-ko bɛna Laseli ɛkran-kalanbagaw fɛ ko “yɔrɔ-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko bɛna Kɛ laseli kɛra ko “butɔni”/“butɔni digilen”. Sugandili min bɛ kɛ nin fɛɛrɛ fila ninnu cɛ, o bɛna bɔ i bɛ ka toggle suguya min Dabɔ, ani ni toggle bɛna kɛ sababu ye walima n’a tɛna kɛ sababu ye ka baarakɛlaw la ni a laseli kɛra i n’a fɔ jatebɔyɔrɔ walima i n’a fɔ butɔni yɛrɛ.

Arajo ka butɔni minnu bɛ fɛnw wuli

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

Fɛɛrɛ minnu ɲɛfɔlen don

, suguya wɛrɛw .btn, i n’a fɔ a cogoya ɲɛfɔlenw na, olu bɛ dɛmɛ.



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

Yɛlɛma-yɛlɛmaw

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