Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
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

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

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

<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

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

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

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

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

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 .

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

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

<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

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

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



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