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.
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.
<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-hidden
třídě.
Zakázat zalamování textu
Pokud nechcete, aby se text tlačítka zalomil, můžete .text-nowrap
k tlačítku přidat třídu. V Sass můžete nastavit $btn-white-space: nowrap
zakázání zalamování textu pro každé tlačítko.
Značky tlačítek
Třídy .btn
jsou 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 měly být tyto odkazy uvedeny, role="button"
aby vhodně sdělily svůj účel pomocným technologiím, jako je např. čtečky obrazovky.
<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.
<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>
Velikosti
Máte rádi větší nebo menší tlačítka? Přidejte .btn-lg
nebo .btn-sm
pro další velikosti.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
Deaktivovaný stav
Přidáním disabled
atributu 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ů.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Deaktivovaná tlačítka pomocí <a>
prvku se chovají trochu jinak:
<a>
s nepodporujídisabled
atribut, takže musíte přidat.disabled
třídu, aby se vizuálně jevila jako zakázaná.- Jsou zahrnuty některé budoucí styly, které deaktivují všechna
pointer-events
tlačítka ukotvení. - Deaktivovaná tlačítka by měla obsahovat
aria-disabled="true"
atribut označující stav prvku asistenčním technologiím.
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
Upozornění na funkčnost odkazu
Třída se snaží .disabled
deaktivovat pointer-events: none
funkci odkazu <a>
s, ale tato vlastnost CSS ještě není standardizována. 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.
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 obslužných programů namísto tříd specifických pro tlačítka máme mnohem větší kontrolu nad mezerami, zarovnáním a citlivým chováním.
<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 md
bod přerušení, kde .d-md-block
nahradí .d-grid
třídu, čímž zrušíme gap-2
utilitu. Změňte velikost prohlížeče, abyste viděli, jak se mění.
<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
.
<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>
Pro úpravu 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.
<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í.
Přepínat stavy
Přidat data-bs-toggle="button"
, chcete-li přepnout active
stav tlačítka. Pokud předem přepínáte tlačítko, musíte .active
třídu přidat ručně a aria-pressed="true"
zajistit, aby byla správně přenesena do asistenčních technologií.
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
<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 href="#" class="btn btn-primary disabled" tabindex="-1" 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:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Metoda | Popis |
---|---|
toggle |
Přepíná stav push. Dává tlačítku dojem, že bylo aktivováno. |
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) |
Například pro přepínání všech tlačítek
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
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: $link-color;
$btn-link-hover-color: $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%;
Mixins
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)
) {
color: $color;
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
&:hover {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
}
.btn-check:focus + &,
&:focus {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
@if $enable-shadows {
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
color: $active-color;
background-color: $active-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
}
&:disabled,
&.disabled {
color: $disabled-color;
background-color: $disabled-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
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)
) {
color: $color;
border-color: $color;
&:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
}
.btn-check:focus + &,
&:focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.dropdown-toggle.show {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
}
&:disabled,
&.disabled {
color: $color;
background-color: transparent;
}
}
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x;
@include font-size($font-size);
// Manually declare to provide an override to the browser default
@include border-radius($border-radius, 0);
}
Smyčky
Varianty tlačítek (pro běžná a obrysová tlačítka) používají své příslušné mixy s naší $theme-colors
mapou ke generování tříd modifikátorů v scss/_buttons.scss
.
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}