Jak grupować przyciski w Bootstrap 5 | Wyjaśnione

Przyciski są kluczową częścią witryny, jeśli chcesz, aby Twój użytkownik wykonał określone zadanie, takie jak przesyłanie, usuwanie lub anulowanie. Jeśli jednak chcesz grupować przyciski, aby wyświetlić zestaw połączonych działań, można to łatwo zrobić za pomocą Bootstrap 5. Jak grupować przyciski za pomocą Bootstrap 5 wraz z tym, jak stylizować i wyrównać grupy przycisków, zostały podsumowane na tym blogu.

Jak tworzyć grupy przycisków

W celu grupowania przycisków lub wyrównania zgrupowanych przycisków w poziomie, musisz przypisać .Klasa grupy BTN do kontenera Div owijającego przyciski.

Html

Fragment kodu wygeneruje cztery przyciski zgrupowane razem, każdy przycisk ma określone wyściółki, jasnoniebieskie tło i biały kolor tekstu.

Wyjście

.Klasa grupy BTN jest używana do grupowania przycisków, podczas gdy domyślnie wyrównuje te grupy przycisków w poziomie.

Jak wyrównać pogrupowane przyciski pionowo

Jeśli chcesz grupować przyciski przy jednoczesnym wyrównaniu ich w kierunku pionowym, bootstrap 5 zapewnia klasę .BTN-GROUP-PERTYCA, które od razu wypełni to zadanie.

Html

Tutaj zostaną wygenerowane cztery przyciski, które są zgrupowane.

Wyjście

Grupa przycisków została pomyślnie wyrównana w pionie.

Jak podać określony rozmiar zgrupowanym przyciskom

Aby skalować rozmiar grup guzików w górę i w dół, możesz użyć klas Bootstrap 5 powiązanych z rozmiarem grup przycisków, takich jak .BTN-GROUP-SM, .BTN-GROUP-MD, .BTN-GROUP-LG, .BTN-GROUP-XL.

Html

Kod utworzy trzy poziomo wyrównane grupy przycisków. Pierwsza grupa przycisków będzie miała duży rozmiar, drugie medium, a ostatnia mała.

Wyjście

Możesz dostosować rozmiar grup przycisków w zależności od sposobu wyrównania innych treści na stronie internetowej.

Jak wyrównać wiele grup przycisków

Bez względu na to, ile grup guzików umieszczasz wewnątrz pojemnika, wszystkie z nich zostanie automatycznie wyrównane w kierunku poziomym. Poniżej zademonstrowaliśmy to domyślne zachowanie grup przycisków za pomocą przykładu.

Html

Stosując powyższy kod, będziesz mógł wygenerować dwie grupy przycisków, które będą domyślnie wyrównane. Możesz dostosować więcej grup przycisków, jeśli chcesz.

Wyjście

W ten sposób wyrównujesz wiele grup przycisków.

Wniosek

W celu grupowania przycisków za pomocą Bootstrap 5 Użyj .Klasa grupy BTN. Ta klasa, wraz z generowaniem grup guzików, również wyrówną je poziomo. Tymczasem w celu wyrównania tych grup pionowo użyj .BTN-GRUP-GROUP-PROGREAL CLASS. Ponadto, jeśli chcesz podać określony rozmiar grupom guzików, możesz użyć różnych klas, takich jak .BTN-SM, .BTN-MD, .BTN-LG itp. Korzystając z tych klas, które możesz łatwo tworzyć i stylizować grupy przycisków.