Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
in English

Čekiai ir radijo imtuvai

Sukurkite nuoseklius kelių naršyklių ir kelių įrenginių žymimuosius laukelius ir radijo imtuvus naudodami visiškai perrašytą patikrų komponentą.

metodas

Numatytieji naršyklės žymimieji laukeliai ir radijo imtuvai pakeičiami naudojant .form-checkabiem įvesties tipams skirtas klases, kurios pagerina jų HTML elementų išdėstymą ir elgseną, užtikrina didesnį tinkinimą ir nuoseklumą tarp naršyklių. Žymieji langeliai yra skirti pasirinkti vieną ar kelias parinktis sąraše, o radijo imtuvai skirti pasirinkti vieną iš daugelio.

Struktūriškai mūsų <input>s ir <label>s yra brolių ir seserų elementai, o ne <input>viduje a <label>. Tai yra šiek tiek išsamesnė, nes turite nurodyti idir foratributus, kad susietumėte <input>ir <label>. Naudojame seserų parinkiklį ( ~) visoms mūsų <input>būsenoms, pvz ., :checkedarba :disabled. Sujungę su .form-check-labelklase, galime lengvai sukurti kiekvieno elemento teksto stilių pagal <input>būseną.

Mūsų patikrinimuose naudojamos tinkintos „Bootstrap“ piktogramos, kurios nurodo pažymėtas arba neapibrėžtas būsenas.

Patikros

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

Neapibrėžta

Žymieji langeliai gali naudoti :indeterminatepseudo klasę, kai ji nustatoma rankiniu būdu naudojant „JavaScript“ (nėra pasiekiamo HTML atributo jai nurodyti).

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

Išjungta

Pridėkite disabledatributą ir susiję <label>s automatiškai formuojami taip, kad atitiktų šviesesnę spalvą, kad būtų lengviau nurodyti įvesties būseną.

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

Radijas

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

Išjungta

Pridėkite disabledatributą ir susiję <label>s automatiškai formuojami taip, kad atitiktų šviesesnę spalvą, kad būtų lengviau nurodyti įvesties būseną.

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

Jungikliai

Jungiklis turi pasirinktinio žymės langelio žymėjimą, bet naudoja .form-switchklasę perjungimo jungikliui pateikti. Jungikliai taip pat palaiko disabledatributą.

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

Numatytasis (sudarytas)

Pagal numatytuosius nustatymus bet koks žymimųjų laukelių ir radijo imtuvų skaičius, kurie yra tiesioginiai broliai, bus išdėstyti vertikaliai ir tinkamai išdėstyti su .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

Grupuokite žymimuosius laukelius arba radijo imtuvus toje pačioje horizontalioje eilutėje pridėdami .form-check-inlineprie bet kurio .form-check.

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

Be etikečių

Praleiskite .form-checkžymimuosius laukelius ir radijo imtuvus, kuriuose nėra etiketės teksto. Nepamirškite pateikti tam tikros formos pasiekiamo pagalbinių technologijų pavadinimo (pvz., naudojant aria-label). Daugiau informacijos rasite formų apžvalgos pritaikymo neįgaliesiems skyriuje.

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

Perjungimo mygtukai

Kurkite mygtukus primenančius žymimuosius laukelius ir radijo mygtukus naudodami .btnstilius, o ne .form-check-labelelementus <label>. Jei reikia , šiuos perjungimo mygtukus galima sugrupuoti į mygtukų grupę .

Žymės langelio perjungimo mygtukai

<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>
Vizualiai šie žymės langelio perjungimo mygtukai yra identiški mygtukų papildinio perjungimo mygtukams . Tačiau pagalbinės technologijos juos perteikia skirtingai: ekrano skaitytuvai praneš apie žymimuosius langelius kaip „pažymėtus“ / „nepažymėti“ (nes, nepaisant išvaizdos, jie iš esmės vis dar yra žymės langeliai), o mygtukų įskiepių perjungimo mygtukai bus pranešama kaip „mygtukas“ / „mygtukas paspaustas“. Pasirinkimas tarp šių dviejų būdų priklausys nuo kuriamo perjungimo tipo ir nuo to, ar perjungimas bus prasmingas vartotojams, kai paskelbiamas kaip žymimasis laukelis, ar kaip tikras mygtukas.

Radijo perjungimo mygtukai

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

Nubrėžti stiliai

.btnPalaikomi įvairūs , pvz., įvairiais apibūdintais stiliais, variantai .



<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

Kintamieji

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