Dit artikel behandelt de volgende perspectieven om het gebruik van Bootstrap-badges te demonstreren:
- Hoe Bootstrap-badge te gebruiken voor aanvullende informatie?
- Hoe Bootstrap-badge te gebruiken voor contextuele informatie?
- Hoe aangepaste stijlen aan Bootstrap-badge toevoegen?
- Hoe voeg ik pictogrammen toe aan de Bootstrap-badge?
- Hoe bootstrap-badge aan een andere bron te koppelen?
- Hoe maak je badges afgerond?
- Hoe Bootstrap-badge als teller te gebruiken?
Wat zijn Bootstrap-badges?
Badges zijn de basiscomponenten die worden gebruikt om een indicator weer te geven. Ze kunnen bijvoorbeeld worden gebruikt als een numerieke teller om het aantal meldingen of berichten weer te geven:
Ze kunnen ook worden gebruikt om aanvullende informatie weer te geven, zoals weergegeven in de gegeven afbeelding:
Hoe Bootstrap-badge te gebruiken voor aanvullende informatie?
Bootstrap-badges kunnen binnen de HTML-elementen worden toegevoegd om als aanvullende informatie te gebruiken. Bekijk het onderstaande voorbeeld voor de demonstratie.
Voorbeeld
Om de Bootstrap-badge te gebruiken voor extra informatie, eerst:
- Toevoegen ' ' en ' ” elementen.
- Plaats de ' ”-element met de “ kenteken ' en ' badge-* ' klassen. De klasse “badge-*” verwijst naar de badge met de opgegeven kleur:
< h6 > Beurzen < span klas = 'badge badge-secundair' > Nieuw < / span >< / h6 >
Er kan worden opgemerkt dat er twee badges zijn toegevoegd aan de relevante rubrieken:
Hoe Bootstrap-badge te gebruiken voor contextuele informatie?
Bootstrap-badges kunnen ook worden gebruikt om contextuele informatie te geven, zoals ' badge-gevaar ” geeft de badge in rode kleur weer en kan worden gebruikt om enkele mislukte berichten weer te geven, zoals annuleren, ongeldig of meer. De ' badge-succes ” wordt gebruikt waar we een succesbericht willen laten zien.
Voorbeeld
Kijk naar de gegeven code om het besproken scenario te begrijpen:
< span klas = 'badge badge-gevaar' >Account niet geverifieerd< / span >< span klas = 'badge badge-info' >dit is een kenteken< / span >
< span klas = 'badge badge-waarschuwing' >Account in behandeling voor goedkeuring< / span >
< span klas = 'badge badge-succes' >Account geverifieerd< / span >
Uitgang
Hoe aangepaste stijlen aan Bootstrap-badge toevoegen?
U kunt ook CSS gebruiken om een unieke stijl toe te voegen aan de Bootstrap-badges. Voor een beter begrip, een klas met de naam “ Op maat ” is toegevoegd binnen de “ ”-element. Vervolgens worden de volgende eigenschappen toegepast:
< span klas = 'badge badge-gevaar op maat' >Account niet geverifieerd < / span >< span klas = 'badge badge-info op maat' >Dit is een badge< / span >
< span klas = 'badge badge-waarschuwing op maat' >Account in behandeling voor goedkeuring< / span >
< span klas = 'badge badge-succes op maat' >Account geverifieerd< / span >
Stijl 'aangepaste' klasse
.Op maat {lettertypegrootte : 18px ;
lettertype dikte : 100 ;
letterafstand : 1px ;
opvulling : 8px 15px ;
}
De ' .Op maat ” wordt gebruikt om toegang te krijgen tot de “ Op maat ' klas. De volgende eigenschappen worden erop toegepast:
- “ lettertypegrootte ” past de lettergrootte aan.
- “ lettertype dikte ” geeft de dikte van het lettertype aan.
- “ letterafstand ” voegt ruimte toe tussen de letters.
- “ opvulling ” biedt ruimte rond de inhoud van het element.
Uitgang
Hoe voeg ik pictogrammen toe aan de Bootstrap-badge?
We kunnen ook verschillende pictogrammen aan de badges toevoegen. Om dit te doen, zijn er verschillende klassen die hiervoor kunnen worden gebruikt. Voor meer informatie, bezoek de Lettertype Geweldig website.
Voorbeeld
Voeg in HTML een ' ”-element. Plaats binnen dit element het inline-element ' ' of '' om de pictogramklasse in te voegen:
< span klas = 'badge badge-gevaar op maat' > Account niet geverifieerd< i klas = 'verre fa-tijden-cirkel' >< / i >
< / span >
< span klas = 'badge badge-succes op maat' > Account geverifieerd
< i klas = 'fas fa-user-check' >< / i >
< / span >
Uitgang
Hoe bootstrap-badge aan een andere bron te koppelen?
Om de Bootstrap-badges klikbaar te maken, plaatst u de ' kenteken 'klassen binnen de HTML'
< a href = '#' klas = 'badge badge-info op maat' >Verzenden< / a >
Uitgang
Hoe maak je badges afgerond?
Voeg een klasse toe om de badgeranden ronder te maken badge-pil ”. Deze klasse ondersteunt een grotere ' grensradius ” en horizontaal “ opvulling ' eigenschappen:
< span klas = 'badge badge-pil badge-gevaar op maat' >Account niet geverifieerd < / span >< span klas = 'badge badge-pil badge-waarschuwing op maat' >Account in behandeling voor goedkeuring< / span >
< span klas = 'badge badge-pil badge-succes op maat' >Account geverifieerd < / span >
Uitgang
Hoe Bootstrap-badge als teller te gebruiken?
Voeg een HTML toe om een knop met een teller te maken '
Meldingen < span klas = 'badge badge-licht' > 4 < / span >
< / knop >
Uitgang
Dat ging allemaal over Bootstrap-badges en hun relevante labels in Bootstrap.
Gevolgtrekking
De bootstrap ' kenteken ” class wordt gebruikt om badges toe te voegen aan de website. Bijvoorbeeld lessen als ' badge-gevaar ”, “ badge-info ”, en meer kunnen worden gebruikt om contextuele informatie toe te voegen aan de badges als hun label. Sommige klassen worden toegepast om pictogrammen aan de badges toe te voegen, zoals ' ver fa-tijden-cirkel ” om een pictogram met een kruiscirkel te plaatsen. Dit bericht bevat een uitgebreide gids over Bootstrap-badges en -labels.