Hvordan gruppere knapper i Bootstrap 5 | Forklart

Knapper er en avgjørende del av et nettsted hvis du vil at brukeren din skal utføre en bestemt oppgave som å sende inn, slette eller avbryte. Imidlertid, hvis du ønsker å gruppere knapper sammen for å vise et sett med koblede handlinger, kan dette enkelt gjøres ved å bruke Bootstrap 5. Hvordan gruppeknapper ved hjelp av Bootstrap 5 sammen med hvordan du styler og justerer knappegrupper er blitt oppsummert i denne bloggen.

Hvordan lage knappegrupper

For å gruppere knapper eller justere grupperte knapper horisontalt, må du tilordne en .BTN-gruppeklasse til div container som pakker knappene.

Html

Kodebiten vil generere fire knapper gruppert sammen, og hver knapp har en klar polstring, lyseblå bakgrunn og hvit tekstfarge.

Produksjon

De .BTN-gruppeklasse brukes til å gruppere knapper, mens den også som standard justerer disse knappegruppene horisontalt.

Hvordan justere grupperte knapper vertikalt

Hvis du ønsker å gruppere knapper mens du justerer dem i vertikal retning, gir Bootstrap 5 klassen .BTN-gruppe-vertikalt som vil oppfylle denne oppgaven med en gang.

Html

Her vil fire knapper som er gruppert sammen genereres, dessuten vil disse knappene ha en vertikal retning.

Produksjon

Knappegruppen ble vellykket justert vertikalt.

Hvordan gi en viss størrelse til grupperte knapper

For å skalere størrelsen på knappegruppene opp og ned kan du bruke Bootstrap 5 -klasser tilknyttet knappegruppestørrelse som for eksempel .BTN-Group-SM, .BTN-Group-MD, .BTN-GROUP-LG, .BTN-GROUP-XL.

Html

Koden vil opprette tre horisontalt justerte knappegrupper. Den første knappegruppen vil ha stor størrelse, den andre mediet og den siste liten.

Produksjon

Du kan justere størrelsen på knappegrupper, avhengig av hvordan du har justert det andre innholdet ditt på nettstedet.

Hvordan justere flere knappegrupper på nettet

Uansett hvor mange knappegrupper du plasserer inne i beholderen, vil alle disse automatisk justeres i horisontal retning. Nedenfor har vi demonstrert denne standardoppførselen til knappegrupper ved hjelp av et eksempel.

Html

Ved å bruke koden over vil du kunne generere to knappegrupper som vil være som standard justert inline. Du kan justere flere knappegrupper i tråd hvis du ønsker det.

Produksjon

Slik justerer du flere knappegrupper på nettet.

Konklusjon

For å gruppere knapper ved hjelp av Bootstrap 5, bruk .BTN-gruppeklasse. Denne klassen, sammen med genererende knappegrupper, vil også justere dem horisontalt. I mellomtiden, for å justere disse gruppene, bruker du vertikalt .BTN-gruppe-vertikal klasse. Videre, hvis du ønsker å gi en bestemt størrelse til knappegruppene dine, kan du bruke forskjellige klasser som for eksempel .Btn-SM, .BTN-MD, .BTN-LG, etc. Bruke disse klassene du enkelt kan opprette og style knappegruppene dine.