Čekiai ir radijo imtuvai

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

Šiame puslapyje

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

Numatytasis žymimasis laukelis

Pažymėtas žymimasis laukelis

html

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

Neapibrėžtas žymimasis laukelis

html

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

Išjungtas neapibrėžtas žymimasis laukelis

Išjungtas žymimasis laukelis

Išjungtas pažymėtas žymimasis laukelis

html

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

Radijas

Numatytasis radijas

Numatytasis patikrintas radijas

html

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

Išjungtas radijas

Išjungtas patikrintas radijas

html

<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. Apsvarstykite galimybę naudoti role="switch", jei norite tiksliau perteikti valdymo pobūdį pagalbinėms technologijoms, kurios palaiko šį vaidmenį. Senesnėse pagalbinėse technologijose jis bus tiesiog paskelbtas kaip įprastas žymimasis laukelis kaip atsarginis variantas. Jungikliai taip pat palaiko disabledatributą.

Numatytasis jungiklio žymės langelio įvestis

Pažymėta jungiklio žymės langelio įvestis

Išjungta jungiklio žymės langelio įvestis

Išjungta pažymėto jungiklio žymės langelio įvestis

html

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

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.

Numatytasis žymimasis laukelis

Išjungtas žymimasis laukelis

html

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

Numatytasis radijas

Antrasis numatytasis radijas

Išjungtas radijas

html

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

3 (išjungta)

html

<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 (išjungta)

html

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

Atvirkščiai

Įdėkite žymimuosius langelius, radijas ir jungiklius į priešingą pusę su .form-check-reversemodifikavimo klase.

Atvirkštinis žymimasis laukelis

Išjungtas atvirkštinis žymimasis laukelis

Atbulinės eigos jungiklio žymės langelio įvestis

html

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

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.

html

<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

Vienas perjungimas

html

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

Patikrinta

html

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

Išjungta

html

<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

Patikrinta Radijas Išjungta Radijas

html

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

Vienas perjungimas
Patikrinta
Patikrintas sėkmės radijas Pavojaus radijas

html

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