in English

Kontroly a vysielačky

Vytvorte konzistentné začiarkavacie políčka a rádiá naprieč prehliadačmi a zariadeniami pomocou nášho úplne prepísaného komponentu kontroly.

Na tejto stránke

Prístup

Predvolené začiarkavacie políčka a prepínače prehliadača sú nahradené pomocou .form-check, série tried pre oba typy vstupu, ktoré zlepšujú rozloženie a správanie ich prvkov HTML, poskytujú väčšie prispôsobenie a konzistenciu medzi prehliadačmi. Začiarkavacie políčka slúžia na výber jednej alebo viacerých možností v zozname, zatiaľ čo rádiá sú na výber jednej možnosti z mnohých.

Štrukturálne sú naše <input>s a <label>s súrodenecké prvky na rozdiel od prvkov v <input>rámci <label>. Toto je o niečo podrobnejšie, pretože musíte špecifikovať ida foratribúty, aby ste spojili <input>a <label>. ~Pre všetky naše <input>stavy, ako :checkedalebo , používame selektor súrodenca ( ) :disabled. V kombinácii s .form-check-labeltriedou môžeme ľahko štylizovať text pre každú položku na základe stavu <input>'.

Naše kontroly používajú vlastné ikony Bootstrap na označenie kontrolovaných alebo neurčitých stavov.

Kontroly

Predvolené začiarkavacie políčko

Začiarknuté políčko

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>

Neurčité

Zaškrtávacie políčka môžu využívať :indeterminatepseudo triedu, keď sú manuálne nastavené pomocou JavaScriptu (nie je k dispozícii žiadny atribút HTML na jej špecifikáciu).

Neurčité začiarkavacie políčko

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>

Zakázané

Pridajte disabledatribút a súvisiace <label>s sa automaticky upravia tak, aby zodpovedali svetlejšej farbe, čo pomáha indikovať stav vstupu.

Neurčité začiarkavacie políčko je zakázané

Začiarkavacie políčko vypnuté

Začiarknuté políčko Vypnuté

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>

Rádia

Predvolené rádio

Predvolené začiarknuté rádio

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>

Zakázané

Pridajte disabledatribút a súvisiace <label>s sa automaticky upravia tak, aby zodpovedali svetlejšej farbe, čo pomáha indikovať stav vstupu.

Vypnuté rádio

Vypnuté kontrolované rádio

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>

Prepínače

Prepínač má označenie vlastného začiarkavacieho políčka, ale používa .form-switchtriedu na vykreslenie prepínača. Zvážte použitie role="switch"na presnejšie sprostredkovanie povahy kontroly asistenčným technológiám, ktoré podporujú túto úlohu. V starších asistenčných technológiách to bude jednoducho oznámené ako bežné začiarkavacie políčko ako záložné. Prepínače tiež podporujú disabledatribút.

Predvolený vstup zaškrtávacieho políčka prepínača

Začiarknutý vstup začiarkavacieho políčka prepínača

Zakázaný vstup začiarkavacieho políčka prepínača

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>

Predvolené (zoskupené)

V predvolenom nastavení bude ľubovoľný počet začiarkavacích políčok a rádií, ktoré sú bezprostrednými súrodencami, vertikálne usporiadaný a primerane rozmiestnený s .form-check.

Predvolené začiarkavacie políčko

Začiarkavacie políčko vypnuté

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>

Predvolené rádio

Druhé predvolené rádio

Vypnuté rádio

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>

V rade

Zoskupte začiarkavacie políčka alebo rádiá v rovnakom vodorovnom riadku pridaním .form-check-inlinek ľubovoľnému .form-check.

3 (zakázané)

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 (zakázané)

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>

Obrátené

Umiestnite začiarkavacie políčka, rádiá a prepínače na opačnú stranu s .form-check-reversetriedou modifikátorov.

Obrátiť začiarkavacie políčko

Vypnuté začiarkavacie políčko spätného chodu

Vstup zaškrtávacieho políčka spätného spínača

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>

Bez štítkov

Vynechajte zalomenie .form-checkpre začiarkavacie políčka a rádiá, ktoré nemajú žiadny text štítku. Nezabudnite poskytnúť určitú formu prístupného názvu pre asistenčné technológie (napríklad pomocou aria-label). Podrobnosti nájdete v časti o dostupnosti prehľadu formulárov .

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>

Prepínacie tlačidlá

Vytvorte začiarkavacie políčka a prepínače podobné tlačidlám pomocou .btnštýlov namiesto .form-check-labelprvkov <label>. Tieto prepínacie tlačidlá možno v prípade potreby ďalej zoskupiť do skupiny tlačidiel .

Prepínacie tlačidlá začiarkavacieho políčka

Jediný prepínač

html

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

Skontrolované

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>

Zakázané

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>

Vizuálne sú tieto prepínacie tlačidlá začiarkavacích políčok totožné s prepínacími tlačidlami doplnku tlačidiel . Pomocné technológie ich však sprostredkúvajú odlišne: prepínače začiarkavacích políčok budú čítačkami obrazovky oznamované ako „začiarknuté“/„nezačiarknuté“ (keďže napriek ich vzhľadu sú to v zásade stále začiarkavacie políčka), zatiaľ čo tlačidlá na prepínanie doplnkov tlačidiel budú oznámené ako „tlačidlo“/„stlačené tlačidlo“. Voľba medzi týmito dvoma prístupmi bude závisieť od typu prepínača, ktorý vytvárate, a od toho, či bude mať prepínač zmysel pre používateľov, keď sa oznámi ako začiarkavacie políčko alebo ako skutočné tlačidlo.

Prepínacie tlačidlá rádia

Skontrolované Rádio Zakázané Rádio

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>

Načrtnuté štýly

Podporované sú rôzne varianty .btn, ako napríklad rôzne načrtnuté štýly.

Jediný prepínač
Skontrolované
Rádio skontrolované úspechom Nebezpečné rádio

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

Premenné

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