Märkeruut Bootstrapis - Näited ruutu Bootstrap rakendamiseks

• Sissejuhatus ruutu Bootstrap
• Märkeruudu näide 1
• Märkeruudu näide 2

Sissejuhatus ruutu Bootstrap

Bootstrap kasutas palju nuppe ühe klõpsuga, kuid mõnikord peame valima valiku. Valiku tegemiseks on kahel viisil: üks on raadionupp ja teine ​​märkeruut. Raadionupul on ainult üks võimalus teiste hulgast valida. Igal juhul peame valima rohkem kui ühe võimaluse, mis on aja ruut töötav. Märkeruudul on paljude võimaluste hulgast valida mitu võimalust. Märkeruutu kasutatakse mitme valiku valimiseks, klõpsates seda ruutu. Märkeruudu nuppude kasutamine on eksamil valikvastustega küsimused, kui küsimusele on ühele küsimusele mitu vastust. Bootstrapil on oma ruut nuppu, näete allpool.

Näited ruutu Bootstrap rakendamiseks

Kasutajad saavad aru, kuidas ruutu rakendada ja nende nuppude toimimist. Allpool on näited Boostrapi ruudu rakendamiseks:

1. Vertikaalne ruut
2. Sisselülitatud ruut

1. Vertikaalne ruut

Vertikaalse märkeruudu näide on toodud allpool.

Kood:



Bootstrap Example vertical checkbox





Märkeruudu näide 1

Millised on seitse imet järgmises loendis?

Taj Mahal

Egiptuse püramiid

Londoni sild

Eiffeli torn

Väljund:

Kirjeldus:

• Näete ülaltoodud vertikaalse märkeruudu näidet. See on vaikimisi märkeruut ja see ei vaja eriklassi ega olemit.
• Kõik vormiüksused tulevad ükshaaval vertikaalselt.
• Seda kasutatakse enamasti valikvastustega küsimuste eksamitel, et teada saada valikuid selgelt, mitte segamini ruutu ja sildiga. Igaüks kasutab märgistusega ruutu klassi. Küsimuseks kasutab lõigu üksust

  .

• Kui klõpsate nupul, klõpsake klõpsates märkeruudu nuppu, kui linnuke on nähtav.

2. Sisselülitatud ruut

Sisselülitatud märkeruudu näide on toodud allpool.

Kood:



Bootstrap Example inline checkbox





Märkeruudu näide 2

hobid:
maalimine

tantsimine

lugemine

Väljund:

Kirjeldus:

• Ülaltoodud näide on tekstisisene märkeruut. Peame kasutama vormi-sisest klassi teiste jaoks, moodustades üksuse, mis näitab vormis olevat.
• Sisselülitatud märkeruudu jaoks klasside märkeruut on vajalik iga sildiga.
• Kui soovite kasutada ruutu mis tahes kujul koos teiste sisenditega, on sel juhul kasulik ka tekstisisene ruut.
• Kõik märkeruudud on ühes reas.
• Kui klõpsate nupul, klõpsake klõpsates märkeruudu nuppu, kui linnuke on nähtav.

Märkeruut nuppude abil

Bootpüki märkeruut töötas välja ka mõne klassi nuppudega, et vormilt stiilne ja elegantne välja näha. Klassi nupp - rühmade vahetamine, nupuklassi tuleb kasutada vastavalt ja vastavalt. Nuppude rühmade vahetamise klassiga on vajalik ka kujul andmete nupp = 'nupud'. Tüübis peab olema ruut, et see ruutuks töötada. Vaatame mõningaid näiteid, et saada lisateavet ruutude alglaadimisribaga ümberlülitamise kohta.

Kood:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Väljund:

Kirjeldus:

• Selle näite jaoks kasutasime peamist nuppu, kuid kassas saab kasutada ükskõik millist nuppu, kuid lisaandmete mitte salvestamiseks peab automaatne täitmine olema välja lülitatud.
• Kui kasutaja vajutab nuppu, valitakse see automaatselt suvandiks ja lülitusnupus saab kasutaja valida veel üksikuid nuppe klõpsates.
• Siin on meil keelte valimiseks neli võimalust, kasutajad saavad valida mitu keelt.
• class = 'btn-group-toggle' kasutatakse vormi sisestamiseks stiiliks.
• Kuna see andmete ümberlülitamine võimaldab JavaScripti nuppudele lülitamist, saab tõlgendada aktiivset ja mitte aktiivset režiimi.

Märkeruudu aktiivse nupu kasutamine Bootstrapis

Kui kasutaja aktiivne klass lisab nuppu, siis kontrollitakse seda nuppu automaatselt ja kasutajatel on veel valikuvõimalusi. See nupp muudab aktiveeritud märgi saamiseks värvi.

Vaatame järgmist näidet:

Kood:


Languages