Selles artiklis käsitletakse Bootstrapi märkide kasutamise demonstreerimiseks järgmisi vaatenurki.
- Kuidas kasutada Bootstrapi märki lisateabe saamiseks?
- Kuidas kasutada Bootstrapi märki kontekstuaalse teabe saamiseks?
- Kuidas lisada Bootstrapi märgile kohandatud stiile?
- Kuidas Bootstrapi märgile ikoone lisada?
- Kuidas linkida Bootstrapi märki teise allikaga?
- Kuidas teha märgid ümaraks?
- Kuidas kasutada Bootstrapi märki loendurina?
Mis on Bootstrap märgid?
Märgid on põhikomponendid, mida indikaatori näitamiseks kasutatakse. Näiteks saab neid kasutada numbriloendurina, et näidata teatiste või sõnumite arvu:
Neid saab kasutada ka lisateabe kuvamiseks, nagu on näidatud antud pildil:
Kuidas kasutada Bootstrapi märki lisateabe saamiseks?
Bootstrap märgid saab lisada HTML-i elementide sisse, et kasutada neid täiendava teabena. Tutvuge demonstratsiooniks allpool mainitud näitega.
Näide
Bootstrapi märgi kasutamiseks lisateabe saamiseks toimige kõigepealt järgmiselt.
- Lisama ' ” ja „ ” elemente.
- Asetage ' ' element koos ' märk ” ja „ märk-* ” klassid. Klass “märk-*” viitab määratud värviga märgile:
< h6 > Stipendiumid < ulatus klass = 'märk, teisejärguline märk' > Uus < / ulatus >< / h6 >
Võib täheldada, et vastavatele pealkirjadele on lisatud kaks märki:
Kuidas kasutada Bootstrapi märki kontekstuaalse teabe saamiseks?
Bootstrapi märke saab kasutada ka kontekstuaalse teabe edastamiseks, näiteks märk-oht ” kuvab märgi punase värviga ja seda saab kasutada mõne ebaõnnestunud sõnumi kuvamiseks, nagu tühistamine, kehtetu või muu. ' märgi-edu ” kasutatakse siis, kui tahame näidata edusõnumit.
Näide
Arutatud stsenaariumi mõistmiseks vaadake antud koodi:
< ulatus klass = 'märgimärk-oht' >Konto pole kinnitatud< / ulatus >< ulatus klass = 'märgi märk-teave' >see on märk< / ulatus >
< ulatus klass = 'märgi märgi hoiatus' >Konto ootel jaoks heakskiit< / ulatus >
< ulatus klass = 'märk - edu' >Konto kinnitatud< / ulatus >
Väljund
Kuidas lisada Bootstrapi märgile kohandatud stiile?
Saate kasutada ka CSS-i, et lisada Bootstrapi märkidele unikaalne stiil. Parema mõistmise huvides lisage klass nimega ' kohandatud ' lisatakse jaotisesse ' ” element. Seejärel rakendatakse järgmisi omadusi:
< ulatus klass = 'märgimärk-ohu tava' >Konto pole kinnitatud < / ulatus >< ulatus klass = 'märgi märgi teabe kohandatud' >See on märk< / ulatus >
< ulatus klass = 'märgi märgi hoiatuse komme' >Konto ootel jaoks heakskiit< / ulatus >
< ulatus klass = 'märgi edu kohandamine' >Konto kinnitatud< / ulatus >
Stiili 'kohandatud' klass
.kohandatud {fondi suurus : 18 pikslit ;
font-weight : 100 ;
tähevahed : 1px ;
polsterdus : 8 pikslit 15 pikslit ;
}
' .kohandatud ' kasutatakse juurdepääsuks ' kohandatud ” klass. Sellele rakendatakse järgmisi omadusi:
- “ fondi suurus ” kohandab fondi suurust.
- “ font-weight ” märgib fondi paksus.
- “ tähevahed ” lisab tähtede vahele tühikut.
- “ polsterdus ” annab ruumi elemendi sisu ümber.
Väljund
Kuidas Bootstrapi märgile ikoone lisada?
Märkidele saame lisada ka erinevaid ikoone. Selleks saab kasutada mitut klassi. Lisateabe saamiseks külastage Font Suurepärane veebisait.
Näide
HTML-is lisage ' ” element. Ikooniklassi sisestamiseks asetage sellesse elementi tekstisisene element „ ” või „”.
< ulatus klass = 'märgimärk-ohu tava' > Konto pole kinnitatud< i klass = 'kauge fa-time-ring' >< / i >
< / ulatus >
< ulatus klass = 'märgi edukuse kohandamine' > Konto kinnitatud
< i klass = 'fas fa-user-check' >< / i >
< / ulatus >
Väljund
Kuidas linkida Bootstrapi märki teise allikaga?
Bootstrapi märkide klõpsatavateks muutmiseks asetage märk ' klassid HTML-is ' ” märgendit ja esitage lingi lehe viide jaotises „ href ” atribuut:
< a href = '#' klass = 'märgimärk-ohu tava' >Tühista< / a >< a href = '#' klass = 'märgi märgi teabe kohandatud' >Esita< / a >
Väljund
Kuidas teha märgid ümaraks?
Märgi servade ümaramaks muutmiseks lisage klass ' märk-pill ”. See klass toetab suuremat piiri raadius 'ja horisontaalne' polsterdus ” omadused:
< ulatus klass = 'märk märk-pill märk-ohu kohandamine' >Konto pole kinnitatud < / ulatus >< ulatus klass = 'märk märk-pillimärk-hoiatus' >Konto ootel jaoks heakskiit< / ulatus >
< ulatus klass = 'märk märk-pillimärk-edu komme' >Konto kinnitatud < / ulatus >
Väljund
Kuidas kasutada Bootstrapi märki loendurina?
Loenduriga nupu loomiseks lisage HTML '
Märguanded < ulatus klass = 'märgi tuli' > 4 < / ulatus >
< / nuppu >
Väljund
See oli kõik Bootstrapi märkide ja nende asjakohaste siltide kohta Bootstrapis.
Järeldus
Bootstrap' märk ” klassi kasutatakse märkide lisamiseks veebisaidile. Näiteks sellised klassid nagu ' märk-oht ”, „ märgi-info ”, ja palju muud saab kasutada märkide kontekstipõhise teabe lisamiseks nende sildina. Märgidesse ikoonide lisamiseks kasutatakse mõnda klassi, näiteks ' kaugel fa-time-ring ', et asetada ristringi ikooni. See postitus on andnud põhjaliku juhendi Bootstrapi märkide ja siltide kohta.