Das beste Foundation-Knopf-Tutorial im Jahr 2024. In diesem Tutorial können Sie
Button Style,Button-Größe,Abgerundete Taste,Button-Erweiterung,Schaltfläche Deaktivieren, lernen
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>
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">
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>
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>
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>
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>
Versuchen »