Šiame straipsnyje bus aptariamos šios „Bootstrap“ ženklelių naudojimo perspektyvos:
- Kaip naudoti „Bootstrap“ ženklelį papildomai informacijai gauti?
- Kaip naudoti „Bootstrap“ ženklelį kontekstinei informacijai gauti?
- Kaip pridėti pasirinktinius stilius į „Bootstrap“ ženklelį?
- Kaip pridėti piktogramas į „Bootstrap“ ženklelį?
- Kaip susieti „Bootstrap“ ženklelį su kitu šaltiniu?
- Kaip padaryti, kad ženkleliai būtų suapvalinti?
- Kaip naudoti Bootstrap ženklelį kaip skaitiklį?
Kas yra „Bootstrap“ ženkleliai?
Ženkliukai yra pagrindiniai komponentai, naudojami indikatoriui rodyti. Pavyzdžiui, jie gali būti naudojami kaip skaitmeninis skaitiklis, rodantis pranešimų ar pranešimų skaičių:
Jie taip pat gali būti naudojami papildomai informacijai rodyti, pvz., pateiktame paveikslėlyje:
Kaip naudoti „Bootstrap“ ženklelį papildomai informacijai gauti?
„Bootstrap“ ženkleliai gali būti įtraukti į HTML elementus, kad būtų galima naudoti kaip papildomą informaciją. Peržiūrėkite toliau pateiktą demonstravimo pavyzdį.
Pavyzdys
Norėdami naudoti Bootstrap ženklelį papildomai informacijai, pirmiausia:
- Papildyti ' “ ir „ “ elementai.
- Padėkite ' elementas su „ ženklelis “ ir „ ženklelis-* “ klases. Klasė „ženklelis-*“ reiškia ženklelį su nurodyta spalva:
< h6 > Stipendijos < span klasė = 'ženklelis, antrasis' > Nauja < / span >< / h6 >
Galima pastebėti, kad prie atitinkamų antraščių pridedami du ženkleliai:
Kaip naudoti „Bootstrap“ ženklelį kontekstinei informacijai gauti?
„Bootstrap“ ženkleliai taip pat gali būti naudojami norint pateikti kontekstinę informaciją, pvz., „ ženklelis-pavojus “ rodomas raudonos spalvos ženklelis ir gali būti naudojamas kai kuriems nesėkmingiems pranešimams, pvz., atšaukti, negaliojantiems ar kt., rodyti. „ ženklelis-sėkmė “ naudojamas ten, kur norime parodyti sėkmės pranešimą.
Pavyzdys
Pažvelkite į pateiktą kodą, kad suprastumėte aptartą scenarijų:
< span klasė = 'ženklelis, ženklelis - pavojus' >Paskyra nepatvirtinta< / span >< span klasė = 'ženklelio informacija' >tai ženklelis< / span >
< span klasė = 'įspėjimas apie ženklelį' >Sąskaita Laukiama dėl pritarimas < / span >
< span klasė = 'ženklelis - sėkmė' >Paskyra patvirtinta< / span >
Išvestis
Kaip pridėti pasirinktinius stilius į „Bootstrap“ ženklelį?
Taip pat galite naudoti CSS, kad pridėtumėte unikalų „Bootstrap“ ženklelių stilių. Kad būtų geriau suprasti, klasė pavadinimu „ paprotys “ yra įtrauktas į „ “ elementas. Tada taikomos šios savybės:
< span klasė = „ženklelio ženklelio pavojaus paprotys“ >Paskyra nepatvirtinta < / span >< span klasė = „ženklelio ženklelio informacija tinkinta“ >Tai ženklelis< / span >
< span klasė = „ženklelio įspėjimo paprotys“ >Sąskaita Laukiama dėl pritarimas < / span >
< span klasė = „ženklelio sėkmės paprotys“ >Paskyra patvirtinta< / span >
Stiliaus „custom“ klasė
.pagal užsakymą {šrifto dydis : 18 pikselių ;
šrifto svoris : 100 ;
tarpai tarp raidžių : 1px ;
kamšalas : 8px 15 piks ;
}
„ .pagal užsakymą “ naudojamas norint pasiekti „ paprotys ' klasė. Jai taikomos šios savybės:
- “ šrifto dydis “ koreguoja šrifto dydį.
- “ šrifto svoris “ nurodomas šrifto storis.
- “ tarpai tarp raidžių “ prideda tarpo tarp raidžių.
- “ kamšalas “ suteikia vietos aplink elemento turinį.
Išvestis
Kaip pridėti piktogramas į „Bootstrap“ ženklelį?
Prie ženklelių taip pat galime pridėti įvairių piktogramų. Norėdami tai padaryti, yra keletas klasių, kurios gali būti naudojamos šiam tikslui. Norėdami gauti daugiau informacijos, apsilankykite Šriftas Nuostabus Interneto svetainė.
Pavyzdys
HTML pridėkite „ “ elementas. Į šį elementą įdėkite eilutinį elementą „ “ arba „“, kad įterptumėte piktogramų klasę:
< span klasė = „ženklelio ženklelio pavojaus paprotys“ > Paskyra nepatvirtinta< i klasė = 'toli fa-time-cycle' >< / i >
< / span >
< span klasė = „ženklelio sėkmės paprotys“ > Paskyra patvirtinta
< i klasė = „fas fa-user-check“ >< / i >
< / span >
Išvestis
Kaip susieti „Bootstrap“ ženklelį su kitu šaltiniu?
Kad Bootstrap ženklelius būtų galima spustelėti, įdėkite „ ženklelis 'klasės HTML' “ žymą ir pateikite susieto puslapio nuorodą „ href “ atributas:
< a href = '#' klasė = „ženklelio ženklelio pavojaus paprotys“ >Atšaukti< / a >< a href = '#' klasė = „ženklelio ženklelio informacija tinkinta“ >Pateikti< / a >
Išvestis
Kaip padaryti, kad ženkleliai būtų suapvalinti?
Kad ženklelio kraštai būtų labiau suapvalinti, pridėkite klasę ' ženklelis-piliulė “. Ši klasė palaiko didesnį pasienio spindulys “ ir horizontaliai “ kamšalas “ savybės:
< span klasė = „ženklelis ženklelis-pilis ženklelis-pavojingumo paprotys“ >Paskyra nepatvirtinta < / span >< span klasė = „ženklelis, ženklelis-tabletė, įspėjimas apie ženklelį“ >Sąskaita Laukiama dėl pritarimas < / tarpas >
< tarpas klasė = „ženklelio ženklelio-piliulės ženklelio sėkmės paprotys“ >Paskyra patvirtinta < / tarpas >
Išvestis
Kaip naudoti Bootstrap ženklelį kaip skaitiklį?
Norėdami sukurti mygtuką su skaitikliu, pridėkite HTML “
Pranešimai < tarpas klasė = „ženklelio lemputė“ > 4 < / tarpas >
< / mygtuką >
Išvestis
Tai buvo viskas apie „Bootstrap“ ženklelius ir atitinkamas jų etiketes „Bootstrap“.
Išvada
„Bootstrap“ ženklelis “ klasė naudojama ženkleliams į svetainę įtraukti. Pavyzdžiui, tokios klasės kaip „ ženklelis-pavojus “, „ ženklelis-informacija “ ir daugiau gali būti naudojami kontekstinei informacijai pridėti prie ženklelių kaip etiketės. Kai kurios klasės taikomos piktogramoms pridėti prie ženklelių, pvz., „ toli fa-time-ratas “, jei norite įdėti kryžminio apskritimo piktogramą. Šiame įraše pateikiamas išsamus „Bootstrap“ ženklelių ir etikečių vadovas.