Bifare în Bootstrap - Exemple pentru a implementa caseta de selectare în Bootstrap

• Introducere în caseta de selectare în Bootstrap
• Caseta de selectare Exemplul 1
• Caseta de selectare Exemplul 2

Introducere în caseta de selectare în Bootstrap

Bootstrap a folosit multe butoane cu un singur clic, dar uneori trebuie să alegem o opțiune. Alegerea opțiunii are două moduri în care unul este butonul radio, iar celălalt este o casetă de selectare. Butonul Radio are o singură opțiune de a alege dintre altele. În orice condiție, trebuie să alegem mai multe opțiuni care funcționează caseta de timp. Caseta de selectare are mai multe opțiuni pentru a alege dintre mai multe opțiuni. Caseta de selectare este utilizată pentru a alege opțiuni în mai multe opțiuni cu un clic pe caseta de selectare. Utilizarea butoanelor din caseta de selectare este întrebări cu alegere multiplă la examen atunci când întrebarea are răspunsuri multiple la o întrebare. Bootstrap are o clasă proprie de buton casetă, veți vedea mai jos.

Exemple pentru a implementa caseta de selectare în Bootstrap

Utilizatorii pot înțelege cum să implementeze o casetă de selectare și cum funcționează aceste butoane. Mai jos sunt exemple pentru a implementa caseta de selectare în Boostrap:

1. Caseta verticală
2. Caseta de selectare Inline

1. Caseta verticală

Un exemplu de casetă verticală este dat în următoarele.

Cod:



Bootstrap Example vertical checkbox





Caseta de selectare Exemplul 1

Care sunt șapte minuni din următoarea listă?

Taj Mahal

Piramida Egiptului

podul Londrei

turnul Eiffel

ieşire:

Descriere:

• Puteți vedea exemplul de mai sus al casetei de selectare verticală. Aceasta este o casetă de selectare implicită și nu are nevoie de nicio clasă sau entitate specială.
• Toată entitatea de formă vine vertical una câte una.
• Aceasta se folosește mai ales la examenele cu întrebări cu alegere multiplă pentru a cunoaște clar opțiunile și a nu se confunda cu caseta de selectare și eticheta. Fiecare folosește clasa de bifare cu etichetă. Pentru întrebare se folosește paragraful entitate

  .

• Puteți face clic pe butonul casetă de selectare, după ce faceți clic pe butonul bifă pentru a deveni vizibile.

2. Caseta de selectare în linie

Un exemplu de casă de selectare Inline este prezentat în următoarele.

Cod:



Bootstrap Example inline checkbox





Caseta de selectare Exemplul 2

hobby-uri:
pictură

dans

citind

ieşire:

Descriere:

• Exemplul de mai sus este o casetă de selectare în linie. Trebuie să folosim clasa formular-inline pentru ca alții să formeze o entitate care arată inline în formă.
• Pentru caseta de selectare în linie, este necesară clasificarea casetei-linie cu fiecare etichetă.
• Dacă doriți să utilizați caseta de validare sub orice formă, cu alte intrări, de asemenea, această dată este utilă o casetă de selectare inline.
• Toată caseta de selectare vine pe o singură linie.
• Puteți face clic pe butonul casetă de selectare, după ce faceți clic pe butonul bifă pentru a deveni vizibile.

Caseta de selectare folosind butoane

Checkbox în bootstrap a lucrat și cu butoanele cu câteva clase pentru a arăta mai elegant și mai elegant în formă. Clasa buton-grup-comutare, clasa buton trebuie să fie utilizată în și respectiv. Cu clasa de butoane-grup-comutare, data-toggle = clasa 'butoane' este necesară și în formular. În caseta, tipul trebuie să fie o casetă de selectare pentru a funcționa ca casetă. Haideți să vedem câteva exemple pentru a înțelege mai multe despre comutarea în caseta de selectare folosind bootstrap.

Cod:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




ieşire:

Descriere:

• Pentru acest exemplu, am folosit butonul principal, dar orice buton poate fi folosit pentru a face checkout, dar „completarea automată” trebuie să fie oprită pentru a nu salva date suplimentare.
• Dacă utilizatorul apasă pe buton, atunci este ales automat ca opțiune și în butonul de comutare, utilizatorul poate alege mai multe opțiuni doar făcând clic pe butoane.
• Aici avem patru opțiuni pentru a alege limbile, utilizatorii pot alege mai multe limbi.
• class = 'btn-group-toggle' este utilizat pentru stilul de introducere a formularului.
• Deoarece această comutare a datelor, JavaScript permite comutarea la butoane, astfel încât modul activ și nu activ poate fi interpretat.

Utilizarea butonului activ din caseta de selectare din Bootstrap

Dacă clasa activă a utilizatorului adaugă butonul, atunci acest buton este verificat automat și utilizatorii au opțiuni rămase de ales. Acest buton își schimbă culoarea pentru a obține semnul activat.

Să vedem următorul exemplu:

Cod:


Languages