Zum Hauptinhalt springen Zur Dokumentennavigation springen
Check
in English

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.

Auf dieser Seite

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.

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>
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-hiddenKlasse verborgen ist.

Textumbruch deaktivieren

Wenn Sie nicht möchten, dass der Schaltflächentext umbrochen wird, können Sie die .text-nowrapKlasse 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 .btnKlassen 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).

Bei der Verwendung von Schaltflächenklassen für <a>Elemente, die zum Auslösen von In-Page-Funktionen (wie role="button"z Screenreader.

Verknüpfung
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">

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.

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>
Einige der Schaltflächenstile verwenden eine relativ helle Vordergrundfarbe und sollten nur auf einem dunklen Hintergrund verwendet werden, um einen ausreichenden Kontrast zu haben.

Größen

Lust auf größere oder kleinere Buttons? Hinzufügen .btn-lgoder .btn-smfür zusätzliche Größen.

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>

Sie können sogar Ihre eigene benutzerdefinierte Größe mit CSS-Variablen erstellen:

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>

Deaktivierter Zustand

Lassen Sie Schaltflächen inaktiv aussehen, indem Sie das disabledboolesche Attribut zu einem beliebigen <button>Element hinzufügen. Deaktivierte Schaltflächen wurden pointer-events: noneangewendet, um zu verhindern, dass Hover- und aktive Zustände ausgelöst werden.

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>

Deaktivierte Schaltflächen, die das <a>Element verwenden, verhalten sich etwas anders:

  • <a>s unterstützen das disabledAttribut nicht, daher müssen Sie die .disabledKlasse hinzufügen, damit sie visuell deaktiviert erscheint.
  • Einige zukunftsfreundliche Stile sind enthalten, um alle pointer-eventsAnkerschaltflächen zu deaktivieren.
  • Deaktivierte Schaltflächen <a>sollten das aria-disabled="true"Attribut enthalten, um den Status des Elements für Hilfstechnologien anzuzeigen.
  • Deaktivierte Schaltflächen mit <a> sollten das hrefAttribut nicht enthalten.
Primärer Link Verknüpfung
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>

Um Fälle abzudecken, in denen Sie das hrefAttribut auf einem deaktivierten Link beibehalten müssen, versucht die .disabledKlasse 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: nonebleibt die Tastaturnavigation auch 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 sicherheitshalber 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.

Primärer Link Verknüpfung
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>

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.

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>

Hier erstellen wir eine reaktionsschnelle Variante, beginnend mit vertikal gestapelten Schaltflächen bis zum mdHaltepunkt, wo .d-md-blockdie .d-gridKlasse ersetzt wird, wodurch der gap-2Nutzen zunichte gemacht wird. Passen Sie die Größe Ihres Browsers an, um zu sehen, wie sie sich ändern.

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>

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

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>

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.

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>

Schaltflächen-Plugin

Mit dem Schaltflächen-Plugin können Sie einfache Ein-/Aus-Schaltflächen erstellen.

Optisch sind diese Umschaltflächen mit den Umschaltflächen für Kontrollkästchen identisch . Allerdings werden sie von Hilfstechnologien anders vermittelt: Die Checkbox-Toggles werden von Screenreadern als „markiert“/„nicht markiert“ angesagt (da sie trotz ihres Aussehens im Grunde immer noch Checkboxen sind), während diese Toggle-Buttons als angesagt werden „Taste“/„Taste gedrückt“. Die Wahl zwischen diesen beiden Ansätzen hängt von der Art des Umschalters ab, den Sie erstellen, und davon, ob der Umschalter für Benutzer sinnvoll ist, wenn er als Kontrollkästchen oder als tatsächliche Schaltfläche angekündigt wird.

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 .activeKlasse manuell hinzufügen und aria-pressed="true" sicherstellen, dass sie in geeigneter Weise an Hilfstechnologien übermittelt wird.

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>
Verknüpfung umschalten Aktiver Toggle-Link Toggle-Link deaktiviert
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>

Methoden

Sie können eine Schaltflächeninstanz beispielsweise mit dem Schaltflächenkonstruktor erstellen:

const bsButton = new bootstrap.Button('#myButton')
Methode Beschreibung
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).
toggle Schaltet den Push-Status um. Verleiht der Schaltfläche den Eindruck, dass sie aktiviert wurde.

Zum Beispiel, um alle Schaltflächen umzuschalten

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

CSS

Variablen

Hinzugefügt in v5.2.0

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden Schaltflächen jetzt lokale CSS-Variablen .btnfür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

  --#{$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);

Jede .btn-*Modifikatorklasse aktualisiert die entsprechenden CSS-Variablen, um zusätzliche CSS-Regeln mit unseren Mixins button-variant(), button-outline-variant(), und zu minimieren.button-size()

Hier ist ein Beispiel für das Erstellen einer benutzerdefinierten .btn-*Modifikatorklasse, wie wir es für die Schaltflächen tun, die für unsere Dokumente einzigartig sind, indem wir die CSS-Variablen von Bootstrap mit einer Mischung aus unseren eigenen CSS- und Sass-Variablen neu zuweisen.

.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-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:              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-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)
) {
  --#{$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-Loops

Schaltflächenvarianten (für normale und Gliederungsschaltflächen) verwenden ihre jeweiligen Mixins mit unserer $theme-colorsKarte, um die Modifikatorklassen in 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);
  }
}