Source

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

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>

Erstellen Sie Schaltflächen auf Blockebene – solche, die sich über die gesamte Breite eines übergeordneten Elements erstrecken – durch Hinzufügen von .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Aktiver Zustand

Schaltflächen erscheinen gedrückt (mit einem dunkleren Hintergrund, einem dunkleren Rahmen und einem Schatten), wenn sie aktiv sind. Es ist nicht erforderlich, s eine Klasse hinzuzufügen, <button>da sie eine Pseudo-Klasse verwenden . Sie können jedoch immer noch dieselbe aktive Darstellung mit erzwingen .active(und das aria-pressed="true"Attribut einbeziehen), falls Sie den Zustand programmgesteuert replizieren müssen.

Primärer Link Verknüpfung

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Deaktivierter Zustand

Lassen Sie Schaltflächen inaktiv aussehen, indem Sie das disabledboolesche Attribut zu einem beliebigen <button>Element hinzufügen.

<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. In Browsern, die diese Eigenschaft unterstützen, sehen Sie den deaktivierten Cursor überhaupt nicht.
Deaktivierte Schaltflächen sollten das aria-disabled="true"Attribut enthalten, um Hilfstechnologien den Status des Elements anzuzeigen.

Primärer Link Verknüpfung

<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 sicherheitshalber ein tabindex="-1"Attribut zu diesen Links hinzu (um zu verhindern, dass sie den Tastaturfokus erhalten) und verwenden Sie benutzerdefiniertes JavaScript, um ihre Funktionalität zu deaktivieren.

Schaltflächen-Plugin

Machen Sie mehr mit Tasten. Steuern Sie Schaltflächenzustände oder erstellen Sie Gruppen von Schaltflächen für weitere Komponenten wie Symbolleisten.

Zustände umschalten

Hinzufügen data-toggle="button", um den Zustand einer Schaltfläche umzuschalten active. Wenn Sie eine Schaltfläche vorab umschalten, müssen Sie die .activeKlasse und aria-pressed="true" die <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Kontrollkästchen und Optionsfelder

Die Stile von Bootstrap .buttonkönnen auf andere Elemente wie <label>s angewendet werden, um das Umschalten von Kontrollkästchen oder Optionsfeldern zu ermöglichen. Fügen Sie data-toggle="buttons"eine .btn-grouphinzu, die diese modifizierten Schaltflächen enthält, um ihr Umschaltverhalten über JavaScript zu aktivieren, und fügen Sie hinzu .btn-group-toggle, um die <input>s in Ihren Schaltflächen zu gestalten. Beachten Sie, dass Sie einzelne eingangsgespeiste Schaltflächen oder Gruppen davon erstellen können.

Der aktivierte Zustand für diese Schaltflächen wird nur über ein Ereignis auf der Schaltfläche aktualisiert . clickWenn Sie eine andere Methode verwenden, um die Eingabe zu aktualisieren – z. B. mit <input type="reset">oder durch manuelles Anwenden der Eigenschaft der Eingabe – müssen Sie manuell checkedumschalten ..active<label>

Beachten Sie, dass vorab aktivierte Schaltflächen erfordern, dass Sie die .activeKlasse manuell zur Eingabe hinzufügen <label>.

Geprüft

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

Aktiv Radio Radio

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Methoden

Methode	Beschreibung
`$().button('toggle')`	Schaltet den Push-Status um. Verleiht der Schaltfläche den Eindruck, dass sie aktiviert wurde.
`$().button('dispose')`	Zerstört die Schaltfläche eines Elements.