Tämä artikkeli opastaa sinua:
- Kuinka tehdä painikkeita Bootstrapissa?
- Kuinka luoda ääriviivapainikkeita Bootstrapissa?
- Kuinka säätää Bootstrap-painikkeiden kokoa?
- Kuinka tehdä lohkotason painike Bootstrapissa?
- Kuinka luoda aktiivisia tilapainikkeita Bootstrapissa?
- Kuinka luoda käytöstä poistettuja tilapainikkeita Bootstrapissa?
Kuinka tehdä painikkeita Bootstrapissa?
Bootstrap' btn ” -luokkaa käytetään painikkeiden luomiseen. Voit lisätä tyylikkäitä painikkeita käyttämällä ' btn 'luokka väriluokalla, kuten ' btn-menestys ” luodaksesi vihreän painikkeen.
HTML:ssä '
Jos haluat selkeän käsitteen, katso alla oleva esimerkki.
Esimerkki
Luo HTML-tiedostossa painikkeita käyttämällä erilaisia tunnisteita seuraavasti:
- Lisätä '
' ja ' 'elementtejä ja määritä ne' btn ' ja ' btn-ensisijainen ' luokat. - Lisää sitten '
'-tunniste tyypillä' -painiketta ”. Anna sille ' btn ' ja ' btn-menestys ” muotoilemaan kaksi ensimmäistä painiketta siniseksi ja kolmanneksi vihreäksi:
< a luokkaa = 'btn btn-primary' href = '#' > Avata < / a >
< syöttö tyyppi = 'painike' luokkaa = 'btn btn-success' arvo = 'Hae' >
Lähtö
Kuinka luoda ääriviivapainikkeita Bootstrapissa?
Jos haluat lisätä painikkeiden ääriviivoja, Bootstrap ' btn-outline-* ” luokkaa käytetään. Sen syntaksissa' * ” edustaa ääriviivan väriä. Esimerkiksi, ' btn-outline-vaara ' sijoittaa punaisen ääriviivan ' btn-outline-primary ” määrittää siniset ääriviivat ja paljon muuta.
Analysoi alla oleva koodi:
< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-outline-primary' >Seuraava< / -painiketta >< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-outline-vaara' >Peruuta< / -painiketta >
< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-outline-success' >menestys< / -painiketta >
Voidaan havaita, että ' Seuraava ' -painikkeessa on sininen ääriviiva, ' Peruuttaa ' -painike punaisella ääriviivalla ja ' Menestys ”-painike on muotoiltu vihreällä ääriviivalla:
Kuinka säätää Bootstrap-painikkeiden kokoa?
Joitakin Bootstrap-luokkia käytetään säätämään painikkeiden kokoa, kuten:
- ' btn-lg ” -luokkaa käytetään suuren painikkeen luomiseen. Tämä luokka voi suurentaa fonttikokoa ja täyttöä.
- ' btn-md ” luo keskikokoisen painikkeen.
- ' btn-sm ” luo pienen painikkeen.
Esimerkki
Luomme nyt kolme painiketta, joilla on eri kokoisia ja itsestään selviä nimiä:
< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-toissijainen btn-lg' >Suuri< / -painiketta >< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-warning btn-md' >keskikokoinen< / -painiketta >
< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-vaara btn-sm' >Pieni< / -painiketta >
Lähtö
Kuinka tehdä lohkotason painike Bootstrapissa?
Lohkotason painikkeet ovat ne, jotka pitävät koko leveän koon. Lohkotason painikkeiden luomiseksi ' btn-lohko ”-luokkaa käytetään seuraavasti
< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-warning btn-block' > painike< / -painiketta >< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-toissijainen btn-lohko' >painike< / -painiketta >
Lähtö
Kuinka luoda aktiivisia tilapainikkeita Bootstrapissa?
Aktiivisen tilan painikkeet viittaavat tällä hetkellä aktiivisiin painikkeisiin. Nämä painikkeet ovat hieman normaalia tummempia. Tällaisten painikkeiden luomiseksi Bootstrap ' aktiivinen ” luokkaa käytetään.
Esimerkki
Alla oleva koodi luo kaksi painiketta. Ensimmäinen on normaalitilassa, kun taas toista käytetään ' aktiivinen ”luokka:
< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-success' >menestys< / -painiketta >< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-success active' >menestys< / -painiketta >
Lähtö
Kuinka luoda käytöstä poistettuja tilapainikkeita Bootstrapissa?
Pois käytöstä poistetut painikkeet viittaavat painikkeisiin, joita ei voi klikata ja joita ei voi käyttää. Bootstrapissa ' liikuntarajoitteinen ” -luokkaa käytetään luomaan estetty tilapainike. ' liikuntarajoitteinen ”-attribuuttia voidaan käyttää myös tähän tarkoitukseen.
Esimerkki
Katso alla oleva esimerkki:
- Ensimmäinen painike ei ole pois käytöstä.
- Toinen käyttää ' liikuntarajoitteinen ” luokka luodaksesi käytöstä poistetun tilapainikkeen.
- Kolmas käyttää ' liikuntarajoitteinen 'määrite:
< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-success poistettu käytöstä' >menestys< / -painiketta >
< -painiketta tyyppi = 'painike' luokkaa = 'btn btn-success' pois käytöstä>Onnistui< / -painiketta >
Lähtö
Olemme käsitelleet erilaisia Bootstrap-painikkeisiin ja niiden tyyliin liittyviä näkökohtia CSS:ssä.
Johtopäätös
' btn ” -luokkaa käytetään yksinkertaisen Bootstrap-painikkeiden luomiseen. Jos haluat luoda värillisiä ja ääriviivapainikkeita, ' btn-* ' ja ' btn-outline-* ' luokkia käytetään, jos ' * ” symboloi mitä tahansa väriluokkaa. Esimerkiksi, ' btn-varoitus ' luo keltaisen painikkeen ' btn-outline-varoitus ” luo keltaisen ääriviivapainikkeen ja paljon muuta. Painikkeiden aktivoimiseksi tai poistamiseksi käytöstä käytetään 'aktiivinen' ja 'pois käytöstä' -luokkia, vastaavasti. Tämä viesti tarjosi kattavan oppaan Bootstrap-painikkeista.