Tento článok sa bude zaoberať nasledujúcimi pohľadmi na demonštráciu používania odznakov Bootstrap:
- Ako používať odznak Bootstrap na získanie ďalších informácií?
- Ako používať odznak Bootstrap pre kontextové informácie?
- Ako pridať vlastné štýly k odznaku Bootstrap?
- Ako pridať ikony na odznak Bootstrap?
- Ako prepojiť odznak Bootstrap s iným zdrojom?
- Ako urobiť odznaky zaoblené?
- Ako používať odznak Bootstrap ako počítadlo?
Čo sú to odznaky Bootstrap?
Odznaky sú základné komponenty, ktoré sa používajú na zobrazenie indikátora. Môžu sa napríklad použiť ako číselné počítadlo na zobrazenie počtu upozornení alebo správ:
Môžu byť tiež použité na zobrazenie dodatočných informácií, ako sú zobrazené na danom obrázku:
Ako používať odznak Bootstrap na získanie ďalších informácií?
Bootstrap odznaky môžu byť pridané v rámci HTML elementov a použiť ich ako dodatočné informácie. Pre demonštráciu si pozrite príklad uvedený nižšie.
Príklad
Ak chcete použiť odznak Bootstrap na dodatočné informácie, najprv:
- Pridať “ “ a „ “prvky.
- Umiestnite „ 'prvok s ' odznak “ a „ odznak-* “triedy. Trieda „odznak-*“ sa vzťahuje na odznak s určenou farbou:
< h6 > Štipendiá < rozpätie trieda = 'odznak-sekundárny' > Nový < / rozpätie < / h6 >
Možno si všimnúť, že k príslušným nadpisom sú pridané dva odznaky:
Ako používať odznak Bootstrap pre kontextové informácie?
Bootstrap odznaky možno použiť aj na poskytovanie kontextových informácií, ako napríklad „ odznak-nebezpečenstvo ” zobrazuje odznak v červenej farbe a možno ho použiť na zobrazenie niektorých neúspešných správ, ako je zrušenie, neplatnosť alebo ďalšie. ' odznak-úspech “ sa používa tam, kde chceme ukázať nejakú správu o úspechu.
Príklad
Pozrite sa na daný kód, aby ste pochopili diskutovaný scenár:
< rozpätie trieda = 'nebezpečenstvo odznaku' >Účet nie je overený< / rozpätie >< rozpätie trieda = 'informácie o odznaku' >toto je odznak< / rozpätie >
< rozpätie trieda = 'upozornenie na odznak' >Čaká na účet pre schválenie< / rozpätie >
< rozpätie trieda = 'odznak-úspech' >Účet overený< / rozpätie >
Výkon
Ako pridať vlastné štýly k odznaku Bootstrap?
Môžete tiež použiť CSS na pridanie jedinečného štýlu k odznakom Bootstrap. Pre lepšie pochopenie trieda s názvom „ zvykom “ sa pridáva v rámci “ ' prvok. Potom sa použijú nasledujúce vlastnosti:
< rozpätie trieda = 'vlastný odznak odznak-nebezpečenstvo' >Účet nie je overený < / rozpätie >< rozpätie trieda = 'vlastné informácie o odznaku' >Toto je odznak< / rozpätie >
< rozpätie trieda = 'vlastný odznak varovania' >Čaká na účet pre schválenie< / rozpätie >
< rozpätie trieda = 'odznak-úspech vlastný' >Účet overený< / rozpätie >
Štýlová „vlastná“ trieda
.vlastné {veľkosť písma : 18 pixelov ;
font-weight : 100 ;
medzi písmenami : 1px ;
vypchávka : 8px 15 pixelov ;
}
' .vlastné “ sa používa na prístup k „ zvykom ' trieda. Aplikujú sa naň nasledujúce vlastnosti:
- “ veľkosť písma ” upraví veľkosť písma.
- “ font-weight “ uvádza hrúbku písma.
- “ medzi písmenami “ pridáva medzeru medzi písmenami.
- “ vypchávka “ poskytuje priestor okolo obsahu prvku.
Výkon
Ako pridať ikony na odznak Bootstrap?
K odznakom môžeme pridať aj rôzne ikony. Na tento účel existuje niekoľko tried, ktoré možno na tento účel použiť. Pre viac informácií navštívte stránku Font úžasné webovej stránky.
Príklad
V HTML pridajte „ ' prvok. Do tohto prvku umiestnite vložený prvok „ “ alebo „“, aby ste vložili triedu ikon:
< rozpätie trieda = 'vlastný odznak odznak-nebezpečenstvo' > Účet nie je overený< i trieda = 'ďaleký fa-čas-kruh' < / i >
< / rozpätie >
< rozpätie trieda = 'odznak-úspech vlastný' > Účet overený
< i trieda = 'fas fa-user-check' < / i >
< / rozpätie >
Výkon
Ako prepojiť odznak Bootstrap s iným zdrojom?
Aby bolo možné kliknúť na odznaky Bootstrap, umiestnite „ odznak “ triedy v rámci HTML “ “ a uveďte odkaz na prepojenú stránku v „ href ” atribút:
< a href = '#' trieda = 'vlastný odznak odznak-nebezpečenstvo' >Zrušiť< / a >< a href = '#' trieda = 'vlastné informácie o odznaku' >Odoslať< / a >
Výkon
Ako urobiť odznaky zaoblené?
Ak chcete, aby okraje odznaku boli zaoblenejšie, pridajte triedu „ odznak-pilulka “. Táto trieda podporuje väčšie „ hraničný polomer “ a horizontálne “ vypchávka vlastnosti:
< rozpätie trieda = 'odznak odznak-pilulka odznak-nebezpečenstvo zvyk' >Účet nie je overený < / rozpätie >< rozpätie trieda = 'odznak odznak-odznak pilulky-varovný vlastný' >Čaká na účet pre schválenie< / rozpätie >
< rozpätie trieda = 'odznak odznak-pilulka-odznak-úspech vlastný' >Účet overený < / rozpätie >
Výkon
Ako používať odznak Bootstrap ako počítadlo?
Ak chcete vytvoriť tlačidlo s počítadlom, pridajte kód HTML „
Upozornenia < rozpätie trieda = 'odznak odznak-svetlý' > 4 < / rozpätie >
< / tlačidlo >
Výkon
To bolo všetko o odznakoch Bootstrap a ich príslušných štítkoch v Bootstrape.
Záver
Bootstrap“ odznak ” sa používa na pridávanie odznakov na webovú stránku. Napríklad triedy ako „ odznak-nebezpečenstvo “, “ odznak-info “ a ďalšie môžu byť použité na pridanie kontextových informácií k odznakom ako ich štítku. Niektoré triedy sa používajú na pridávanie ikon k odznakom, ako napríklad „ ďaleko fa-time-circle ” a umiestnite ikonu krížika. Tento príspevok poskytuje komplexného sprievodcu odznakmi a štítkami Bootstrap.