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.
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 id
ni for
jogo 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ɔ :checked
walima :disabled
. Ni an farala .form-check-label
kalan 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 :indeterminate
pseudo 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 disabled
kan 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 disabled
kan 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-switch
class ye walasa ka toggle switch dɔ jira. Switches fana bɛ disabled
attribut (fɛn) in dɛmɛ.
<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 (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-inline
ye fɛn o fɛn .form-check
kan .
<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-check
yen 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 .btn
cogoyaw ye sanni ka baara .form-check-label
kɛ 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>
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;