Ovaj će članak pokriti sljedeće perspektive kako bi se demonstrirala upotreba Bootstrap bedževa:
- Kako koristiti Bootstrap značku za dodatne informacije?
- Kako koristiti Bootstrap bedž za kontekstualne informacije?
- Kako dodati prilagođene stilove u Bootstrap značku?
- Kako dodati ikone Bootstrap bedžu?
- Kako povezati Bootstrap bedž s drugim izvorom?
- Kako napraviti zaobljene značke?
- Kako koristiti Bootstrap bedž kao brojač?
Što su Bootstrap značke?
Značke su osnovne komponente koje se koriste za prikaz indikatora. Na primjer, mogu se koristiti kao numerički brojač za prikaz broja obavijesti ili poruka:
Također se mogu koristiti za prikaz dodatnih informacija, kao što je prikazano na danoj slici:
Kako koristiti Bootstrap značku za dodatne informacije?
Bootstrap značke mogu se dodati unutar HTML elemenata za korištenje kao dodatne informacije. Pogledajte dolje navedeni primjer za demonstraciju.
Primjer
Za korištenje značke Bootstrap za dodatne informacije, prvo:
- Dodati ' ' i ' ' elementi.
- Postaviti ' ' element s ' Bedž ' i ' Bedž-* ” razreda. Klasa 'značka-*' odnosi se na značku navedene boje:
< h6 > Stipendije < raspon razreda = 'značka sekundarna' > Novi < / raspon >< / h6 >
Može se uočiti da su relevantnim naslovima dodane dvije oznake:
Kako koristiti Bootstrap bedž za kontekstualne informacije?
Bootstrap značke također se mogu koristiti za pružanje kontekstualnih informacija poput ' značka-opasnost ” prikazuje značku u crvenoj boji i može se koristiti za prikaz nekih neuspjelih poruka kao što su odustani, nevažeće ili više. ' značka-uspjeh ” koristi se tamo gdje želimo pokazati neku poruku o uspjehu.
Primjer
Pogledajte navedeni kod da biste razumjeli scenarij o kojem se raspravlja:
< raspon razreda = 'značka značka-opasnost' >Račun nije potvrđen< / raspon >< raspon razreda = 'značka značka-informacije' >ovo je značka< / raspon >
< raspon razreda = 'značka značka-upozorenje' >Račun na čekanju za odobrenje< / raspon >
< raspon razreda = 'značka značka-uspjeh' >Račun potvrđen< / raspon >
Izlaz
Kako dodati prilagođene stilove u Bootstrap značku?
Također možete koristiti CSS za dodavanje jedinstvenog stila Bootstrap značkama. Radi boljeg razumijevanja, klasa pod nazivom ' prilagođen ' dodaje se unutar ' ” element. Zatim se primjenjuju sljedeća svojstva:
< raspon razreda = 'značka značka-opasnost prilagođena' >Račun nije potvrđen < / raspon >< raspon razreda = 'značka prilagođena informacijama o znački' >Ovo je značka< / raspon >
< raspon razreda = 'upozorenje za značku prilagođeno' >Račun na čekanju za odobrenje< / raspon >
< raspon razreda = 'značka - prilagođeni uspjeh' >Račun potvrđen< / raspon >
Stil 'prilagođene' klase
.prilagođen {veličina fonta : 18 px ;
težina fonta : 100 ;
razmak između slova : 1px ;
podstava : 8 px 15 px ;
}
' .prilagođen ' koristi se za pristup ' prilagođen ” razred. Na njega se primjenjuju sljedeća svojstva:
- “ veličina fonta ” prilagođava veličinu fonta.
- “ težina fonta ” navodi debljinu slova.
- “ razmak između slova ” dodaje razmak između slova.
- “ podstava ” pruža prostor oko sadržaja elementa.
Izlaz
Kako dodati ikone Bootstrap bedžu?
Značkama također možemo dodati različite ikone. Da biste to učinili, postoji nekoliko klasa koje se mogu koristiti u tu svrhu. Za više informacija posjetite Font Strašan web stranica.
Primjer
U HTML dodajte ' ” element. Unutar ovog elementa postavite umetnuti element “ ” ili “” za umetanje klase ikone:
< raspon razreda = 'značka značka-opasnost prilagođena' > Račun nije potvrđen< ja razreda = 'daleki fa-vremenski krug' >< / ja >
< / raspon >
< raspon razreda = 'značka - prilagođeni uspjeh' > Račun je potvrđen
< ja razreda = 'fas fa-provjera korisnika' >< / ja >
< / raspon >
Izlaz
Kako povezati Bootstrap bedž s drugim izvorom?
Da biste omogućili klik na Bootstrap značke, postavite ' Bedž ” klase unutar HTML-a “ ” i navedite referencu povezane stranice u “ href ” atribut:
< a href = '#' razreda = 'značka značka-opasnost prilagođena' >Odustani< / a >< a href = '#' razreda = 'značka prilagođena informacijama o znački' >Pošalji< / a >
Izlaz
Kako napraviti zaobljene značke?
Da bi rubovi bedža bili zaobljeniji, dodajte klasu ' značka-pilula ”. Ova klasa podržava veći ' granični radijus ' i horizontalno ' podstava ' Svojstva:
< raspon razreda = 'značka značka-pilula značka-opasnost prilagođena' >Račun nije potvrđen < / raspon >< raspon razreda = 'značka značka-pilula značka-upozorenje prilagođeno' >Račun na čekanju za odobrenje< / raspon >
< raspon razreda = 'značka značka-pilula značka-uspjeh prilagođena' >Račun potvrđen < / raspon >
Izlaz
Kako koristiti Bootstrap bedž kao brojač?
Za izradu gumba s brojačem dodajte HTML '
Obavijesti < raspon razreda = 'značka značka-svjetlo' > 4 < / raspon >
< / dugme >
Izlaz
To je bilo sve o Bootstrap značkama i njihovim relevantnim oznakama u Bootstrapu.
Zaključak
Bootstrap ' Bedž ” klasa se koristi za dodavanje bedževa na web mjesto. Na primjer, klase poput ' značka-opasnost ”, “ informacije o znački “, a više se može koristiti za dodavanje kontekstualnih informacija značkama kao njihovoj oznaci. Neke se klase primjenjuju za dodavanje ikona značkama, poput ' daleko fa-puta-krug ” za postavljanje ikone križića. Ovaj post pruža opsežan vodič o Bootstrap značkama i oznakama.