twitter-bootstrap
Tasten
Suche…
Syntax
- Klassen: .btn-default | .btn-primary | .btn-Erfolg | .btn-info | .btn-Warnung | .btn-danger | .btn-link;
- Größen: .btn-lg | .btn-md | .btn-sm | .btn-xs;
- Zustand: aktiv | dissabled.
Button-Klassen
Bootstrap bietet mehrere Klassen zum Gestalten von Schaltflächen und zum Hervorheben.
Bootstrap-Schaltflächen können erstellt werden, indem einem Element die .btn Klasse hinzugefügt wird.
| Bootstrap-Klasse | Rolle (Farbe) |
|---|---|
.btn-default | Standardknopf (weiß) |
.btn-primary | Bietet zusätzliches visuelles Gewicht und identifiziert die primäre Aktion (blau) |
.btn-success | Wird verwendet, um eine erfolgreiche Aktion anzuzeigen (grün) |
.btn-info | Kontexttaste zur Bereitstellung von Informationen (hellblau) |
.btn-warning | Zeigt an, dass der Benutzer mit Vorsicht vorgehen sollte (gelb) |
.btn-danger | Weist auf eine gefährliche oder negative Aktion hin (rot) |
.btn-link | Lassen Sie den Button wie ein Anker-Tag aussehen. |
Tastengrößen
Sie können auch verschiedene Größen von Schaltflächen mit den .btn-size erstellen
| Bootstrap-Klasse | Ergebnis |
|---|---|
.btn-lg | Erzeugt eine größere Schaltfläche |
.btn-sm | Erzeugt eine kleinere Schaltfläche |
.btn-xs | Erzeugt eine extra kleine Schaltfläche |
.btn-block | Schaltflächen werden zu Elementen auf Blockebene und erstrecken sich über die gesamte Breite des übergeordneten Elements |
Schaltfläche aktivieren
Die active Klasse lässt eine Schaltfläche gedrückt erscheinen.
<button type="button" class="btn btn-primary active">Active Primary</button>
Deaktivieren Sie eine Schaltfläche
Wenn Sie die disabled Klasse zu einer Schaltfläche hinzufügen, ist die Schaltfläche nicht anklickbar und zeigt einen verbotenen Cursor, wenn Sie mit der Maus darüber fahren.
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Schaltflächen horizontal zusammen rendern
Mit der .btn-group Klasse können mehrere Schaltflächen horizontal gerendert werden. Wickeln Sie einfach Ihre Schaltflächen in ein Containerelement und geben Sie diesem die Klasse btn-group.
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Schaltflächen vertikal rendern
Wenden Sie die Klasse .btn-group-vertical auf das Containerelement an
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Schaltflächengruppe in voller Breite aufnehmen
In einem .btn-group Element eingeschlossene Schaltflächen .btn-group nur so viel Breite wie benötigt. Um die Gruppe über die gesamte Breite des Bildschirms zu bringen, verwenden .btn-group-justified stattdessen .btn-group-justified .
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>