Čeki in radijski sprejemniki

Z našo popolnoma prepisano komponento za preverjanje ustvarite dosledna potrditvena polja in radijske postaje med brskalniki in napravami.

Na tej strani

Pristop

Privzeta potrditvena polja in radijski elementi brskalnika so nadomeščeni s pomočjo .form-checkniza razredov za obe vrsti vnosa, ki izboljša postavitev in obnašanje njihovih elementov HTML, kar zagotavlja večjo prilagoditev in doslednost med brskalniki. Potrditvena polja so namenjena izbiri ene ali več možnosti na seznamu, medtem ko so radijski sprejemniki namenjeni izbiri ene možnosti izmed mnogih.

Strukturno sta naša <input>s in <label>s sorodna elementa v nasprotju z a <input>znotraj a <label>. To je nekoliko bolj podrobno, saj morate določiti atribute idin forza povezavo <input>in <label>. Izbirnik sorodnikov ( ~) uporabljamo za vsa naša <input>stanja, na primer :checkedali :disabled. V kombinaciji z .form-check-labelrazredom lahko preprosto oblikujemo besedilo za vsak element glede na stanje <input>'s.

Naša preverjanja uporabljajo prilagojene ikone Bootstrap za označevanje preverjenih ali nedoločenih stanj.

Čeki

Privzeto potrditveno polje

Potrjeno potrditveno polje

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

Nedoločeno

Potrditvena polja lahko uporabljajo :indeterminatepsevdorazred, če so ročno nastavljena prek JavaScripta (ni razpoložljivega atributa HTML za njegovo določitev).

Nedoločeno potrditveno polje

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

Onemogočeno

Dodajte disabledatribut in povezani <label>s bodo samodejno oblikovani tako, da se bodo ujemali s svetlejšo barvo, ki bo pomagala prikazati stanje vnosa.

Onemogočeno potrditveno polje

Potrditveno polje onemogočeno

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

Radijski sprejemniki

Privzeti radio

Privzeto označen 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>

Onemogočeno

Dodajte disabledatribut in povezani <label>s bodo samodejno oblikovani tako, da se bodo ujemali s svetlejšo barvo, ki bo pomagala prikazati stanje vnosa.

Onemogočen radio

Onemogočen preverjen radio

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

Stikala

Stikalo ima oznako potrditvenega polja po meri, vendar uporablja .form-switchrazred za upodabljanje preklopnega stikala. Razmislite o uporabi role="switch"za natančnejši prenos narave nadzora na podporne tehnologije, ki podpirajo to vlogo. V starejših podpornih tehnologijah bo preprosto najavljeno kot običajno potrditveno polje kot nadomestna možnost. Stikala podpirajo tudi disabledatribut.

Vnos potrditvenega polja privzetega stikala

Preverjen vnos potrditvenega polja stikala

Onemogočen vnos potrditvenega polja stikala

Onemogočen vnos potrditvenega polja označenega stikala

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

Privzeto (naloženo)

Privzeto bo poljubno število potrditvenih polj in radijskih postaj, ki so neposredno sorodne, navpično zložene in ustrezno razporejene z .form-check.

Privzeto potrditveno polje

Onemogočeno potrditveno polje

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

Privzeti radio

Drugi privzeti radio

Onemogočen radio

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

V vrsti

Združite potrditvena polja ali radie v isto vodoravno vrstico tako, da jih dodate .form-check-inlinekateremu koli .form-check.

3 (onemogočeno)

<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 (onemogočeno)

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

Brez nalepk

Izpustite oblivanje .form-checkza potrditvena polja in radijske postaje, ki nimajo besedila oznake. Ne pozabite zagotoviti neke oblike dostopnega imena za podporne tehnologije (na primer uporaba aria-label). Za podrobnosti glejte razdelek o dostopnosti pregleda obrazcev .

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

Preklopni gumbi

Ustvarite gumbom podobna potrditvena polja in izbirne gumbe z uporabo .btnslogov in ne .form-check-labelna <label>elementih. Te preklopne gumbe lahko po potrebi dodatno združite v skupino gumbov .

Gumbi za preklop potrditvenega polja

Enotni preklop

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

Preverjeno

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

Onemogočeno

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

Vizualno so ti preklopni gumbi potrditvenih polj enaki preklopnim gumbom vtičnika gumbov . Vendar jih podporne tehnologije posredujejo drugače: preklopi potrditvenih polj bodo bralniki zaslona naznanili kot »odkljukano«/»neoznačeno« (ker so kljub videzu v bistvu še vedno potrditvena polja), medtem ko bodo preklopni gumbi za vtičnike gumbov najavljen kot "gumb"/"pritisnjen gumb". Izbira med tema dvema pristopoma bo odvisna od vrste preklopa, ki ga ustvarjate, in od tega, ali bo preklop uporabnikom smiseln, ko bo najavljen kot potrditveno polje ali kot dejanski gumb.

Radio preklopni gumbi

Preverjeno Radio Onemogočeno 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>

Opisani slogi

Podprte so različne različice .btn, na primer različni orisani slogi.

Enotni preklop
Preverjeno
Preverjeno uspešen radio Radio nevarnosti

<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

Spremenljivke

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