Den här artikeln kommer att täcka följande perspektiv för att demonstrera användningen av Bootstrap-märken:
- Hur använder jag Bootstrap Badge för ytterligare information?
- Hur man använder Bootstrap Badge för kontextuell information?
- Hur lägger man till anpassade stilar till Bootstrap-märket?
- Hur lägger man till ikoner till Bootstrap-märket?
- Hur länkar man Bootstrap Badge till en annan källa?
- Hur gör man märken rundade?
- Hur man använder Bootstrap Badge som en räknare?
Vad är Bootstrap-märken?
Märken är de grundläggande komponenterna som används för att visa en indikator. De kan till exempel användas som en numerisk räknare för att visa antalet aviseringar eller meddelanden:
De kan också användas för att visa ytterligare information, såsom visas i den givna bilden:
Hur använder jag Bootstrap Badge för ytterligare information?
Bootstrap-märken kan läggas till i HTML-elementen för att använda som ytterligare information. Kolla in exemplet nedan för demonstrationen.
Exempel
För att använda Bootstrap-märket för ytterligare information, först:
- Lägg till ' ' och ' ' element.
- Placera ' ' element med ' bricka ' och ' bricka-* ' klasser. Klassen 'badge-*' hänvisar till märket med den angivna färgen:
< h6 > Stipendier < spänna klass = 'emblem badge-sekundär' > Ny < / spänna >< / h6 >
Det kan observeras att två märken läggs till i relevanta rubriker:
Hur man använder Bootstrap Badge för kontextuell information?
Bootstrap-märken kan också användas för att tillhandahålla kontextuell information som ' märke-fara ” visar märket i röd färg och kan användas för att visa vissa misslyckade meddelanden som avbryt, ogiltigt eller mer. den ' märke-framgång ” används där vi vill visa ett framgångsbudskap.
Exempel
Titta på den givna koden för att förstå det diskuterade scenariot:
< spänna klass = 'badge badge-danger' >Kontot inte verifierat< / spänna >< spänna klass = 'emblem badge-info' >det här är märke< / spänna >
< spänna klass = 'badge badge-varning' >Konto väntar för godkännande< / spänna >
< spänna klass = 'bricka märke-framgång' >Konto verifierat< / spänna >
Produktion
Hur lägger man till anpassade stilar till Bootstrap-märket?
Du kan också använda CSS för att lägga till lite unik stil till Bootstrap-märkena. För en bättre förståelse, en klass med namnet ' beställnings- ' läggs till i ' ' element. Sedan tillämpas följande egenskaper:
< spänna klass = 'emblem badge-danger custom' >Kontot inte verifierat < / spänna >< spänna klass = 'märke märke-info anpassad' >Detta är märke< / spänna >
< spänna klass = 'emblem badge-warning custom' >Konto väntar för godkännande< / spänna >
< spänna klass = 'märke märke-framgång anpassad' >Konto verifierat< / spänna >
Stil 'anpassad' klass
.beställnings {textstorlek : 18px ;
teckensnittsvikt : 100 ;
teckenavstånd : 1 px ;
stoppning : 8px 15 px ;
}
den ' .beställnings ' används för att komma åt ' beställnings- ' klass. Följande egenskaper tillämpas på den:
- ' textstorlek ” justerar teckenstorleken.
- ' teckensnittsvikt ” anger typsnittets tjocklek.
- ' teckenavstånd ” lägger till mellanslag mellan bokstäverna.
- ' stoppning ” ger utrymme runt elementets innehåll.
Produktion
Hur lägger man till ikoner till Bootstrap-märket?
Vi kan lägga till olika ikoner till märkena också. För att göra det finns det flera klasser som kan användas för denna orsak. För mer information, besök Typsnitt fantastiskt hemsida.
Exempel
I HTML lägger du till ett ' ' element. Inom det här elementet, placera inline-elementet ' ' eller '' för att infoga ikonklassen:
< spänna klass = 'emblem badge-danger custom' > Kontot är inte verifierat< i klass = 'långt fa-tider-cirkel' >< / i >
< / spänna >
< spänna klass = 'märke märke-framgång anpassad' > Kontot verifierat
< i klass = 'fas fa-användarkontroll' >< / i >
< / spänna >
Produktion
Hur länkar man Bootstrap Badge till en annan källa?
För att göra Bootstrap-märkena klickbara, placera ' bricka ' klasser i HTML ' ' tagga och ange referensen till den länkade sidan i ' href ' attribut:
< a href = '#' klass = 'emblem badge-danger custom' >Avbryt< / a >< a href = '#' klass = 'märke märke-info anpassad' >Skicka in< / a >
Produktion
Hur gör man märken rundade?
För att göra märkets kanter mer rundade, lägg till en klass ' badge-piller ”. Denna klass stöder en större ' gräns-radie ' och horisontell ' stoppning ' egenskaper:
< spänna klass = 'badge badge-pill badge-danger custom' >Kontot inte verifierat < / spänna >< spänna klass = 'emblem badge-pill badge-warning custom' >Konto väntar för godkännande< / spänna >
< spänna klass = 'badge badge-pill badge-framgång anpassad' >Konto verifierat < / spänna >
Produktion
Hur man använder Bootstrap Badge som en räknare?
För att skapa en knapp med en räknare, lägg till en HTML '
Aviseringar < spänna klass = 'badge badge-light' > 4 < / spänna >
< / knapp >
Produktion
Det handlade om Bootstrap-märken och deras relevanta etiketter i Bootstrap.
Slutsats
The Bootstrap ' bricka Klassen används för att lägga till märken på webbplatsen. Till exempel klasser som ' märke-fara ”, “ märkesinformation ”, och mer kan användas för att lägga till kontextuell information till märkena som deras etikett. Vissa klasser används för att lägga till ikoner till märkena, till exempel ' långt fa-tider-cirkel ” för att placera en ikon över en cirkel. Det här inlägget har gett en omfattande guide om Bootstrap-märken och etiketter.