Tlačítka

Použijte vlastní styly tlačítek Bootstrapu pro akce ve formulářích, dialogových oknech a dalších s podporou více velikostí, stavů a dalších.

Na této straně

Příklady

Bootstrap obsahuje několik předdefinovaných stylů tlačítek, z nichž každý slouží svému vlastnímu sémantickému účelu, s několika doplňky pro větší kontrolu.

html

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Předávání významu asistenčním technologiím

Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .visually-hiddentřídě.

Zakázat zalamování textu

Pokud nechcete, aby se text tlačítka zalomil, můžete .text-nowrapk tlačítku přidat třídu. V Sass můžete nastavit $btn-white-space: nowrapzakázání zalamování textu pro každé tlačítko.

Značky tlačítek

Třídy .btnjsou navrženy pro použití s <button>prvkem. Tyto třídy však můžete také použít na elementech <a>nebo <input>(ačkoli některé prohlížeče mohou použít mírně odlišné vykreslování).

Při použití tříd tlačítek na <a>prvcích, které se používají ke spouštění funkcí na stránce (jako je sbalení obsahu), spíše než odkazování na nové stránky nebo sekce v rámci aktuální stránky by tyto odkazy měly být uvedeny, role="button"aby vhodně sdělily svůj účel pomocným technologiím, jako je např. čtečky obrazovky.

Odkaz

html

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Tlačítka obrysu

Potřebujete tlačítko, ale ne ty mohutné barvy pozadí, které přinášejí? Nahraďte výchozí třídy modifikátorů .btn-outline-*těmi, které odstraní všechny obrázky a barvy pozadí na libovolném tlačítku.

html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Některé styly tlačítek používají relativně světlou barvu popředí a měly by být použity pouze na tmavém pozadí, aby byl zajištěn dostatečný kontrast.

Velikosti

Máte rádi větší nebo menší tlačítka? Přidejte .btn-lgnebo .btn-smpro další velikosti.

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Pomocí proměnných CSS můžete dokonce vytvořit vlastní velikost:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Deaktivovaný stav

Přidáním disabledatributu boolean do libovolného <button>prvku změníte vzhled tlačítek jako neaktivní. Byla použita deaktivovaná tlačítka pointer-events: none, která brání spuštění kurzoru a aktivních stavů.

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

Deaktivovaná tlačítka pomocí <a>prvku se chovají trochu jinak:

<a>s nepodporují disabledatribut, takže musíte přidat .disabledtřídu, aby se vizuálně jevila jako zakázaná.
Jsou zahrnuty některé budoucí styly, které deaktivují všechna pointer-eventstlačítka ukotvení.
Použití deaktivovaných tlačítek <a>by mělo obsahovat aria-disabled="true"atribut označující stav prvku asistenčním technologiím.
Použití deaktivovaných tlačítek <a> by nemělo obsahovat hrefatribut.

Primární odkaz Odkaz

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Upozornění na funkčnost odkazu

K pokrytí případů, kdy musíte zachovat hrefatribut na zakázaném odkazu, se .disabledtřída pointer-events: nonepokusí zakázat funkci odkazu <a>s. Všimněte si, že tato vlastnost CSS ještě není standardizována pro HTML, ale všechny moderní prohlížeče ji podporují. Navíc i v prohlížečích, které podporují pointer-events: none, zůstává navigace pomocí klávesnice nedotčena, což znamená, že vidící uživatelé klávesnice a uživatelé asistenčních technologií budou moci tyto odkazy stále aktivovat. Abychom byli v bezpečí, aria-disabled="true"zahrňte do těchto odkazů kromě atributu také tabindex="-1"atribut, který jim zabrání v tom, aby se zaměřily na klávesnici, a použijte vlastní JavaScript k úplnému zakázání jejich funkčnosti.

Primární odkaz Odkaz

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Blokovat tlačítka

Vytvořte responzivní hromádky „blokovacích tlačítek“ s plnou šířkou, jako jsou tlačítka v Bootstrap 4, pomocí kombinace našich nástrojů pro zobrazení a mezery. Použitím utilit místo tříd specifických pro tlačítka máme mnohem větší kontrolu nad mezerami, zarovnáním a chováním reakce.

html

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Zde vytvoříme responzivní variaci, počínaje vertikálně naskládanými tlačítky až po mdbod přerušení, kde .d-md-blocknahradí .d-gridtřídu, čímž zrušíme gap-2utilitu. Změňte velikost prohlížeče, abyste viděli, jak se mění.

html

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Šířku tlačítek bloku můžete upravit pomocí tříd šířky sloupců mřížky. Například pro „blokovací tlačítko“ poloviční šířky použijte .col-6. Vycentrujte jej také vodorovně pomocí .mx-auto.

html

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

K úpravě zarovnání tlačítek v horizontální poloze lze použít další nástroje. Zde jsme vzali náš předchozí příklad s odezvou a přidali některé flexibilní nástroje a nástroj pro okraje na tlačítko, aby se tlačítka zarovnala doprava, když již nejsou naskládána.

html

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Plugin tlačítka

Plugin pro tlačítka umožňuje vytvářet jednoduchá tlačítka pro zapnutí/vypnutí.

Vizuálně jsou tato přepínací tlačítka totožná s přepínacími tlačítky zaškrtávacích políček . Pomocné technologie je však zprostředkovávají odlišně: přepínače zaškrtávacích polí budou čtečkami obrazovky ohlášeny jako „zaškrtnuté“/„nezaškrtnuté“ (protože navzdory svému vzhledu jsou to v zásadě stále zaškrtávací políčka), zatímco tato přepínací tlačítka budou oznámena jako "tlačítko"/"tlačítko stisknuto". 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ínat stavy

Přidat data-bs-toggle="button", chcete-li přepnout activestav tlačítka. Pokud předem přepínáte tlačítko, musíte .activetřídu přidat ručně a aria-pressed="true" zajistit, aby byla správně přenesena do asistenčních technologií.

html

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

Přepnout odkaz Aktivní přepínací odkaz Deaktivován přepínací odkaz

html

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Metody

Instanci tlačítka můžete vytvořit pomocí konstruktoru tlačítka, například:

const bsButton = new bootstrap.Button('#myButton')

Metoda	Popis
`dispose`	Zničí tlačítko prvku. (Odstraní uložená data v prvku DOM)
`getInstance`	Statická metoda, která vám umožní získat instanci tlačítka přidruženou k prvku DOM, můžete ji použít takto: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Statická metoda, která vrátí instanci tlačítka přidruženou k prvku DOM nebo vytvoří novou v případě, že nebyla inicializována. Můžete jej použít takto: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Přepíná stav push. Dává tlačítku dojem, že bylo aktivováno.

Například pro přepínání všech tlačítek

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Proměnné

Přidáno ve verzi 5.2.0

V rámci vyvíjejícího se přístupu Bootstrap proměnných CSS nyní tlačítka používají místní proměnné CSS .btnpro vylepšené přizpůsobení v reálném čase. Hodnoty pro proměnné CSS se nastavují prostřednictvím Sass, takže přizpůsobení Sass je stále podporováno.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Každá .btn-*třída modifikátoru aktualizuje příslušné proměnné CSS, aby se minimalizovala další pravidla CSS pomocí našich button-variant(), button-outline-variant(), a button-size()mixinů.

Zde je příklad vytvoření vlastní .btn-*třídy modifikátorů, jako to děláme pro tlačítka jedinečná pro naše dokumenty, přeřazením proměnných CSS Bootstrapu se směsí našich vlastních proměnných CSS a Sass.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Sass proměnné

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Sass mixiny

K dispozici jsou tři mixy pro tlačítka: tlačítko a tlačítko obrysové varianty mixinů (oba založené na $theme-colors), plus mix velikosti tlačítka.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sass smyčky

Varianty tlačítek (pro běžná a obrysová tlačítka) používají své příslušné mixy s naší $theme-colorsmapou ke generování tříd modifikátorů v scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}