Tasten
Verwenden Sie die benutzerdefinierten Schaltflächenstile von Bootstrap für Aktionen in Formularen, Dialogen und mehr mit Unterstützung für mehrere Größen, Zustände und mehr.
Beispiele
Bootstrap enthält mehrere vordefinierte Schaltflächenstile, von denen jeder seinen eigenen semantischen Zweck erfüllt, mit ein paar Extras für mehr Kontrolle.
<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>
Bedeutung von Hilfstechnologien vermitteln
Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .visually-hidden
Klasse verborgen ist.
Textumbruch deaktivieren
Wenn Sie nicht möchten, dass der Schaltflächentext umbrochen wird, können Sie die .text-nowrap
Klasse der Schaltfläche hinzufügen. In Sass können Sie festlegen $btn-white-space: nowrap
, dass der Textumbruch für jede Schaltfläche deaktiviert wird.
Button-Tags
Die .btn
Klassen sind für die Verwendung mit dem <button>
Element konzipiert. Sie können diese Klassen jedoch auch für <a>
oder <input>
-Elemente verwenden (obwohl einige Browser möglicherweise eine etwas andere Darstellung anwenden).
Wenn Schaltflächenklassen für <a>
Elemente verwendet werden, die verwendet werden, um In-Page-Funktionen auszulösen (wie role="button"
z Screenreader.
<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">
Gliederungsschaltflächen
Benötigen Sie eine Schaltfläche, aber nicht die kräftigen Hintergrundfarben, die sie mitbringen? Ersetzen Sie die Standardmodifikatorklassen durch .btn-outline-*
diejenigen, um alle Hintergrundbilder und Farben auf allen Schaltflächen zu entfernen.
<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>
Größen
Lust auf größere oder kleinere Buttons? Hinzufügen .btn-lg
oder .btn-sm
für zusätzliche Größen.
<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>
Deaktivierter Zustand
Lassen Sie Schaltflächen inaktiv aussehen, indem Sie das disabled
boolesche Attribut zu einem beliebigen <button>
Element hinzufügen. Deaktivierte Schaltflächen wurden pointer-events: none
angewendet, um zu verhindern, dass Hover- und aktive Zustände ausgelöst werden.
<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>
Deaktivierte Schaltflächen, die das <a>
Element verwenden, verhalten sich etwas anders:
<a>
s unterstützen dasdisabled
Attribut nicht, daher müssen Sie die.disabled
Klasse hinzufügen, damit sie visuell deaktiviert erscheint.- Einige zukunftsfreundliche Stile sind enthalten, um alle
pointer-events
Ankerschaltflächen zu deaktivieren. - Deaktivierte Schaltflächen
<a>
sollten dasaria-disabled="true"
Attribut enthalten, um den Status des Elements für Hilfstechnologien anzuzeigen. - Deaktivierte Schaltflächen mit
<a>
sollten dashref
Attribut nicht enthalten.
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
Einschränkung der Link-Funktionalität
Um Fälle abzudecken, in denen Sie das href
Attribut auf einem deaktivierten Link beibehalten müssen, versucht die .disabled
Klasse pointer-events: none
, die Linkfunktionalität von <a>
s zu deaktivieren. Beachten Sie, dass diese CSS-Eigenschaft noch nicht für HTML standardisiert ist, aber alle modernen Browser sie unterstützen. Darüber hinaus pointer-events: none
bleibt die Tastaturnavigation selbst in Browsern, die unterstützen, unbeeinflusst, was bedeutet, dass sehende Tastaturbenutzer und Benutzer von Hilfstechnologien diese Links weiterhin aktivieren können. Fügen Sie also zur Sicherheit zusätzlich zu diesen Links aria-disabled="true"
auch ein tabindex="-1"
Attribut hinzu, um zu verhindern, dass sie den Tastaturfokus erhalten, und verwenden Sie benutzerdefiniertes JavaScript, um ihre Funktionalität vollständig zu deaktivieren.
<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>
Schaltflächen blockieren
Erstellen Sie mit einer Mischung aus unseren Anzeige- und Lückendienstprogrammen ansprechende Stapel von „Blockschaltflächen“ in voller Breite wie in Bootstrap 4. Durch die Verwendung von Dienstprogrammen anstelle von schaltflächenspezifischen Klassen haben wir eine viel größere Kontrolle über Abstände, Ausrichtung und Reaktionsverhalten.
<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>
Hier erstellen wir eine reaktionsschnelle Variante, beginnend mit vertikal gestapelten Schaltflächen bis zum md
Haltepunkt, wo .d-md-block
die .d-grid
Klasse ersetzt wird, wodurch der gap-2
Nutzen zunichte gemacht wird. Passen Sie die Größe Ihres Browsers an, um zu sehen, wie sie sich ändern.
<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>
Sie können die Breite Ihrer Blockschaltflächen mit Rasterspaltenbreitenklassen anpassen. Verwenden Sie beispielsweise für eine „Blockschaltfläche“ mit halber Breite .col-6
. Mit ebenfalls horizontal .mx-auto
zentrieren.
<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>
Zusätzliche Dienstprogramme können verwendet werden, um die horizontale Ausrichtung von Schaltflächen anzupassen. Hier haben wir unser vorheriges Responsive-Beispiel genommen und einige Flex-Dienstprogramme und ein Rand-Dienstprogramm auf der Schaltfläche hinzugefügt, um die Schaltflächen rechts auszurichten, wenn sie nicht mehr gestapelt sind.
<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>
Schaltflächen-Plugin
Mit dem Schaltflächen-Plugin können Sie einfache Ein-/Aus-Schaltflächen erstellen.
Zustände umschalten
Hinzufügen data-bs-toggle="button"
, um den Zustand einer Schaltfläche umzuschalten active
. Wenn Sie eine Schaltfläche vorab umschalten, müssen Sie die .active
Klasse manuell hinzufügen und aria-pressed="true"
sicherstellen, dass sie in geeigneter Weise an Hilfstechnologien übermittelt wird.
<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 class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
Methoden
Sie können eine Schaltflächeninstanz beispielsweise mit dem Schaltflächenkonstruktor erstellen:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Methode | Beschreibung |
---|---|
toggle |
Schaltet den Push-Status um. Verleiht der Schaltfläche den Eindruck, dass sie aktiviert wurde. |
dispose |
Zerstört die Schaltfläche eines Elements. (Entfernt gespeicherte Daten auf dem DOM-Element) |
getInstance |
Statische Methode, mit der Sie die Schaltflächeninstanz abrufen können, die einem DOM-Element zugeordnet ist. Sie können sie wie folgt verwenden:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Statische Methode, die eine Schaltflächeninstanz zurückgibt, die einem DOM-Element zugeordnet ist, oder eine neue erstellt, falls sie nicht initialisiert wurde. Sie können es wie folgt verwenden:bootstrap.Button.getOrCreateInstance(element) |
Zum Beispiel, um alle Schaltflächen umzuschalten
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Variablen
$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
Es gibt drei Mixins für Schaltflächen: Mixins für Schaltflächen- und Schaltflächenumrissvarianten (beide basierend auf $theme-colors
) sowie ein Schaltflächengrößen-Mixin.
@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);
}
Schleifen
Schaltflächenvarianten (für normale und Gliederungsschaltflächen) verwenden ihre jeweiligen Mixins mit unserer $theme-colors
Karte, um die Modifikatorklassen in 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);
}
}