Dieser Artikel wird Sie anweisen:
- Wie erstelle ich Schaltflächen in Bootstrap?
- Wie erstelle ich Gliederungsschaltflächen in Bootstrap?
- Wie passt man die Bootstrap-Button-Größe an?
- Wie erstelle ich einen Block-Level-Button in Bootstrap?
- Wie erstelle ich Schaltflächen für den aktiven Zustand in Bootstrap?
- Wie erstelle ich deaktivierte Statusschaltflächen in Bootstrap?
Wie erstelle ich Schaltflächen in Bootstrap?
Der Bootstrap“ btn ”-Klasse wird verwendet, um Schaltflächen zu erstellen. Um gestaltete Schaltflächen hinzuzufügen, können Sie das „ btn ”-Klasse mit der Farbklasse, z. B. „ btn-Erfolg “, um eine grüne Schaltfläche zu erstellen.
In HTML ist das „
Sehen Sie sich für ein klares Konzept das folgende Beispiel an.
Beispiel
Befolgen Sie in der HTML-Datei die Schritte zum Erstellen von Schaltflächen mit unterschiedlichen Tags:
- Hinzufügen '
' und ' „Elemente und weise sie zu“ btn ' und ' btn-primär ' Klassen. - Fügen Sie dann ein „
„Tag mit dem Typ“ Knopf “. Weisen Sie ihm das „ btn ' und ' btn-Erfolg “, um die ersten beiden Schaltflächen blau und die dritte grün zu gestalten:
< a Klasse = 'btn btn-primär' href = '#' > Offen < / a >
< Eingang Art = 'Knopf' Klasse = 'btn btn-Erfolg' Wert = 'Suche' >
Ausgabe
Wie erstelle ich Gliederungsschaltflächen in Bootstrap?
Um Schaltflächenumrisse hinzuzufügen, muss der Bootstrap „ btn-Umriss-* “-Klasse verwendet wird. In seiner Syntax „ * “ stellt hier die Umrissfarbe dar. Zum Beispiel, ' btn-Umriss-Gefahr ” platziert die rote Umrandung, “ btn-gliederung-primär “ setzt den blauen Umriss und mehr.
Analysieren Sie den unten angegebenen Code:
< Knopf Art = 'Knopf' Klasse = 'btn btn-umriss-primär' >Weiter< / Knopf >< Knopf Art = 'Knopf' Klasse = 'btn btn-umriss-gefahr' >Abbrechen< / Knopf >
< Knopf Art = 'Knopf' Klasse = 'btn btn-Umriss-Erfolg' >Erfolg< / Knopf >
Es lässt sich beobachten, dass „ Nächste “ Schaltfläche ist blau umrandet, die Schaltfläche „ Absagen “ Schaltfläche mit roter Umrandung und die Schaltfläche „ Erfolg ” Schaltfläche wurde mit einem grünen Umriss gestaltet:
Wie passt man die Bootstrap-Button-Größe an?
Einige Bootstrap-Klassen werden angewendet, um die Schaltflächengrößen anzupassen, wie zum Beispiel:
- „ btn-lg ”-Klasse wird angewendet, um eine große Schaltfläche zu erstellen. Diese Klasse kann die Schriftgröße und den Abstand erhöhen.
- „ btn-md “ erstellt eine mittelgroße Schaltfläche.
- „ btn-sm “ erstellt eine kleine Schaltfläche.
Beispiel
Jetzt erstellen wir drei Schaltflächen mit unterschiedlichen Größen und selbsterklärenden Namen:
< Knopf Art = 'Knopf' Klasse = 'btn btn-sekundär btn-lg' >Groß< / Knopf >< Knopf Art = 'Knopf' Klasse = 'btn btn-Warnung btn-md' >mittel< / Knopf >
< Knopf Art = 'Knopf' Klasse = 'btn btn-Gefahr btn-sm' >Klein< / Knopf >
Ausgabe
Wie erstelle ich einen Block-Level-Button in Bootstrap?
Die Schaltflächen auf Blockebene sind diejenigen, die die Größe in voller Breite enthalten. Um die Schaltflächen auf Blockebene zu erstellen, muss das „ btn-block ”-Klasse wird wie folgt verwendet
< Knopf Art = 'Knopf' Klasse = 'btn btn-warnung btn-block' >Taste< / Knopf >< Knopf Art = 'Knopf' Klasse = 'btn btn-sekundärer btn-block' >Schaltfläche< / Knopf >
Ausgabe
Wie erstelle ich Schaltflächen für den aktiven Zustand in Bootstrap?
Die aktiven Zustandsschaltflächen beziehen sich auf die derzeit aktiven Schaltflächen. Diese Tasten sind etwas dunkler als normal. Um solche Schaltflächen zu erstellen, muss der Bootstrap „ aktiv ” Klasse verwendet wird.
Beispiel
Der folgende Code erstellt zwei Schaltflächen. Der erste befindet sich im Normalzustand, während der andere mit dem „ aktiv ' Klasse:
< Knopf Art = 'Knopf' Klasse = 'btn btn-Erfolg' >Erfolg< / Knopf >< Knopf Art = 'Knopf' Klasse = 'btn btn-Erfolg aktiv' >Erfolg< / Knopf >
Ausgabe
Wie erstelle ich deaktivierte Statusschaltflächen in Bootstrap?
Die deaktivierten Zustandsschaltflächen beziehen sich auf die Schaltflächen, die nicht angeklickt und nicht verwendet werden können. Bei Bootstrap ist das „ Behinderte ”-Klasse wird verwendet, um eine deaktivierte Zustandsschaltfläche zu erstellen. Die ' Behinderte ”-Attribut kann auch für diesen Zweck verwendet werden.
Beispiel
Sehen Sie sich das folgende Beispiel an:
- Die erste Schaltfläche befindet sich nicht in einem deaktivierten Zustand.
- Der zweite nutzt das „ Behinderte ”-Klasse, um eine Schaltfläche für den deaktivierten Zustand zu erstellen.
- Der dritte verwendet das „ Behinderte ” Attribut:
< Knopf Art = 'Knopf' Klasse = 'btn btn-success deaktiviert' >Erfolg< / Knopf >
< Knopf Art = 'Knopf' Klasse = 'btn btn-Erfolg' deaktiviert>Erfolg< / Knopf >
Ausgabe
Wir haben verschiedene Aspekte im Zusammenhang mit Bootstrap-Schaltflächen und deren Gestaltung in CSS behandelt.
Fazit
Die ' btn ”-Klasse wird verwendet, um Bootstrap-Schaltflächen mit einem einfachen Design zu erstellen. Um farbige und umrissene Schaltflächen zu erstellen, muss das „ btn-* ' und ' btn-Umriss-* „Klassen werden verwendet, wenn die „ * “ symbolisiert jede Farbklasse. Zum Beispiel, ' btn-Warnung ” erstellt einen gelben Button, “ btn-Umriss-Warnung “ erstellt einen gelb umrandeten Button und vieles mehr. Um die Schaltflächen zu aktivieren oder zu deaktivieren, werden die Klassen „aktiv“ bzw. „deaktiviert“ angewendet. Dieser Beitrag enthält eine umfassende Anleitung zu den Bootstrap-Schaltflächen.