Tento článek se bude zabývat následujícími pohledy, které demonstrují použití odznaků Bootstrap:
- Jak používat odznak Bootstrap pro další informace?
- Jak používat odznak Bootstrap pro kontextové informace?
- Jak přidat vlastní styly k odznaku Bootstrap?
- Jak přidat ikony na odznak Bootstrap?
- Jak propojit odznak Bootstrap s jiným zdrojem?
- Jak udělat odznaky zaoblené?
- Jak používat Bootstrap Badge jako počítadlo?
Co jsou to Bootstrap Badges?
Odznaky jsou základní komponenty, které se používají k zobrazení indikátoru. Lze je například použít jako číselné počítadlo pro zobrazení počtu oznámení nebo zpráv:
Mohou být také použity k zobrazení dalších informací, jako jsou zobrazeny na daném obrázku:
Jak používat odznak Bootstrap pro další informace?
Do prvků HTML lze přidat odznaky bootstrap, které lze použít jako další informace. Podívejte se na níže uvedený příklad pro demonstraci.
Příklad
Chcete-li použít odznak Bootstrap pro doplňující informace, nejprve:
- Přidat “ ' a ' ' Prvky.
- Umístete ' 'prvek s ' odznak ' a ' odznak-* ' třídy. Třída „odznak-*“ odkazuje na odznak se zadanou barvou:
< h6 > Stipendia < rozpětí třída = 'odznak sekundární' > Nový < / rozpětí < / h6 >
Lze pozorovat, že k příslušným nadpisům jsou přidány dva odznaky:
Jak používat odznak Bootstrap pro kontextové informace?
Bootstrap odznaky lze také použít k poskytování kontextových informací, jako je „ odznak-nebezpečí ” zobrazuje odznak v červené barvě a lze jej použít k zobrazení některých neúspěšných zpráv, jako je zrušení, neplatnost nebo další. ' odznak-úspěch ” se používá tam, kde chceme ukázat nějakou zprávu o úspěchu.
Příklad
Podívejte se na daný kód, abyste pochopili diskutovaný scénář:
< rozpětí třída = 'odznak-nebezpečí' >Účet není ověřen< / rozpětí >< rozpětí třída = 'informace o odznaku' >toto je odznak< / rozpětí >
< rozpětí třída = 'upozornění na odznak' > Účet čeká na vyřízení pro schválení< / rozpětí >
< rozpětí třída = 'odznak-úspěch' >Účet ověřen< / rozpětí >
Výstup
Jak přidat vlastní styly k odznaku Bootstrap?
Můžete také použít CSS k přidání jedinečného stylu k odznakům Bootstrap. Pro lepší pochopení třída s názvem „ Zvyk “ je přidáno v rámci “ prvek. Poté se použijí následující vlastnosti:
< rozpětí třída = 'odznak odznak-nebezpečí vlastní' >Účet není ověřen < / rozpětí >< rozpětí třída = 'vlastní informace o odznaku' >Toto je odznak< / rozpětí >
< rozpětí třída = 'vlastní varovný odznak' > Účet čeká na vyřízení pro schválení< / rozpětí >
< rozpětí třída = 'odznak odznak-úspěch vlastní' >Účet ověřen< / rozpětí >
Styl „vlastní“ třída
.Zvyk {velikost písma : 18px ;
tloušťka písma : 100 ;
mezery mezi písmeny : 1px ;
vycpávka : 8px 15 pixelů ;
}
' .Zvyk “ se používá pro přístup k „ Zvyk “třída. Jsou na něj aplikovány následující vlastnosti:
- “ velikost písma “ upraví velikost písma.
- “ tloušťka písma “ uvádí tloušťku písma.
- “ mezery mezi písmeny “ přidává mezeru mezi písmeny.
- “ vycpávka “ poskytuje prostor kolem obsahu prvku.
Výstup
Jak přidat ikony na odznak Bootstrap?
K odznakům můžeme také přidat různé ikony. Chcete-li tak učinit, existuje několik tříd, které lze pro tento účel použít. Pro více informací navštivte Písmo úžasné webová stránka.
Příklad
V HTML přidejte „ prvek. Do tohoto prvku umístěte vložený prvek „ “ nebo „“ pro vložení třídy ikon:
< rozpětí třída = 'odznak odznak-nebezpečí vlastní' > Účet není ověřen< i třída = 'daleký fa-time-circle' < / i >
< / rozpětí >
< rozpětí třída = 'odznak odznak-úspěch vlastní' > Účet ověřen
< i třída = 'fas fa-user-check' < / i >
< / rozpětí >
Výstup
Jak propojit odznak Bootstrap s jiným zdrojem?
Aby bylo možné na odznaky Bootstrap kliknout, umístěte „ odznak “třídy v HTML” “ a uveďte odkaz na odkazovanou stránku v „ href ' atribut:
< A href = '#' třída = 'odznak odznak-nebezpečí vlastní' >Zrušit< / A >< A href = '#' třída = 'odznak-informace o odznaku vlastní' >Odeslat< / A >
Výstup
Jak udělat odznaky zaoblené?
Chcete-li, aby okraje odznaku byly zaoblenější, přidejte třídu „ odznak-pilulka “. Tato třída podporuje větší „ hraniční poloměr “ a horizontální “ vycpávka vlastnosti:
< rozpětí třída = 'odznak odznak-pilulka odznak-nebezpečí vlastní' >Účet není ověřen < / rozpětí >< rozpětí třída = 'odznak odznak-pilulka odznak-varování vlastní' > Účet čeká na vyřízení pro schválení< / rozpětí >
< rozpětí třída = 'odznak odznak-pilulka odznak-úspěch vlastní' >Účet ověřen < / rozpětí >
Výstup
Jak používat Bootstrap Badge jako počítadlo?
Chcete-li vytvořit tlačítko s počítadlem, přidejte kód HTML „
Oznámení < rozpětí třída = 'odznak odznak-light' > 4 < / rozpětí >
< / knoflík >
Výstup
To bylo vše o odznakech Bootstrap a jejich příslušných štítcích v Bootstrapu.
Závěr
Bootstrap' odznak ” třída se používá k přidávání odznaků na web. Například třídy jako „ odznak-nebezpečí “, “ odznak-info “ a další lze použít k přidání kontextových informací k odznakům jako jejich štítku. Některé třídy se používají k přidání ikon k odznakům, například „ daleko fa-time-circle ” pro umístění ikony přeškrtnutého kruhu. Tento příspěvek poskytuje komplexního průvodce odznaky a štítky Bootstrap.