So gruppieren Sie Tasten in Bootstrap 5 | Erklärt

Die Schaltflächen sind ein entscheidender Bestandteil einer Website, wenn Ihr Benutzer eine bestimmte Aufgabe wie Senden, Löschen oder Abbrechen ausführen soll. Wenn Sie jedoch Schaltflächen gruppieren möchten, um eine Reihe von verknüpften Aktionen anzuzeigen, kann dies einfach mit Bootstrap 5 erfolgen. So gruppieren Sie Schaltflächen mit Bootstrap 5 zusammen mit dem Stil und Ausrichten von Schaltflächengruppen wurden in diesem Blog zusammengefasst.

So erstellen Sie Schaltflächengruppen

Zum Zweck der Gruppierung von Tasten oder zum Ausrichten gruppierter Tasten horizontal müssen Sie a zuweisen .BTN-Gruppenklasse in den Div -Behälter umwickeln die Tasten.

Html

Der Code -Snippet erzeugt vier Tasten, die zusammen gruppiert sind, wobei jede Taste eine bestimmte Polsterung, hellblauem Hintergrund und weiße Textfarbe aufweist.

Ausgang

Der .Die BTN-Gruppenklasse wird verwendet, um Schaltflächen zu gruppieren.

Wie man gruppierte Tasten vertikal ausrichtet

Wenn Sie Schaltflächen gruppieren möchten, während Sie sie in vertikaler Richtung ausrichten, liefert Bootstrap 5 die Klasse .btn-gruppenververtikal, das diese Aufgabe sofort erfüllt.

Html

Hier werden vier Tasten, die zusammengefasst sind, erzeugt. Darüber hinaus haben diese Schaltflächen eine vertikale Richtung.

Ausgang

Die Knopfgruppe wurde vertikal erfolgreich ausgerichtet.

Wie man gruppierter Tasten eine bestimmte Größe gibt

Um die Größe Ihrer Schaltflächengruppen auf und ab zu skalieren, können Sie die Bootstrap 5 -Klassen verwenden, die mit der Größengröße der Knopfgruppen zugeordnet sind, z. B .Btn-Gruppen-sm, .BTN-Group-MD, .Btn-Group-Lg, .Btn-Group-XL.

Html

Der Code erstellt drei horizontal ausgerichtete Schaltflächengruppen. Die erste Knopfgruppe hat eine große Größe, das zweite mittel und die letzte kleine kleine Größe.

Ausgang

Sie können die Größe der Schaltflächengruppen anpassen, je nachdem, wie Sie Ihre anderen Inhalte auf der Website ausgerichtet haben.

So richten Sie mehrere Schaltflächengruppen inline aus

Unabhängig davon, wie viele Tastengruppen Sie in den Container platzieren, werden all dies automatisch in horizontaler Richtung ausgerichtet. Im Folgenden haben wir dieses Standardverhalten von Tastengruppen mit Hilfe eines Beispiels demonstriert.

Html

Wenn Sie den obigen Code anwenden. Sie können mehr Schaltflächengruppen im Inline übereinstimmen, wenn Sie möchten.

Ausgang

So richten Sie mehrere Schaltflächengruppen inline aus.

Abschluss

Zum Zweck der Gruppierung von Tasten mit Bootstrap 5 verwenden Sie die .BTN-Gruppenklasse. Diese Klasse wird zusammen mit Tastengruppen sie auch horizontal ausrichten. In der Zwischenzeit, um diese Gruppen vertikal auszurichten .BTN-Gruppen-vertikale Klasse. Wenn Sie Ihren Schaltflächengruppen eine bestimmte Größe geben möchten, können Sie verschiedene Klassen wie z. B. verwenden .Btn-sm, .BTN-MD, .BTN-LG usw. Mithilfe dieser Klassen können Sie Ihre Schaltflächengruppen problemlos erstellen und stylen.