Merker på et nettsted brukes til å levere noe viktig informasjon til brukeren, for eksempel en advarsel, varslingstall, promotering av et bestemt program osv. Bootstrap 5 gir en viss klasse som lar deg lage merker på nettstedet ditt. Foruten deres skapelse, er andre klasser også tilgjengelige for å style merkene. Denne bloggen guider deg om hvordan du lager og styler merker ved hjelp av Bootstrap 5.

Hvordan lage et merke

Med det formål å lage et merke, bruk .Merkeklasse sammen med en bakgrunnsfargeklasse som er .BG-Primary, .BG-suksess, .BG-Secondary, .BG-Info, .BG-advarsel, .BG-Danger, .BG-lys, .BG-Dark.

Html

Klikk her Viktig

Klikk her Viktig

For å lage et merke brukes elementet i en

og

element. Elementet er tildelt .Merkeklasse sammen med en bakgrunnsfargeklasse, .BG-varsling for å gi merket en gul bakgrunn. Legg merke til at et merke som standard har en rektangulær form og skalerer opp og ned for å matche størrelsen på overordnet element, hvis det er noen.

Produksjon

Merkene i output ovenfor brukes til å fange en brukernes oppmerksomhet.

Hvordan gi en bakgrunnsfarge til merker

Merker kan få en bakgrunnsfarge som bruker noen av bakgrunnsfargeklassene. Disse klassene spiller en viktig rolle i å formidle betydningen av et merke.

Html

Skilt
Skilt
Skilt
Skilt

Her har vi laget fire merker, og hver av dem har fått en annen bakgrunnsfargeklasse.

Produksjon

Hvert merke formidler en annen betydning.

Hvordan lage avrundede merker

Som allerede nevnt har merker som standard en rektangulær form, men hvis du ønsker å gi dem en avrundet form, så bruk .avrundet klasse.

Html

Skilt
Skilt
Skilt
Skilt

Ovennevnte kode vil generere fire pilleformede merker hver med en annen bakgrunnsfarge.

Produksjon

Merkene fikk en avrundet form vellykket.

Hvordan lage motmerker

Motmerker kan brukes til å vise varslingstall for et bestemt element. For å lage slike merker må du hekke elementet i det aktuelle elementet.

Html

Tapt anrop 8

Her har vi laget en "Missed Calls" -knapp som har en viss stil, og så har vi nestet et element som også har en viss stil og viser antall tapte samtaler, og dermed viser varslingstallet for de tapte samtalene.

Produksjon

Utgangen over viser at det er totalt 8 tapte samtaler.

Konklusjon

For å lage og style merker ved hjelp av Bootstrap 5, bruk .skilt klasse sammen med en av bakgrunnsfargeklassene som er .BG-Primary, .BG-suksess, .BG-Secondary, .BG-Info, .BG-advarsel, .BG-Danger, .BG-lys, .BG-Dark for å gi dem en bakgrunnsfarge. Dessuten har et merke som standard en rektangulær form, men disse kan gis en avrundet form ved hjelp av .avrundet klasse. Videre lager du en varslingstellersmerke ved å hekke merket inne i et element.