Hvordan hekke -knappegrupper og lage rullegardinmenyer i Bootstrap 5?
Knappgrupper kan spille en betydelig rolle hvis du ønsker å pakke sammen sammenhengende knapper sammen som representerer flere og tilkoblede handlinger sammen. Dessuten kan disse knappegruppene nestes for å generere rullegardinmenyer som viser seg å være nyttige i situasjoner når du vil gi brukeren din flere valg.
Før vi hopper på hvordan vi kan generere rullegardinmenyer ved å hekke knappegrupper, la oss raskt forstå hvordan knapper kan grupperes sammen.
Hvordan lage knappegrupper ved hjelp av Bootstrap 5
For å gruppere knapper må du tilordne en .BTN-gruppe klasse til div container som pakker knappene. Dessuten, hvis du ønsker å style disse knappegruppene, så bruk .BTN -klasse sammen med kontekstuelle fargeklasser. De .btn Klassen gir en grunnleggende stil til gruppene, mens kontekstuelle fargeklasser brukes til å gi en bakgrunnsfarge til knappegruppene.
Html
Kodebiten vil generere fire knapper gruppert sammen, hver knapp har en klar polstring, en grønn bakgrunn og hvit tekstfarge.
Produksjon
Slik kan du gruppere knapper sammen med Bootstrap 5.
Nå vil vi gå videre til hovedtemaet som er diskutert som indikert av tittelen på artikkelen, som er hvordan knappegrupper kan nestes for å generere rullegardinmenyer.
Hvordan hekke grupperte knapper for å generere rullegardinmenyer
Du vil ønske å hekke -knappegrupper for å lage en rullegardinmeny i forskjellige scenarier, for eksempel når du ønsker å gi flere alternativer til brukeren å velge mellom. Eksemplet demonstrert nedenfor viser hvordan du kan utføre denne oppgaven.
Html
Eksempel forklart
Ovennevnte kode genererer to knappegrupper som hver består av en enkelt knapp, og hver knapp har en rullegardinmeny tilknyttet den.
Den første knappegruppen har en rullegardinmeny tilknyttet den som ble opprettet ved å tilordne .rullegardinlasse til en uordnet liste og ble gjort ved å tilordne .rullegardin-toggle klasse og til elementet og setter det Data-BS-Toggle = “Dropdown”. For å sette inn forskjellige alternativer i rullegardinmenyen ble ankerkoden nestet i en
Den andre rullegardinmenyen koblet til den andre knappegruppen ble også opprettet på lignende måte.
Produksjon
Ved hjelp av denne teknikken kan du lage en rullegardinmeny ved å gruppere knapper sammen.
Konklusjon
For å opprette en rullegardinmeny ved å hekke knappegrupper sammen kobler du en rullegardinmeny med en knappegruppe (er) ved å tilordne .rullegardinlasse til
- element og for å sette inn elementer inne i meny reir -taggen inne
- element og gi .rullegardin-element klasse til ankerkoden. For å gjøre menyen som kan teksteres, må du dessuten tilordne .Dropdown-toggle-klasse til elementet og angi det Data-BS-Toggle = “Dropdown”. Etter disse trinnene vil du enkelt kunne generere rullegardinmenyer ved å hekke knappegrupper.