Denne artikel vil dække følgende perspektiver for at demonstrere brugen af Bootstrap-badges:
- Hvordan bruger man Bootstrap Badge til yderligere oplysninger?
- Hvordan bruger man Bootstrap Badge til kontekstuelle oplysninger?
- Hvordan tilføjes brugerdefinerede stilarter til Bootstrap-emblemet?
- Hvordan tilføjer man ikoner til Bootstrap-emblemet?
- Hvordan forbinder man Bootstrap Badge til en anden kilde?
- Hvordan laver man badges afrundede?
- Hvordan bruger man Bootstrap Badge som en tæller?
Hvad er Bootstrap Badges?
Badges er de grundlæggende komponenter, der bruges til at vise en indikator. For eksempel kan de bruges som en numerisk tæller til at vise antallet af meddelelser eller beskeder:
De kan også bruges til at vise yderligere information, såsom vist på det givne billede:
Hvordan bruger man Bootstrap Badge til yderligere oplysninger?
Bootstrap-badges kan tilføjes i HTML-elementerne til brug som yderligere information. Se eksemplet nævnt nedenfor for demonstrationen.
Eksempel
For at bruge Bootstrap-badge til yderligere oplysninger skal du først:
- Tilføje ' ' og ' ' elementer.
- Placer ' ' element med ' badge ' og ' badge-* ” klasser. Klassen 'badge-*' refererer til badgen med den angivne farve:
< h6 > Stipendier < span klasse = 'badge badge-sekundær' > Ny < / span >< / h6 >
Det kan bemærkes, at to badges er tilføjet til de relevante overskrifter:
Hvordan bruger man Bootstrap Badge til kontekstuelle oplysninger?
Bootstrap-badges kan også bruges til at give kontekstuel information som ' badge-fare ” viser emblemet i rød farve og kan bruges til at vise nogle mislykkede meddelelser som annuller, ugyldige eller mere. Det ' badge-succes ” bruges, hvor vi ønsker at vise noget succesbudskab.
Eksempel
Se på den givne kode for at forstå det diskuterede scenario:
< span klasse = 'badge badge-fare' >Konto ikke bekræftet< / span >< span klasse = 'badge badge-info' >dette er badge< / span >
< span klasse = 'badge badge-advarsel' >Konto afventer til godkendelse< / span >
< span klasse = 'badge badge-succes' >Konto verificeret< / span >
Produktion
Hvordan tilføjes brugerdefinerede stilarter til Bootstrap-emblemet?
Du kan også bruge CSS til at tilføje noget unikt design til Bootstrap-mærkerne. For en bedre forståelse, en klasse med navnet ' brugerdefinerede ' tilføjes i ' ' element. Derefter anvendes følgende egenskaber:
< span klasse = 'badge badge-danger custom' >Konto ikke bekræftet < / span >< span klasse = 'badge badge-info tilpasset' >Dette er badge< / span >
< span klasse = 'brugerdefineret badge-badge-advarsel' >Konto afventer til godkendelse< / span >
< span klasse = 'badge badge-succes tilpasset' >Konto verificeret< / span >
Stil 'brugerdefineret' klasse
.brugerdefinerede {skriftstørrelse : 18 px ;
skrifttype-vægt : 100 ;
bogstavmellemrum : 1 px ;
polstring : 8px 15 px ;
}
Det ' .brugerdefinerede ' bruges til at få adgang til ' brugerdefinerede ' klasse. Følgende egenskaber anvendes på det:
- “ skriftstørrelse ” justerer skriftstørrelsen.
- “ skrifttype-vægt ” angiver skrifttypens tykkelse.
- “ bogstavmellemrum ” tilføjer mellemrum mellem bogstaverne.
- “ polstring ” giver plads omkring elementets indhold.
Produktion
Hvordan tilføjer man ikoner til Bootstrap-emblemet?
Vi kan også tilføje forskellige ikoner til badges. For at gøre det er der flere klasser, der kan bruges til denne årsag. For mere information, besøg Font Awesome internet side.
Eksempel
I HTML skal du tilføje en ' ' element. Indenfor dette element skal du placere det inline-element ' ' eller '' for at indsætte ikonklassen:
< span klasse = 'badge badge-danger custom' > Kontoen er ikke bekræftet< jeg klasse = 'langt fa-tider-cirkel' >< / jeg >
< / span >
< span klasse = 'badge badge-succes tilpasset' > Konto bekræftet
< jeg klasse = 'fas fa-bruger-tjek' >< / jeg >
< / span >
Produktion
Hvordan forbinder man Bootstrap Badge til en anden kilde?
For at gøre Bootstrap-mærkerne klikbare skal du placere ' badge ' klasser i HTML ' ' tag og angiv referencen til den linkede side i ' href ' attribut:
< -en href = '#' klasse = 'badge badge-danger custom' >Annuller< / -en >< -en href = '#' klasse = 'badge badge-info tilpasset' >Send< / -en >
Produktion
Hvordan laver man badges afrundede?
For at gøre badgekanterne mere afrundede skal du tilføje en klasse ' badge-pille '. Denne klasse understøtter en større ' grænse-radius ' og vandret ' polstring ' ejendomme:
< span klasse = 'badge badge-pille badge-danger custom' >Konto ikke bekræftet < / span >< span klasse = 'badge badge-pille badge-advarsel tilpasset' >Konto afventer til godkendelse< / span >
< span klasse = 'badge badge-pille badge-succes tilpasset' >Konto verificeret < / span >
Produktion
Hvordan bruger man Bootstrap Badge som en tæller?
For at oprette en knap med en tæller skal du tilføje en HTML '
Meddelelser < span klasse = 'badge badge-lys' > 4 < / span >
< / knap >
Produktion
Det handlede om Bootstrap-badges og deres relevante etiketter i Bootstrap.
Konklusion
Bootstrap' badge ” klasse bruges til at tilføje badges til hjemmesiden. For eksempel klasser som ' badge-fare ', ' badge-info ”, og mere kan bruges til at tilføje kontekstuelle oplysninger til badges som deres etiket. Nogle klasser anvendes til at tilføje ikoner til badges, såsom ' langt fa-tider-cirkel ” for at placere et krydscirkelikon. Dette indlæg har givet en omfattende vejledning om Bootstrap-badges og etiketter.