in English

Kontroly a vysílačky

Vytvářejte konzistentní zaškrtávací políčka a rádia napříč prohlížeči a zařízeními pomocí naší zcela přepsané komponenty kontroly.

Na této straně

Přístup

Výchozí zaškrtávací políčka a přepínače prohlížeče jsou nahrazeny pomocí .form-check, série tříd pro oba typy vstupů, které zlepšují rozvržení a chování jejich prvků HTML a poskytují větší přizpůsobení a konzistenci napříč prohlížeči. Zaškrtávací políčka jsou pro výběr jedné nebo několika možností v seznamu, zatímco rádia jsou pro výběr jedné možnosti z mnoha.

Strukturálně jsou naše <input>s a <label>s sourozenecké prvky na rozdíl od prvků <input>uvnitř <label>. Toto je o něco podrobnější, protože musíte zadat ida foratributy, aby se vztahovaly <input>a <label>. Volič sourozenců ( ) používáme ~pro všechny naše <input>stavy, jako je :checkednebo :disabled. Při kombinaci s .form-check-labeltřídou můžeme snadno stylizovat text pro každou položku na základě stavu <input>'s.

Naše kontroly používají vlastní ikony Bootstrap k označení zaškrtnutých nebo neurčitých stavů.

Kontroly

Výchozí zaškrtávací políčko

Zaškrtnuté 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ávací políčka mohou využívat :indeterminatepseudotřídu, když je ručně nastavena pomocí JavaScriptu (není k dispozici žádný atribut HTML pro její specifikaci).

Neurčité zaškrtávací 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ázáno

Přidejte disabledatribut a přidružená <label>s se automaticky upraví tak, aby odpovídala světlejší barvě, která pomáhá indikovat stav vstupu.

Neurčité zaškrtávací políčko zakázáno

Zaškrtávací políčko zakázáno

Vypnuto zaškrtnuté políčko

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

Výchozí rádio

Výchozí zaškrtnuté 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ázáno

Přidejte disabledatribut a přidružená <label>s se automaticky upraví tak, aby odpovídala světlejší barvě, která pomáhá indikovat 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>

Přepínače

Přepínač má označení vlastního zaškrtávacího políčka, ale používá .form-switchtřídu k vykreslení přepínače. Zvažte použití role="switch"k přesnějšímu předání povahy ovládání asistenčním technologiím, které tuto roli podporují. Ve starších asistenčních technologiích to bude jednoduše oznámeno jako běžné zaškrtávací políčko jako záložní. Přepínače také podporují disabledatribut.

Výchozí zaškrtávací políčko přepínače

Zaškrtnutý vstup zaškrtávacího políčka přepínače

Deaktivovaný vstup zaškrtávacího políčka přepínače

Vypnuto zaškrtávací políčko zaškrtnutého přepínače

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>

Výchozí (skládaný)

Ve výchozím nastavení bude libovolný počet zaškrtávacích políček a rádií, které jsou bezprostředními sourozenci, vertikálně naskládán a vhodně rozmístěn pomocí .form-check.

Výchozí zaškrtávací políčko

Zaškrtávací políčko zakázáno

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>

Výchozí rádio

Druhé výchozí 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 souladu

Seskupte zaškrtávací políčka nebo rádia na stejném vodorovném řádku přidáním .form-check-inlinek libovolnému .form-check.

3 (vypnuto)

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 (vypnuto)

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>

Zvrátit

Umístěte zaškrtávací políčka, rádia a přepínače na opačnou stranu s .form-check-reversetřídou modifikátoru.

Zaškrtávací políčko Reverse

Vypnuto zaškrtávací políčko zpětného chodu

Vstup zaškrtávacího políčka zpětného spínače

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ítků

.form-checkU zaškrtávacích políček a rádií, které nemají žádný text štítku, vynechejte zalamování . Nezapomeňte stále poskytnout nějakou formu přístupného názvu pro asistenční technologie (například pomocí aria-label). Podrobnosti naleznete v části přístupnosti přehledu formulářů .

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>

Přepínací tlačítka

Vytvářejte zaškrtávací políčka a přepínače podobná tlačítkům pomocí .btnstylů, nikoli .form-check-labelna <label>prvcích. Tato přepínací tlačítka lze v případě potřeby dále seskupit do skupiny tlačítek .

Přepínací tlačítka zaškrtávacích políček

Jediný přepínač

html

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

Kontrolovány

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ázáno

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álně jsou tato přepínací tlačítka zaškrtávacích polí identická s přepínacími tlačítky pluginu tlačítek . Pomocné technologie je však zprostředkovávají odlišně: přepínače zaškrtávacích políček budou čtečkami obrazovky ohlášeny jako „zaškrtnuté“/„nezaškrtnuté“ (protože i přes svůj vzhled jsou v zásadě stále zaškrtávacími políčky), zatímco přepínací tlačítka pluginů tlačítek budou oznámeno jako „tlačítko“/„stisknuté tlačítko“. Volba mezi těmito dvěma přístupy bude záviset na typu přepínače, který vytváříte, a na tom, zda bude přepínač dávat uživatelům smysl, když je oznámen jako zaškrtávací políčko nebo jako skutečné tlačítko.

Přepínací tlačítka rádia

Kontrolovány Rádio Zakázáno 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>

Nastíněné styly

Jsou podporovány různé varianty .btn, například různé nastíněné styly.

Jediný přepínač
Kontrolovány
Rádio zkontrolováno 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

Proměnné

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