JS - Taste (button.js)
Verwenden Sie dieses Plugin, wenn Sie mehr Kontrolle haben über Ihre Tasten möchten.
Ein Tutorial über Buttons, lesen Sie unsere Bootstrap Buttons Tutorial .
Die Button-Plugin Klassen
Die Klassen können unten verwendet werden , um zum ursprünglichen Stil <a>, <button> oder <input> Element:
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| .btn | Fügt grundlegende Styling auf Tasten | Versuch es |
| .btn-default | Zeigt eine default / Standard-Schaltfläche | Versuch es |
| .btn-primary | Bietet zusätzliche visuelle Gewicht und identifiziert die primäre Aktion in einer Reihe von Tasten | Versuch es |
| .btn-success | Zeigt einen erfolgreichen oder positive Wirkung | Versuch es |
| .btn-info | Kontext Taste für Informations Warnmeldungen | Versuch es |
| .btn-warning | Zeigt an, dass Vorsicht geboten ist bei dieser Maßnahmen ergriffen werden, | Versuch es |
| .btn-danger | Weist auf eine gefährliche oder potentiell negative Handlung | Versuch es |
| .btn-link | Macht ein Button aussehen wie ein Link (wird noch Schaltfläche Verhalten) | Versuch es |
| .btn-lg | Macht eine große Taste | Versuch es |
| .btn-sm | Macht ein kleiner Knopf | Versuch es |
| .btn-xs | Macht eine extra kleine Taste | Versuch es |
| .btn-block | Macht ein Block-Level-Taste (erstreckt sich über die gesamte Breite des übergeordneten Elements) | Versuch es |
| .active | Erscheinen lässt die Taste gedrückt | Versuch es |
| .disabled | Macht die Taste deaktiviert | Versuch es |
Via JavaScript
Aktivieren Sie manuell mit:
$('.btn').button();
Schaltfläche Optionen
| None |
Button-Methoden
Die folgende Tabelle listet alle verfügbaren Schaltfläche Methoden.
Hinweis: Bei diesem Plugin Methoden können auch über Datenattribute übergeben werden; fügen Sie den Methodennamen an Daten-, wie in Daten-Kipp- oder zum Laden von Daten.
| Methode | Beschreibung | Versuch es |
|---|---|---|
| .button("toggle") | Macht die Taste gedrückt Look | Versuch es |
| .button("loading") | Deaktiviert die Taste und ändert den Knopf, um Text "loading ..." | Versuch es |
| .button("reset") | Ändert die Schaltfläche Text, um den Originaltext (falls geändert) | Versuch es |
| .button("string") | Gibt einen neuen Button-Text | Versuch es |
Beispiele
Mit CSS anpassen Buttons
Wie die abgerundeten Ränder zu entfernen:
Wie eine bestimmte Farbe hinzuzufügen:
Beispiel
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} Versuch es selber " So fügen Sie Schatten: