Knopfstile in Bootstrap 5 | Erklärt

Das Einfügen von einfachen Schaltflächen in Ihre Webseiten kann langweilig sein. Wenn Sie ihnen einen bestimmten Stil geben. Wenn Sie Ihre Website mit Bootstrap 5 entwickeln, ist Styling -Schaltflächen keine große Sache. In dieser Bootstrap -Version sind verschiedene Klassen verfügbar. Um verschiedene Möglichkeiten zum Styling von Schaltflächen in Bootstrap 5 zu lernen 5 Lesen Sie den Artikel bis zum Ende.

Hinzufügen von Farben zu Schaltflächen

Sie können Schaltflächen, die nicht nur Schönheit zu ihnen verleihen, sondern auch den Zweck hinter dem Taste verleihen können. Zu diesem Zeitpunkt können Sie einen dieser gegebenen Klassen verwenden, die es sind, .Btn, .Btn-Primary, .BTN-SUCCESS, .Btn-info, .BTN-Sekundär, .btn-warning, .Btn-danger, .Btn-dark, .BTN-Light.

So fügen Sie der Taste mit Bootstrap 5 Farben hinzu

Im folgenden Beispiel werden wir einige der oben genannten Klassen demonstrieren.

Html

Taste
Taste
Taste

Der obige Code generiert drei Schaltflächen, zunächst mit einem grundlegenden Styling, zweiter. Beachten Sie, dass wir die benutzt haben .BTN -Klasse beim Stylen jeder Knopf.

Ausgang

Sie können andere Klassen ausprobieren, um zu sehen, wie sie die Schaltflächen stylen.

Schaltflächen als Links

Sie können auch andere Webseiten oder Quellen mit Schaltflächen in Bootstrap 5 verknüpfen.

So leiten Sie einen Benutzer mit der Taste zu einer anderen Quelle um

Angenommen, Sie möchten Ihre Benutzer mit einer Taste zu einer anderen Quelle umleiten.

Html

Verknüpfung

Hier können Sie einfach den Link der anderen Quelle zum HREF -Attribut des Anker -Tags bereitstellen. Darüber hinaus hat die Schaltfläche im obigen Code -Snippet eine hellblaue Farbe und einen grundlegenden Stil.

Ausgang

So können Sie Schaltflächen als Links erstellen.

Eingabetaste

Abgesehen von den Anker-Tags können Sie auch die oben genannten Tastenklassen für Eingänge verwenden. Wie Sie wissen, kann das Tag einige Typen wie Senden oder Zurücksetzen rendern. Daher können Sie das Styling auf eine dieser Eingabetypen anwenden.

So wenden Sie Schaltflächenklassen auf Eingänge an

So können Sie Schaltflächenklassen auf Eingänge anwenden.

Das obige erzeugt drei Arten von Eingangsschaltflächen, wobei jede Taste eine andere Hintergrundfarbe aufweist.

Ausgang

Auf diese Weise können Sie Klassen anwenden, die Schaltflächen auf verschiedenen Eingangstypen zugeordnet sind.

Knopfgröße

In einigen Szenarien möchten wir vergrößerte Tasten vornehmen, in anderen Fällen wollen wir das Gegenteil. Verwenden der Klassen, die mit den Größen von Schaltflächen verknüpft sind, können wir diese Aufgabe erfüllen.

So ändern Sie die Schaltflächengrößen in Bootstrap 5

Betrachten Sie das Beispiel unten, um zu verstehen.

Html

Klein
Mittel
Groß

Im obigen Code generieren wir drei Tasten kleiner, mittlerer und großer Größen. Alle Tasten haben auch einen bestimmten Stil erhalten.

Ausgang

Dies sind Tasten unterschiedlicher Größen.

Umrissen Tasten

Sie können Ihre Schaltflächen auch mit dem skizzieren .BTN-OUTLINE Klasse in Kombination mit Farbkursen, um Ihre Schaltflächen zu stylen.

So verleihen Sie Schaltflächen in Bootstrap 5 Gliederung

Nehmen wir an, Sie möchten Ihre Schaltfläche mit Bootstrap 5 skizzieren und dann dem Code -Snippet unten folgen.

Einreichen

Das obige erzeugt eine Taste mit einem grünen Umriss. Wenn Sie die Maus über den Knopf bringen.

Ausgang

Die Taste wurde zusammen mit einem Schweberffekt einen Umriss erhalten.

Aktive und behinderte Tasten

Um Ihrer Schaltfläche Schönheit hinzuzufügen, können Sie entweder Zustände hinzufügen, z.

So lassen Sie einen Knopf in Bootstrap 5 diagriert

Generieren wir zwei Tasten, einer mit einem aktiven Zustand und dem anderen mit einem behinderten Zustand.

Html

Aktiv
Behinderte

Im obigen Code hat die erste Schaltfläche ein grundlegendes Styling zusammen mit einem hellblauen Hintergrund und einem aktiven Zustand. Der zweite wurde deaktiviert und hat den gleichen Stil wie der erste. Darüber hinaus haben beide Schaltflächen eine weiße Textfarbe.

Ausgang

Dies sind Schaltflächen mit den aktiven und behinderten Zuständen.

Block-Ebene-Knöpfe

Zum Erstellen von Schaltflächen, die den gesamten horizontalen Platz einnehmen, müssen Sie die zuweisen .D-Grid Klasse zum DIV, das das Tastenelement enthält, zuweisen Sie inzwischen das .Btn-Block Klasse zum Schaltflächenelement.

So erstellen Sie mit Bootstrap 5 eine Block-Ebene-Taste 5

Erstellen wir eine Block-Ebene-Taste.

Html

Block-Ebene-Schaltfläche

Hier erzeugen wir eine Schaltfläche voller Breite mit der .D-Grid-Klasse auf dem übergeordneten Element, das es über die gesamte Breite des übergeordneten Elements erstreckt.

Ausgang

Die obige Ausgabe zeigt eine Block-Ebene-Taste.

Abschluss

Schaltflächen können auf verschiedene Weise unter Verwendung der verschiedenen Bootstrap 5 -Klassen gestylt werden, die mit Tasten zugeordnet sind. Zum Beispiel können Sie Schaltflächen mit Klassen wie z. B. Farben hinzufügen .Btn-Primary, .BTN-SUCCESS, .Btn-info usw. Darüber hinaus können Sie andere Klassen verwenden, um Schaltflächen als Links zu erstellen, ihnen eine bestimmte Größe, einen Umriss zu geben oder sie blockieren zu lassen. In diesem Blog werden verschiedene Stile besprochen, die Sie mit Bootstrap 5 Schaltflächen zur Verfügung stellen können.