Bootstrap -Tasten | Erklärt

Bootstrap ist ein CSS -Framework, das die Entwicklung reaktionsschneller Webanwendungen unterstützt. Es hat vordefinierte Klassen für einfache Layoutentscheidungen wie die “Karte"Klasse wird verwendet, um Karten zu erstellen, die"Tisch”Klasse, die grundlegende Stile für das Tischelement und viele mehr zur Verfügung stellen. Genauer gesagt das “BtnDie Klasse ist eine von ihnen, die zum Erstellen von Schaltflächen verwendet wird.

Dieser Artikel wird Sie anweisen:

• So machen Sie Tasten in Bootstrap?
• So erstellen Sie Umrissschaltflächen in Bootstrap?
• So stellen Sie die Größen der Bootstrap -Taste ein?
• So erstellen Sie eine Block-Ebene-Taste in Bootstrap?
• So erstellen Sie aktive Status -Tasten in Bootstrap?
• So erstellen Sie Schaltflächen für deaktivierte Status in Bootstrap?

So machen Sie Tasten in Bootstrap?

Die Bootstrap "BtnDie Klasse wird verwendet, um Schaltflächen zu erstellen. Um gestaltete Schaltflächen hinzuzufügen, können Sie das verwendenBtn"Klasse mit der Farbklasse, wie z."BTN-SUCCESS”Um eine grüne Taste zu erstellen.

In HTML die “","", Und ""Tags mit dem Typ"Taste”Werden verwendet, um Schaltflächen zu erstellen. Der "BtnDie Klasse hat vordefiniert.

Für ein klares Konzept finden Sie das folgende Beispiel.

Beispiel

Befolgen Sie in der HTML -Datei die Schritte zum Erstellen von Schaltflächen mit verschiedenen Tags:

• Hinzufügen "" Und ""Elemente und zuweisen Sie sie"Btn" Und "Btn-Primary" Klassen.
• Dann fügen Sie eine hinzu “"Tag mit dem Typ"Taste”. Zuweisen Sie es die “Btn" Und "BTN-SUCCESS”Für das Styling als erste zwei Knöpfe als blau und die dritte als grün:

Einreichen
Offen

Ausgang

So erstellen Sie Umrissschaltflächen in Bootstrap?

Um die Schaltfläche umzusetzen, die Bootstrap “Btn-outline-*”Klasse wird verwendet. In seiner Syntax, “*Hier repräsentiert die Umrissfarbe. Zum Beispiel, "BTN-OUTLINE-DANGER"Legt den roten Umriss"BTN-OUTLINE-Primary”Setzt den blauen Umriss und mehr.

Analysieren Sie den unten angegebenen Code:

Nächste
Stornieren
Erfolg

Es kann beobachtet werden, dass das “Nächste"Button hat einen blauen Umriss, der"StornierenTaste mit roten Umriss und der “ErfolgDie Schaltfläche wurde mit einem grünen Umriss gestaltet:

So stellen Sie die Größen der Bootstrap -Taste ein?

Einige Bootstrap -Klassen werden angewendet, um die Knopfgrößen anzupassen, z. B.:

• “Btn-lgDie Klasse wird angewendet, um eine große Taste zu erstellen. Diese Klasse kann die Schriftgröße und die Polsterung erhöhen.
• “BTN-MD”Erstellt eine mittelgroße Taste.
• “Btn-sm”Erstellt einen kleinen Knopf.

Beispiel

Jetzt erstellen wir drei Schaltflächen mit unterschiedlichen Größen und selbsterklärenden Namen:

Groß
Mittel
Klein

Ausgang

So erstellen Sie eine Block-Ebene-Taste in Bootstrap?

Die Tasten auf Blockebene sind diejenigen, die die Größe der Vollbreite halten. So erstellen Sie die Block-Ebenen-Tasten, die “Btn-BlockDie Klasse wird wie folgt verwendet

Taste
Taste

Ausgang

So erstellen Sie aktive Status -Tasten in Bootstrap?

Die Tasten der aktiven Status beziehen sich auf die derzeit aktiven Tasten. Diese Tasten sind etwas dunkler als normal. Um solche Tasten zu erstellen, die Bootstrap “aktiv”Klasse wird genutzt.

Beispiel

Der folgende Code erstellt zwei Schaltflächen. Der erste befindet sich im normalen Zustand, während der andere mit dem angewendet wird “aktiv" Klasse:

Erfolg
Erfolg

Ausgang

So erstellen Sie Schaltflächen für deaktivierte Status in Bootstrap?

Die Schaltflächen für behinderte Status beziehen sich auf die Tasten, die nicht unbrauchbar und unbrauchbar sind. In Bootstrap, die “BehinderteDie Klasse wird verwendet, um eine Schaltfläche für deaktivierte Status zu erstellen. Der "BehinderteDas Attribut kann auch für diesen Zweck verwendet werden.

Beispiel

Schauen Sie sich das unten angegebene Beispiel an:

• Die erste Taste befindet sich nicht in einem behinderten Zustand.
• Der zweite nutzt das “BehinderteKlasse zum Erstellen einer Schaltfläche für behinderte Status.
• Der dritte verwendet die “Behinderte”Attribut:

Stornieren
Erfolg
Erfolg

Ausgang

Wir haben verschiedene Aspekte im Zusammenhang mit Bootstrap -Schaltflächen und ihres Stylings in CSS abgedeckt.

Abschluss

Der "BtnDie Klasse wird verwendet, um Bootstrap -Tasten mit einem einfachen Design zu erstellen. So erstellen Sie farbige und umliegende Schaltflächen, die “btn-*" Und "Btn-outline-*"Klassen werden verwendet, wo die"*”Symbolisiert jede Farbklasse. Zum Beispiel, "btn-warning"Erstellt einen gelben Knopf"BTN-OUTLINE-WARNING”Erstellt eine gelbe skizzierte Taste und vieles mehr. Um die Schaltflächen aktiv oder deaktiviert zu machen, werden die Klassen „aktive“ und „deaktivierte“ Klassen angewendet. Dieser Beitrag lieferte eine umfassende Anleitung zu den Bootstrap -Tasten.