Jak gniazdować grupy przycisków i tworzyć menu rozwijane w Bootstrap 5?
Grupy przycisków mogą odgrywać znaczącą rolę, jeśli chcesz owinąć ze sobą powiązane przyciski, które reprezentują wiele i połączone działania. Ponadto te grupy przycisków mogą zostać zagnieżdżone w celu wygenerowania menu rozwijanych, które okazują się pomocne w sytuacjach, gdy chcesz zapewnić użytkownikowi wiele opcji.
Zanim przejdziemy do wygenerowania menu rozwijanych przez gniazdowanie grup guzików.
Jak tworzyć grupy przycisków za pomocą Bootstrap 5
Aby grupować przyciski, musisz przypisać .grupa BTN klasa do kontenera Div owijającego przyciski. Ponadto, jeśli chcesz stylizować te grupy przycisków, użyj .klasa BTN wraz z kontekstowymi klasami kolorów. .Btn Klasa daje grupy podstawowy styl, podczas gdy kontekstowe klasy kolorów są używane do zapewnienia koloru tła grupom przycisków.
Html
Snippet kodowy wygeneruje cztery przyciski zgrupowane razem, każdy przycisk ma określoną wyściółkę, zielone tło i biały kolor tekstu.
Wyjście
W ten sposób możesz grupować przyciski razem za pomocą Bootstrap 5.
Teraz przejdziemy do głównego omawianego tematu, jak wskazano tytuł artykułu, który jest zagnieżdżony grupami guzików, aby generować menu rozwijane.
Jak gniazdować guziki do generowania menu rozwijanych
Chcesz gniazdować grupy przycisków, aby stworzyć menu rozwijane w różnych scenariuszach, na przykład gdy chcesz podać użytkownikowi wiele opcji. Wykazany poniżej przykład pokazuje, w jaki sposób możesz wykonać to zadanie.
Html
Wyjaśniony przykład
Powyższy kod generuje dwie grupy przycisków, z których każda składa się z jednego przycisku, a każdy przycisk zawiera menu rozwijane z nim.
Pierwsza grupa przycisków zawiera menu rozwijane, które zostało utworzone przez przypisanie .Klasa rozwijana do listy nieuporządkowanej i został przełączony przez przypisanie .Dyspdown-Toggle klasa i do elementu i ustawia jego Data-BS-Toggle = „Downisja”. Aby wstawić różne opcje do znacznika zakotwiczenia menu rozwijanego
Druga menu rozwijana połączona z grupą drugiej przycisku została również utworzona w podobny sposób.
Wyjście
Korzystając z tej techniki, możesz utworzyć menu rozwijane, grupując przyciski razem.
Wniosek
Aby utworzyć menu rozwijane poprzez gniazdowanie grup przycisków razem połącz menu rozwijane z grupą (grupy) przycisków, przypisując .Klasa rozwijana Do
- Element i w celu wstawienia elementów wewnątrz menu Tag w środku
- element i dostarczyć .Downiste post klasa do znacznika kotwicy. Ponadto, aby menu było przełączalne, przypisz .Klasa rozwijana do elementu i ustaw go Data-BS-Toggle = „Downisja”. Po tych krokach będziesz w stanie łatwo wygenerować menu rozwijane przez grupy gniazdujące.