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.

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

Wenn Schaltflächenklassen für <a>Elemente verwendet werden, die verwendet werden, um In-Page-Funktionen auszulösen (wie role="button"z Screenreader.

Verknüpfung

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

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.

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

<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 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 sollten das aria-disabled="true"Attribut enthalten, um Hilfstechnologien den Status des Elements anzuzeigen.

Primärer Link Link

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

Einschränkung der Link-Funktionalität

Die .disabledKlasse pointer-events: noneversucht früher, die Link-Funktionalität von <a>s zu deaktivieren, aber diese CSS-Eigenschaft ist noch nicht standardisiert. Darüber hinaus pointer-events: nonebleibt 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.

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

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

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

Optisch sind diese Umschaltflächen mit den Umschaltflächen für Kontrollkästchen identisch . Sie werden jedoch 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.

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

Toggle-Link Aktiver Toggle-Link Deaktivierter Toggle-Link

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

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-colorsKarte, 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);
  }
}