Foundation-Knopf
Button Style
Stiftung bietet sechs Knopfarten. .button Klasse erstellt eine blaue Taste zusammen mit Polsterung. Verschiedene Farben für die Schaltfläche Klasse: .secondary , .success , .info , .warning oder .alert :
Beispiele
<Taste type = "button" class = "button"> Standard </ button>
<Taste type = "button" class = "Taste sekundäre"> Sekundär </ button>
<Taste type = "button" class = "button Erfolg"> Erfolg </ button>
<Taste type = "button" class = "button info"> Info </ button>
<Taste type = "button" class = "Taste Warnung"> Warnung </ button>
<Taste type = "button" class = "Taste Alarm"> Alarm </ button>
<Taste type = "button" class = "Taste sekundäre"> Sekundär </ button>
<Taste type = "button" class = "button Erfolg"> Erfolg </ button>
<Taste type = "button" class = "button info"> Info </ button>
<Taste type = "button" class = "Taste Warnung"> Warnung </ button>
<Taste type = "button" class = "Taste Alarm"> Alarm </ button>
Versuchen »
Button - Klasse kann verwendet werden in <a> , <button> oder <input> Element:
Beispiele
<A Href = "#" class = "button info" role = "button"> Link - Taste </ a>
<Taste type = "button" class = "button info"> Button </ button>
<Input type = "button" class = "button info" value = "Input Button">
<Input type = "submit" class = "button info" value = "Submit Button">
<Taste type = "button" class = "button info"> Button </ button>
<Input type = "button" class = "button info" value = "Input Button">
<Input type = "submit" class = "button info" value = "Submit Button">
Versuchen »
 | Warum sollte ein href - Tag #? Wenn wir nicht wollen, auf den Link zu springen und klicken Sie auf "404" Seite zu bekommen, können wir ein href-Tag # gesetzt. |
|---|
Button-Größe
Wir können verwenden .large , .small oder .tiny Klasse , um die Größe der Schaltfläche zu setzen:
Beispiele
<Taste type = "button" class = "button large"> Große </ button>
<Taste type = "button" class = "button"> Standard </ button>
<Taste type = "button" class = "button small"> Kleine </ button>
<Taste type = "button" class = "button tiny"> Tiny </ button>
<Taste type = "button" class = "button"> Standard </ button>
<Taste type = "button" class = "button small"> Kleine </ button>
<Taste type = "button" class = "button tiny"> Tiny </ button>
Versuchen »
Abgerundete Taste
Sie können mit .radius und .round Klasse , um die runde Taste einzustellen:
Beispiele
<Taste type = "button" class = "button"> Standardschaltfläche </ button>
<Taste type = "button" class = "button Radius"> Radius - Taste </ button>
<Taste type = "button" class = "button Runde"> Runder Knopf </ button>
<Taste type = "button" class = "button Radius"> Radius - Taste </ button>
<Taste type = "button" class = "button Runde"> Runder Knopf </ button>
Versuchen »
Button-Erweiterung
Sie können mit .expand Klasse die Taste , um 100% Breitband zu setzen:
Beispiele
<Taste type = "button" class = "button"> Standardschaltfläche </ button>
<Taste type = "button" class = "button erweitern"> Expanded - Taste </ button>
<Taste type = "button" class = "button erweitern"> Expanded - Taste </ button>
Versuchen »
Schaltfläche Deaktivieren
Sie können mit .disabled Klasse die Schaltfläche Einstellungen klicken nicht verfügbar ist :
Beispiele
<Taste type = "button" class = "button"> Standardschaltfläche </ button>
<Taste type = "button" class = "Taste deaktiviert"> Deaktiviert Taste </ button>
<Taste type = "button" class = "Taste deaktiviert"> Deaktiviert Taste </ button>
Versuchen »