Bootstrap 4 Badges
Denne artikel vil guide dig i brugen af badges i Bootstrap 4. Badges er et nyttigt element til at vise status, oplysninger eller en markering af en bestemt egenskab på din hjemmeside. Bootstrap 4 badges er nemme at implementere og tilbyder en bred vifte af muligheder for tilpasning. Vi vil udforske forskellige metoder til at bruge badges og præsentere eksempler på hver. Så lad os dykke ned i verdenen af Bootstrap 4 badges og udforske deres fulde potentiale.
Grundlæggende badges
Et grundlæggende badge i Bootstrap 4 er en lille rund eller rektangulær markering, der vises som en del af tekstindholdet på din hjemmeside. Du kan tilføje et badge ved at brugespan-elementet og give det klassenavnbadge. For at ændre farven på badgen kan du kombinerebadge-klassen med en af de foruddefinerede farveklasser, såsombadge-primary,badge-secondaryosv. Lad os se et eksempel:
Dette er en besked med etbadge
I ovenstående eksempel vil badge -teksten blive vist i en primær farve, som standard blå. Du kan selvfølgelig ændre farven ved at bruge en anden farveklasse.
Badges i knapper
En anden populær anvendelse af badges er inden for knapper. Du kan nemt tilføje et badge til en knap ved blot at placere det inden ibutton-elementet. For eksempel:
I dette eksempel vil du få en primær farvet knap med et lyst badge indeholdende tallet 3. Dette er nyttigt, når du fx vil vise antallet af ulæste beskeder i en indbakke.
Badges med feedback
Bootstrap 4 tilbyder også badges med positive eller negative feedback-meddelelser. For at tilføje en feedback-badge, kan du kombinerebadge-klassen medbadge-success,badge-warningellerbadge-dangerklasserne. Disse farveklasser repræsenterer henholdsvis succes, advarsel og fejl. For eksempel:
Betalingen er gennemført:Godkendt
I ovenstående eksempel vises denne feedback-badge med den grønne Godkendt tekst, som indikerer en succesfuld betalingstransaktion. Du kan let tilpasse teksten til enhver form for feedback, du vil vise på din hjemmeside.
Badges med tal
Hvis du har brug for at vise numeriske værdier i et badge, kan du enkelt gøre det ved at indsætte tallet mellem åbning og lukning afspan-elementet. For eksempel:
Antallet af nye meddelelser er8
I dette eksempel vil badgen vise tallet 8 og have en sekundær farve (som standard grå). Dette er nyttigt, når du vil vise antallet af forskellige elementer, såsom nye meddelelser eller ulæste kommentarer.
Badges i navigationen
Endelig kan badges også bruges i navigationsmenuer til at vise nye, opdaterede eller aktive elementer. Du kan nemt tilføje et badge til en knap eller link inde i navigationsmenuen. For eksempel:
I dette eksempel vil du have en navigationsmenu med to links og badges. Kontakt -linket vil have et blåt badge med teksten Ny, og Produkter -linket vil have et grønt badge med teksten Opdateret. Dette giver en brugervenlig måde at vise opdateringer eller nye elementer i din hjemmesides navigation.
Konklusion
I denne artikel har du lært alt om, hvordan du bruger badges i Bootstrap 4. Du har set eksempler på grundlæggende badges, badges i knapper, badges med feedback, badges med tal og badges i navigation. Med disse muligheder vil du være i stand til at tilføje veludformede badges til din hjemmeside og forbedre brugeroplevelsen. Husk at badges er et alsidigt og effektivt element til at vise oplysninger, markere eller informere på din hjemmeside. Så gå i gang med at bruge Bootstrap 4 badges i dag og lad dine besøgende drage fordel af den ekstra information, de giver!
Andre populære artikler: AWS CAF – Cloud Adoption Framework • Google Sheets Fills • Font Awesome 5 Building Icons • JavaScript decodeURIComponent() Metode • PHP server_info() / mysqli_get_server_info() Funktion • JavaScript parseInt() Funktion • W3.CSS Effects • Python bool() Funktion • Velkommen til min side • MS Access Mid() Function • Java package Keyword • Hvad er en Pie Chart? • TypeScript Øvelser • Java String equalsIgnoreCase() metode • PHP Exception getMessage() metoden • Accessibility Screen Readers • MySQL SUBDATE() Funktionen • How To Create Round Buttons Med CSS • Google Sheets Format Painter • HTML Table Sizes