in English

Macheki nemaredhiyo

Gadzira anowirirana muchinjika-browser uye muchinjika-chishandiso cheki mabhokisi nemaredhiyo ane yedu yakanyatso kunyorwa cheki chikamu.

Pa peji ino

Approach

Browser default checkboxes uye maredhiyo anotsiviwa nerubatsiro rwe .form-check, akatevedzana emakirasi eese ari maviri emhando ekuisa anovandudza marongero uye maitiro ezvawo eHTML zvinhu, izvo zvinopa yakakura kugadzirisa uye kuchinjika browser kuenderana. Mabhokisi ekutarisa ndeekusarudza imwe kana akati wandei sarudzo mune runyorwa, nepo maredhiyo ari ekusarudza imwe sarudzo kubva kune akawanda.

Zvimiro, yedu <input>uye isu <label>zvinhu zvehama zvinopesana nemukati <input>me <label>. Izvi zvine verbose zvishoma sezvaunofanirwa kutsanangura iduye forhunhu hune hukama <input>ne <label>. Isu tinoshandisa sibling selector ( ~) <input>kumatunhu edu ese, senge :checkedkana :disabled. Kana zvabatanidzwa .form-check-labelnekirasi, tinokwanisa kutaira zviri nyore zvinyorwa zvechinhu chimwe nechimwe zvichibva pamamiriro <input>ezvinhu.

Cheki dzedu dzinoshandisa zvidhori zveBootstrap kuratidza zvakatariswa kana zvisingaite.

Checks

Default checkbox

Mateki bhokisi

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

Indeterminate

Mabhokisi ekutarisa anogona kushandisa :indeterminatepseudo kirasi kana yaiswa nemaoko kuburikidza neJavaScript (hapana iripo HTML hunhu hwekuitsanangura).

Indeterminate checkbox

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

Yakaremara

Wedzera disabledhunhu uye anobatanidzwa <label>s anogadzirwa otomatiki kuti aenderane neruvara rwakareruka kubatsira kuratidza mamiriro ekuisa.

Bhokisi rekuongorora rakadzimwa

Cheka bhokisi rakadzimwa

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

Redhiyo

Default radio

Default yakatariswa radio

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

Yakaremara

Wedzera disabledhunhu uye anobatanidzwa <label>s anogadzirwa otomatiki kuti aenderane neruvara rwakareruka kubatsira kuratidza mamiriro ekuisa.

Redhiyo yakadzimwa

Redhiyo yakadzima

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

Swichi

Switch ine markup yecustomer checkbox asi inoshandisa .form-switchkirasi kupa switch yekuchinja. Funga kushandisa role="switch"kunyatsoburitsa chimiro chekutonga kune tekinoroji dzinotsigira basa iri. Mune ekare anobatsira matekinoroji, inongoziviswa seyakajairwa cheki bhokisi sekudzokera shure. Kuchinja kunotsigirawo disabledhunhu.

Default chinja bhokisi rekuisa

Wamaka chinja cheki bhokisi

Yadzimwa chinja cheki bhokisi

Yadzimwa cheki cheki bhokisi

<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 (yakaturikidzana)

Nekumisikidza, chero nhamba yemabhokisi ekutarisa uye maredhiyo ari epedyo hama anozorongedzerwa akamira uye akapatsanurwa zvakafanira ne .form-check.

Default checkbox

Bhokisi rekuongorora rakadzimwa

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

Default radio

Chechipiri default radio

Redhiyo yakadzimwa

<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

Boka mabhokisi ekutarisa kana maredhiyo pamutsara wakachinjika wakafanana nekuwedzera .form-check-inlinekune chero .form-check.

3 (akaremara)

<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 (akaremara)

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

Pasina mavara

Siya .form-checkkupeta kwemabhokisi echeki nemaredhiyo asina mavara emavara. Rangarira uchiri kupa imwe nzira yezita rinowanikwa rekubatsira matekinoroji (semuenzaniso, kushandisa aria-label). Ona mafomu ekuona kwechikamu chikamu kuti uwane ruzivo.

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

Toggle mabhatani

Gadzira mabhatani-secheki mabhokisi uye mabhatani eredhiyo uchishandisa .btnzvitaera kwete pane .form-check-labelzvinhu <label>. Aya mabhatani ekushandura anogona zvakare kuiswa muboka remabhatani kana zvichidikanwa.

Checkbox toggle mabhatani

Single toggle

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

Checked

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

Yakaremara

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Pakuona, aya mabhatani echeki ekuti atendeuke akafanana nebhatani plugin toggle mabhatani . Nekudaro, iwo anounzwa zvakasiyana neanobatsira matekinoroji: bhokisi rekutarisa rinozoziviswa nevaverengi vescreen se "yakatariswa"/"isina kutariswa" (sezvo, kunyangwe chitarisiko chavo, ivo vachiri mabhokisi ekutarisa), nepo bhatani plugin shandura mabhatani achange ari. yakaziviswa se "bhatani"/"bhatani rakadzvanywa". Sarudzo pakati peidzi nzira mbiri inoenderana nerudzi rwekuchinjisa yauri kugadzira, uye kuti kana kusachinja kuchaita zvine musoro kune vashandisi kana yaziviswa sebhokisi rekutarisa kana sebhatani chairo.

Redhiyo shandura mabhatani

Checked Radio Yakaremara Radio

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

Zvitaera zvakatsanangurwa

Misiyano yakasiyana ye .btn, yakadai pamhando dzakasiyana-siyana dzakatsanangurwa, dzinotsigirwa.

Single toggle
Checked
Wakatarisa redhiyo yekubudirira Njodzi radio

<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

Variables

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