Ez a cikk a következőket tanítja Önnek:
- Hogyan készítsünk gombokat a Bootstrapben?
- Hogyan készítsünk Outline gombokat a Bootstrapben?
- Hogyan állítsuk be a Bootstrap gombok méretét?
- Hogyan készítsünk blokkszintű gombot a Bootstrapben?
- Hogyan hozhatunk létre aktív állapot gombokat a Bootstrapben?
- Hogyan lehet letiltott állapotgombokat létrehozni a Bootstrapben?
Hogyan készítsünk gombokat a Bootstrapben?
The Bootstrap btn ” osztályt gombok létrehozására használják. Stílusos gombok hozzáadásához használja a „ btn ” osztály a színosztállyal, például „ btn-siker ” zöld gomb létrehozásához.
A HTML-ben a „
Az egyértelmű koncepció érdekében nézze meg az alábbi példát.
Példa
A HTML-fájlban kövesse az alábbi lépéseket a gombok különböző címkék használatával történő létrehozásához:
- Add hozzá
” és „ ' elemeket, és rendelje hozzá őket' btn ” és „ btn-elsődleges ” osztályok. - Ezután adjon hozzá egy „
' címke a következővel: ' gomb ”. Rendelje hozzá a „ btn ” és „ btn-siker ” az első két gomb kékre, a harmadik pedig zöldre formázásához:
< a osztály = 'btn btn-primary' href = '#' > Nyisd ki < / a >
< bemenet típus = 'gomb' osztály = 'btn btn-siker' érték = 'Keresés' >
Kimenet
Hogyan készítsünk Outline gombokat a Bootstrapben?
A gomb körvonalainak hozzáadásához a Bootstrap ' btn-outline-* ” osztályt használják. A szintaxisában' * ” itt a körvonal színét jelenti. Például, ' btn-outline-veszély ' helyezi el a piros körvonalat, ' btn-outline-primary ” állítja be a kék körvonalat, és így tovább.
Elemezze az alábbi kódot:
< gomb típus = 'gomb' osztály = 'btn btn-outline-primary' >Következő< / gomb >< gomb típus = 'gomb' osztály = 'btn btn-outline-danger' >Mégse< / gomb >
< gomb típus = 'gomb' osztály = 'btn btn-outline-siker' >Siker< / gomb >
Megfigyelhető, hogy a „ Következő ' gomb kék körvonalú, a ' Megszünteti ” gomb piros körvonallal, és a „ Siker ” gombot zöld körvonallal díszítették:
Hogyan állítsuk be a Bootstrap gombok méretét?
Egyes Bootstrap osztályokat alkalmaznak a gombok méretének beállítására, például:
- ' btn-lg ” osztályt alkalmazzuk egy nagy gomb létrehozásához. Ez az osztály növelheti a betűméretet és a kitöltést.
- ' btn-md ” egy közepes méretű gombot hoz létre.
- ' btn-sm ” létrehoz egy kis gombot.
Példa
Most három, különböző méretű és magától értetődő nevű gombot fogunk létrehozni:
< gomb típus = 'gomb' osztály = 'btn btn-szekunder btn-lg' >Nagy< / gomb >< gomb típus = 'gomb' osztály = 'btn btn-warning btn-md' >közepes< / gomb >
< gomb típus = 'gomb' osztály = 'btn btn-danger btn-sm' >Kicsi< / gomb >
Kimenet
Hogyan készítsünk blokkszintű gombot a Bootstrapben?
A blokkszintű gombok azok, amelyek a teljes szélességű méretet tartják. A blokkszintű gombok létrehozásához a „ btn-blokk ” osztályt a következőképpen használjuk
< gomb típus = 'gomb' osztály = 'btn btn-warning btn-block' > gomb< / gomb >< gomb típus = 'gomb' osztály = 'btn btn-másodlagos btn-blokk' >gomb< / gomb >
Kimenet
Hogyan hozhatunk létre aktív állapot gombokat a Bootstrapben?
Az aktív állapot gombok az éppen aktív gombokra vonatkoznak. Ezek a gombok valamivel sötétebbek a normálnál. Ilyen gombok létrehozásához a Bootstrap ' aktív ” osztály kerül felhasználásra.
Példa
Az alábbi kód két gombot hoz létre. Az első normál állapotban van, míg a másik a „ aktív ' osztály:
< gomb típus = 'gomb' osztály = 'btn btn-siker' >Siker< / gomb >< gomb típus = 'gomb' osztály = 'btn btn-success active' >Siker< / gomb >
Kimenet
Hogyan lehet letiltott állapotgombokat létrehozni a Bootstrapben?
A letiltott állapotú gombok azokra a gombokra utalnak, amelyek nem kattinthatók és nem használhatók. A Bootstrapben a „ Tiltva ” osztályt egy letiltott állapotgomb létrehozására használják. Az ' Tiltva ” attribútum is használható erre a célra.
Példa
Tekintse meg az alábbi példát:
- Az első gomb nincs letiltott állapotban.
- A második a „ Tiltva ” osztályt letiltott állapotgomb létrehozásához.
- A harmadik a „ Tiltva ' tulajdonság:
< gomb típus = 'gomb' osztály = 'btn btn-success letiltva' >Siker< / gomb >
< gomb típus = 'gomb' osztály = 'btn btn-siker' letiltva>Sikeres< / gomb >
Kimenet
A Bootstrap gombokkal és azok CSS-beli stílusával kapcsolatos különböző szempontokat ismertettük.
Következtetés
Az ' btn ” osztályt használják egyszerű kialakítású Bootstrap gombok létrehozására. Színes és körvonalas gombok létrehozásához a „ btn-* ” és „ btn-outline-* ' osztályokat használják, ahol a ' * ” bármely színosztályt szimbolizál. Például, ' btn-figyelmeztetés ' létrehoz egy sárga gombot, ' btn-outline-warning ” létrehoz egy sárga körvonalú gombot, és még sok mást. A gombok aktiválásához vagy letiltásához az „aktív” és a „letiltott” osztályok kerülnek alkalmazásra. Ez a bejegyzés átfogó útmutatót nyújtott a Bootstrap gombokhoz.