Ez a cikk a következő szempontokat tárgyalja a Bootstrap jelvények használatának bemutatására:
- Hogyan használhatom a Bootstrap jelvényt további információkért?
- Hogyan használjuk a Bootstrap jelvényt kontextuális információkhoz?
- Hogyan adhatunk egyéni stílusokat a Bootstrap-jelvényhez?
- Hogyan adjunk ikonokat a Bootstrap jelvényhez?
- Hogyan lehet a Bootstrap jelvényt másik forráshoz kapcsolni?
- Hogyan lehet a jelvényeket lekerekíteni?
- Hogyan használjuk a Bootstrap-jelvényt számlálóként?
Mik azok a Bootstrap jelvények?
A jelvények azok az alapvető összetevők, amelyek a mutató megjelenítésére szolgálnak. Például numerikus számlálóként használhatók az értesítések vagy üzenetek számának megjelenítésére:
Használhatók további információk megjelenítésére is, mint például az adott képen:
Hogyan használhatom a Bootstrap jelvényt további információkért?
Bootstrap jelvények hozzáadhatók a HTML-elemekhez, amelyek további információként használhatók. Tekintse meg az alább említett példát a demonstrációhoz.
Példa
A Bootstrap jelvény további információkhoz való használatához először:
- Add hozzá ” és „ ” elemeket.
- Helyezze a ' ' elem a ' jelvény ” és „ jelvény-* ” osztályok. A „jelvény-*” osztály a megadott színű jelvényre vonatkozik:
< h6 > Ösztöndíjak < span osztály = 'jelvény, másodlagos jelvény' > Új < / span >< / h6 >
Megfigyelhető, hogy két jelvényt adnak a megfelelő címsorokhoz:
Hogyan használjuk a Bootstrap jelvényt kontextuális információkhoz?
A Bootstrap jelvények kontextuális információk biztosítására is használhatók, például ' jelvény-veszély ” a jelvényt piros színben jeleníti meg, és néhány sikertelen üzenet megjelenítésére használható, például mégse, érvénytelen vagy egyebek. Az ' jelvény-siker ” ott használatos, ahol valamilyen sikerüzenetet szeretnénk mutatni.
Példa
Tekintse meg a megadott kódot a tárgyalt forgatókönyv megértéséhez:
< span osztály = 'jelvény-jelvény-veszély' >A fiók nincs ellenőrizve< / span >< span osztály = 'jelvény-jelvény-információ' >ez a jelvény< / span >
< span osztály = 'jelvényjelvény-figyelmeztetés' >Fiók függőben számára jóváhagyás< / span >
< span osztály = 'jelvény jelvény-siker' >A fiók ellenőrizve< / span >
Kimenet
Hogyan adhatunk egyéni stílusokat a Bootstrap-jelvényhez?
A CSS segítségével egyedi stílust is hozzáadhat a Bootstrap jelvényekhez. A jobb megértés érdekében egy osztály a következővel: egyedi ' hozzáadásra kerül a ' ” elemet. Ezután a következő tulajdonságok kerülnek alkalmazásra:
< span osztály = 'jelvény jelvény-veszélyes szokás' >A fiók nincs ellenőrizve < / span >< span osztály = 'jelvény jelvény-információ egyéni' >Ez a jelvény< / span >
< span osztály = 'jelvényjelvény-figyelmeztető szokás' >Fiók függőben számára jóváhagyás< / span >
< span osztály = 'jelvény jelvény-siker szokás' >A fiók ellenőrizve< / span >
Stílus „egyedi” osztály
.egyedi {betűméret : 18 képpont ;
font-weight : 100 ;
betűtávolságok : 1 képpont ;
párnázás : 8 képpont 15 képpont ;
}
Az ' .egyedi ' a ' egyedi ' osztály. A következő tulajdonságokat alkalmazzák rá:
- ' betűméret ” állítja be a betűméretet.
- ' font-weight ” jelzi a betűtípus vastagságát.
- ' betűtávolságok ” szóközt ad a betűk közé.
- ' párnázás ” helyet biztosít az elem tartalma körül.
Kimenet
Hogyan adjunk ikonokat a Bootstrap jelvényhez?
A kitűzőket különböző ikonokkal is kiegészíthetjük. Ehhez több osztály is használható erre az ügyre. További információért keresse fel a Font Awesome weboldal.
Példa
A HTML-ben adjon hozzá egy „ ” elemet. Ezen az elemen belül helyezze el a „ ” vagy „” soron belüli elemet az ikonosztály beszúrásához:
< span osztály = 'jelvény jelvény-veszélyes szokás' > A fiók nincs ellenőrizve< én osztály = 'messzi fa-time-kör' >< / én >
< / span >
< span osztály = 'jelvény jelvény-siker szokás' > A fiók ellenőrizve
< én osztály = 'fas fa-user-check' >< / én >
< / span >
Kimenet
Hogyan lehet a Bootstrap jelvényt másik forráshoz kapcsolni?
A Bootstrap jelvények kattinthatóvá tételéhez helyezze el a „ jelvény ' osztályok a HTML-ben ' ” címkét, és adja meg a hivatkozott oldal hivatkozását a „ href ' tulajdonság:
< a href = '#' osztály = 'jelvény jelvény-veszélyes szokás' >Mégse< / a >< a href = '#' osztály = 'jelvény jelvény-információ egyéni' >Küldés< / a >
Kimenet
Hogyan lehet a jelvényeket lekerekíteni?
A jelvény éleinek lekerekítéséhez adjon hozzá egy osztályt ' jelvény-pilla ”. Ez az osztály támogatja a nagyobb ' határ-sugár 'és vízszintes' párnázás ” tulajdonságai:
< span osztály = 'jelvény jelvény-tabletta jelvény-veszély szokás' >A fiók nincs ellenőrizve < / span >< span osztály = 'jelvény jelvény-pilla jelvény-figyelmeztető szokás' >Fiók függőben számára jóváhagyás< / span >
< span osztály = 'jelvény jelvény-pilla jelvény-siker szokás' >A fiók ellenőrizve < / span >
Kimenet
Hogyan használjuk a Bootstrap-jelvényt számlálóként?
Számláló gomb létrehozásához adjon hozzá egy HTML-t '
Értesítések < span osztály = 'jelvény-jelvény-fény' > 4 < / span >
< / gomb >
Kimenet
Ennyi volt a Bootstrap jelvényekről és a megfelelő címkéikről a Bootstrapben.
Következtetés
The Bootstrap jelvény ” osztályt arra használjuk, hogy jelvényeket adjunk a webhelyhez. Például az olyan osztályok, mint a „ jelvény-veszély ”, „ jelvény-információ ”, és még több használható kontextuális információk hozzáadására a jelvényekhez címkeként. Egyes osztályok ikonokat adnak hozzá a jelvényekhez, mint pl. messze fa-time-kör ” egy kereszt-kör ikon elhelyezéséhez. Ez a bejegyzés átfogó útmutatót nyújt a Bootstrap jelvényekről és címkékről.