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

<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

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

Začiarkavacie políčko vypnuté

Začiarknuté políčko Vypnuté

<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

<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

<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

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

<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

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

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

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

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 .

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

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

Skontrolované

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

<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

<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

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