Kryssrutan i Bootstrap - Exempel på Implementera kryssrutan i Bootstrap

• Introduktion till kryssrutan i Bootstrap
• Exempel 1 i kryssruta
• Exempel 2 i kryssrutan

Introduktion till kryssrutan i Bootstrap

Bootstrap använde många knappar med ett klick men ibland måste vi välja ett alternativ. Att välja alternativ har två sätt en är alternativknappen och en annan är en kryssruta. Radioknappen har bara ett alternativ att välja mellan andra. I vilket som helst skick måste vi välja mer än ett alternativ som är tidsrutan fungerar. Kryssrutan har flera alternativ att välja mellan de många alternativen. Kryssrutan används för att välja alternativ i flera val med ett klick på kryssrutan. Användningen av kryssruteknappar är flervalsfrågor i tentamen när frågan har flera svar på en fråga. Bootstrap har en egen klocka för kryssruta-knappen, du ser nedan.

Exempel på Implementera kryssrutan i Bootstrap

Användare kan förstå hur man implementerar en kryssruta och hur dessa knappar fungerar. Nedan följer exemplen för att implementera kryssrutan i Boostrap:

1. Vertikal kryssruta
2. Inline Checkbox

1. Vertikal kryssruta

Exempel på vertikal kryssruta ges i följande.

Koda:



Bootstrap Example vertical checkbox





Exempel 1 i kryssruta

Vilka är sju underverk i följande lista?

Taj Mahal

Egypten Pyramid

London Bridge

Eiffeltornet

Produktion:

Beskrivning:

• Du kan se exemplet ovan med den vertikala kryssrutan. Detta är en standardruta och behöver inte någon speciell klass eller enhet.
• All formenhet kommer in vertikalt en efter en.
• Detta används mest i flervalsfrågor för att känna till alternativen tydligt och inte förväxlas med kryssrutan och etiketten. Alla använder klassen av kryssrutan med etikett. För ifrågasätter använder avsnittet enhet

  .

• Du kan klicka på kryssrutan, efter att du har klickat på knappen kryssmarkering blir synlig.

2. Inline Checkbox

Exempel på Inline Checkbox ges i följande.

Koda:



Bootstrap Example inline checkbox





Exempel 2 i kryssrutan

hobbies:
målning

dans

läsning

Produktion:

Beskrivning:

• Exemplet ovan är en inline-kryssruta. Vi måste använda form-inline klassen för att andra ska bilda en enhet som visar inline i form.
• För inline-kryssrutan krävs klass-checkbox-inline för varje etikett.
• Om du vill använda kryssrutan i någon form med andra ingångar också den gången är en inline-kryssruta användbar.
• Alla kryssrutor finns i en rad.
• Du kan klicka på kryssrutan, efter att du har klickat på knappen kryssmarkering blir synlig.

Kryssruta med knappar

Kryssrutan i bootstrap fungerade också med knapparna med några klasser för att se snyggare och elegantare ut. Klass knapp-grupp-växla, knapp klass måste användas i respektive. Med knappen för gruppgrupp-växling behövs också data-toggle = 'knappar' -klassen i formen. I den måste typen vara en kryssruta för att fungera som kryssrutan. Låt oss se några exempel för att förstå mer om att växla i kryssrutan med bootstrap.

Koda:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Produktion:

Beskrivning:

• I det här exemplet använde vi primärknappen men valfri knapp kan användas för utcheckning men 'autocomplete' måste vara av för att inte spara extra data.
• Om användaren trycker på knappen väljs den automatiskt som ett alternativ och i vippknappen kan användaren välja fler alternativ genom att bara klicka på knapparna.
• Här har vi fyra alternativ för att välja språk, användare kan välja flera språk.
• class = 'btn-group-toggle' används för att formatera inmatningen av formen.
• Eftersom den här data-växlingen tillåter JavaScript, växlar till knapparna så att Aktivt och inte aktivt läge kan tolkas.

Använda den aktiva knappen i kryssrutan i Bootstrap

Om den aktiva användarklassen lägger till-knappen så kontrolleras denna knapp automatiskt och användarna har återstående alternativ att välja. Den här knappen ändrar färgen för att få det aktiverade tecknet.

Låt oss se följande exempel:

Koda:


Languages