Ta članek bo pokrival naslednje vidike za prikaz uporabe značk Bootstrap:
- Kako uporabljati značko Bootstrap za dodatne informacije?
- Kako uporabiti značko Bootstrap za kontekstualne informacije?
- Kako dodati sloge po meri znački Bootstrap?
- Kako dodati ikone znački Bootstrap?
- Kako povezati značko Bootstrap z drugim virom?
- Kako narediti značke zaobljene?
- Kako uporabiti značko Bootstrap kot števec?
Kaj so značke Bootstrap?
Značke so osnovne komponente, ki se uporabljajo za prikaz indikatorja. Uporabite jih lahko na primer kot številčni števec za prikaz števila obvestil ali sporočil:
Uporabljajo se lahko tudi za prikaz dodatnih informacij, kot je prikazano na dani sliki:
Kako uporabljati značko Bootstrap za dodatne informacije?
Značke Bootstrap lahko dodate znotraj elementov HTML in jih uporabite kot dodatne informacije. Za predstavitev si oglejte spodnji primer.
Primer
Če želite uporabiti značko Bootstrap za dodatne informacije, najprej:
- Dodaj ' « in » ” elementi.
- Postavite ' ' element z ' značka « in » značka-* ” razrede. Razred »značka-*« se nanaša na značko z določeno barvo:
< h6 > Štipendije < razpon razred = 'značka sekundarno' > Novo < / razpon >< / h6 >
Opazimo lahko, da sta ustreznim naslovom dodani dve znački:
Kako uporabiti značko Bootstrap za kontekstualne informacije?
Značke Bootstrap se lahko uporabljajo tudi za zagotavljanje kontekstualnih informacij, kot je » značka-nevarnost ” prikaže značko v rdeči barvi in se lahko uporablja za prikaz nekaterih neuspešnih sporočil, kot je preklic, neveljavno ali več. ' značka-uspeh ” se uporablja tam, kjer želimo prikazati sporočilo o uspehu.
Primer
Poglejte dano kodo, da boste razumeli obravnavani scenarij:
< razpon razred = 'značka značka-nevarnost' >Račun ni preverjen< / razpon >< razpon razred = 'značka značka-informacije' >to je značka< / razpon >
< razpon razred = 'značka značka-opozorilo' >Račun v teku za odobritev< / razpon >
< razpon razred = 'značka značka-uspeh' >Račun preverjen< / razpon >
Izhod
Kako dodati sloge po meri znački Bootstrap?
Uporabite lahko tudi CSS, da značkam Bootstrap dodate nekaj edinstvenega sloga. Za boljše razumevanje razred z imenom ' po meri « je dodan znotraj » ” element. Nato se uporabijo naslednje lastnosti:
< razpon razred = 'značka značka-nevarnost po meri' >Račun ni preverjen < / razpon >< razpon razred = 'značka podatki o znački po meri' >To je značka< / razpon >
< razpon razred = 'značka, opozorilo po meri' >Račun v teku za odobritev< / razpon >
< razpon razred = 'značka značka-uspeh po meri' >Račun preverjen< / razpon >
Razred sloga “po meri”.
.po meri {velikost pisave : 18 slikovnih pik ;
teža pisave : 100 ;
razmik med črkami : 1px ;
oblazinjenje : 8 slikovnih pik 15 slikovnih pik ;
}
' .po meri ' se uporablja za dostop do ' po meri ” razred. Zanj so uporabljene naslednje lastnosti:
- “ velikost pisave ” prilagodi velikost pisave.
- “ teža pisave ” navaja debelino pisave.
- “ razmik med črkami ” doda presledek med črkama.
- “ oblazinjenje ” zagotavlja prostor okoli vsebine elementa.
Izhod
Kako dodati ikone znački Bootstrap?
Značkam lahko dodamo tudi različne ikone. Če želite to narediti, obstaja več razredov, ki jih je mogoče uporabiti za ta namen. Za več informacij obiščite Pisava Awesome Spletna stran.
Primer
V HTML dodajte » ” element. Znotraj tega elementa postavite inline element “ ” ali “”, da vstavite razred ikon:
< razpon razred = 'značka značka-nevarnost po meri' > Račun ni preverjen< jaz razred = 'daljni fa-kratni krog' >< / jaz >
< / razpon >
< razpon razred = 'značka značka-uspeh po meri' > Račun preverjen
< jaz razred = 'fas fa-preverjanje uporabnika' >< / jaz >
< / razpon >
Izhod
Kako povezati značko Bootstrap z drugim virom?
Če želite, da bo značke Bootstrap mogoče klikniti, postavite » značka » razredi znotraj HTML « « in navedite referenco povezane strani v » href ” atribut:
< a href = '#' razred = 'značka značka-nevarnost po meri' >Prekliči< / a >< a href = '#' razred = 'značka podatki o znački po meri' >Pošlji< / a >
Izhod
Kako narediti značke zaobljene?
Če želite, da so robovi značke bolj zaobljeni, dodajte razred ' značka-tabletka ”. Ta razred podpira večji ' mejni polmer ' in vodoravno ' oblazinjenje ” lastnosti:
< razpon razred = 'značka značka-tabletka značka-nevarnost po meri' >Račun ni preverjen < / razpon >< razpon razred = 'značka značka-tabletka značka-opozorilo po meri' >Račun v teku za odobritev< / razpon >
< razpon razred = 'značka značka-tabletka značka-uspeh po meri' >Račun preverjen < / razpon >
Izhod
Kako uporabiti značko Bootstrap kot števec?
Če želite ustvariti gumb s števcem, dodajte HTML '
Obvestila < razpon razred = 'značka značka-luč' > 4 < / razpon >
< / gumb >
Izhod
To je bilo vse o značkah Bootstrap in njihovih ustreznih oznakah v Bootstrapu.
Zaključek
Bootstrap ' značka ” se uporablja za dodajanje značk na spletno mesto. Na primer, razredi, kot je ' značka-nevarnost ”, “ informacije o znački «, in več lahko uporabite za dodajanje kontekstualnih informacij značkam kot njihovi oznaki. Nekateri razredi se uporabljajo za dodajanje ikon značkam, na primer » daleč fa-krat-krog ”, da postavite ikono križnega kroga. Ta objava ponuja obsežen vodnik o značkah in oznakah Bootstrap.