Šajā rakstā tiks aplūkotas šādas perspektīvas, lai parādītu Bootstrap emblēmu izmantošanu:
- Kā izmantot Bootstrap emblēmu, lai iegūtu papildu informāciju?
- Kā izmantot Bootstrap emblēmu kontekstuālai informācijai?
- Kā Bootstrap emblēmai pievienot pielāgotus stilus?
- Kā pievienot ikonas Bootstrap emblēmai?
- Kā saistīt Bootstrap emblēmu ar citu avotu?
- Kā padarīt nozīmītes noapaļotas?
- Kā izmantot Bootstrap emblēmu kā skaitītāju?
Kas ir Bootstrap emblēmas?
Nozīmītes ir galvenās sastāvdaļas, ko izmanto, lai parādītu indikatoru. Piemēram, tos var izmantot kā ciparu skaitītāju, lai parādītu paziņojumu vai ziņojumu skaitu:
Tos var arī izmantot, lai parādītu papildu informāciju, piemēram, parādītajā attēlā:
Kā izmantot Bootstrap emblēmu, lai iegūtu papildu informāciju?
Bootstrap emblēmas var pievienot HTML elementiem, lai tos izmantotu kā papildu informāciju. Demonstrācijai skatiet tālāk minēto piemēru.
Piemērs
Lai izmantotu Bootstrap emblēmu papildu informācijai, vispirms veiciet tālāk norādītās darbības.
- Pievienot ' ' un ' ” elementi.
- Novietojiet ' ' elements ar ' nozīmīte ' un ' žetons-* ' klases. Klase “žetons-*” attiecas uz emblēmu ar norādīto krāsu:
< h6 > Stipendijas < span klasē = 'žetons, sekundārs' > Jauns < / span >< / h6 >
Var novērot, ka attiecīgajiem virsrakstiem ir pievienotas divas nozīmītes:
Kā izmantot Bootstrap emblēmu kontekstuālai informācijai?
Bootstrap emblēmas var izmantot arī, lai sniegtu kontekstuālu informāciju, piemēram, ' žetons-bīstamība ” parāda emblēmu sarkanā krāsā, un to var izmantot, lai parādītu dažus neveiksmīgus ziņojumus, piemēram, atcelt, nederīgi vai citus ziņojumus. ' nozīmīte-veiksme ” tiek izmantots, ja vēlamies parādīt kādu veiksmes vēstījumu.
Piemērs
Apskatiet doto kodu, lai saprastu apspriesto scenāriju:
< span klasē = 'žetonu nozīmīte-bīstamība' >Konts nav verificēts< / span >< span klasē = 'žetonu emblēmas informācija' >šī ir žetons< / span >
< span klasē = 'žetonu nozīmītes brīdinājums' > Konts gaida priekš apstiprinājums< / span >
< span klasē = 'nozīmītes nozīmīte-veiksme' >Konts pārbaudīts< / span >
Izvade
Kā Bootstrap emblēmai pievienot pielāgotus stilus?
Varat arī izmantot CSS, lai Bootstrap emblēmām pievienotu unikālu stilu. Labākai izpratnei nodarbība ar nosaukumu “ pasūtījuma ' ir pievienots sadaļā ' ” elements. Pēc tam tiek piemērotas šādas īpašības:
< span klasē = 'žetonu nozīmīte-bīstamības pasūtījums' >Konts nav verificēts < / span >< span klasē = 'žetonu emblēmas informācija pielāgota' >Šī ir emblēma< / span >
< span klasē = 'žetonu nozīmītes brīdinājuma pasūtījums' > Konts gaida priekš apstiprinājums< / span >
< span klasē = 'emblēmas veiksmes pasūtījums' >Konts pārbaudīts< / span >
Stila “pielāgota” klase
.pielāgots {fonta izmērs : 18 pikseļi ;
fonta svars : 100 ;
burtu atstarpes : 1 pikselis ;
polsterējums : 8 pikseļi 15 pikseļi ;
}
' .pielāgots ' tiek izmantots, lai piekļūtu ' pasūtījuma ” klase. Tam tiek piemērotas šādas īpašības:
- ' fonta izmērs ” pielāgo fonta lielumu.
- ' fonta svars ” norāda fonta biezumu.
- ' burtu atstarpes ” pievieno atstarpi starp burtiem.
- ' polsterējums ” nodrošina vietu ap elementa saturu.
Izvade
Kā pievienot ikonas Bootstrap emblēmai?
Mēs varam pievienot arī dažādas ikonas nozīmītēm. Lai to izdarītu, šim nolūkam var izmantot vairākas klases. Lai iegūtu papildinformāciju, apmeklējiet Fonts Awesome tīmekļa vietne.
Piemērs
HTML kodā pievienojiet “ ” elements. Šajā elementā ievietojiet iekļauto elementu “ ” vai “”, lai ievietotu ikonu klasi:
< span klasē = 'žetonu nozīmīte-bīstamības pasūtījums' > Konts nav verificēts< i klasē = 'tāls fa-laiku aplis' >< / i >
< / span >
< span klasē = 'emblēmas veiksmes pasūtījums' > Konts pārbaudīts
< i klasē = 'fas fa-user-check' >< / i >
< / span >
Izvade
Kā saistīt Bootstrap emblēmu ar citu avotu?
Lai Bootstrap emblēmas būtu noklikšķināmas, ievietojiet “ nozīmīte 'klases HTML' ' tagu un norādiet saistītās lapas atsauci sadaļā ' href ” atribūts:
< a href = '#' klasē = 'žetonu nozīmīte-bīstamības pasūtījums' >Atcelt< / a >< a href = '#' klasē = 'žetonu emblēmas informācija pielāgota' >Iesniegt< / a >
Izvade
Kā padarīt nozīmītes noapaļotas?
Lai emblēmas malas būtu noapaļotākas, pievienojiet klasi ' žetons-pill ”. Šī klase atbalsta lielāku ' robeža-rādiuss ” un horizontāli” polsterējums ” īpašības:
< span klasē = 'žetona nozīmīte-tablete emblēma-bīstamības pasūtījums' >Konts nav verificēts < / span >< span klasē = 'žetonu nozīmīte-tabletes nozīmītes brīdinājuma pasūtījums' > Konts gaida priekš apstiprinājums< / span >
< span klasē = 'žetonu nozīmīte-pill emblēma-veiksmes pasūtījums' >Konts pārbaudīts < / span >
Izvade
Kā izmantot Bootstrap emblēmu kā skaitītāju?
Lai izveidotu pogu ar skaitītāju, pievienojiet HTML '
Paziņojumi < span klasē = 'žetonu žetonu gaisma' > 4 < / span >
< / pogu >
Izvade
Tas viss bija par Bootstrap emblēmām un to attiecīgajām etiķetēm pakalpojumā Bootstrap.
Secinājums
Bootstrap ' nozīmīte ” klase tiek izmantota, lai vietnei pievienotu emblēmas. Piemēram, tādas klases kā ' žetons-bīstamība ”, “ žetonu informācija ”, un citas var izmantot, lai emblēmām pievienotu kontekstuālu informāciju kā to etiķeti. Dažas klases tiek izmantotas, lai emblēmām pievienotu ikonas, piemēram, “ tālu fa-laiku aplis ”, lai novietotu krusta apļa ikonu. Šajā ziņojumā ir sniegts visaptverošs ceļvedis par Bootstrap emblēmām un etiķetēm.