Avkrysningsrute i Bootstrap - Eksempler på implementering av avkrysningsrute i Bootstrap

• Introduksjon til avkrysningsrute i Bootstrap
• Avmerkingsboks Eksempel 1
• Avmerkingsboks Eksempel 2

Introduksjon til avkrysningsrute i Bootstrap

Bootstrap brukte mange knapper med ett klikk, men noen ganger må vi velge et alternativ. Å velge alternativ har to måter en er alternativknapp og en annen er en avkrysningsrute. Radioknappen har bare ett alternativ å velge mellom andre. I alle tilfeller må vi velge mer enn ett alternativ som er tidsavkrysningsruten fungerer. Avmerkingsboksen har flere alternativer å velge mellom de mange alternativene. Avkrysningsrute brukes til å velge alternativer i flere valg med et klikk på avkrysningsruten. Bruk av avmerkingsboks-knapper er flervalgsspørsmål i eksamenen når spørsmålet har flere svar på ett spørsmål. Bootstrap har en egen klasse med avmerkingsboks-knapp, du vil se nedenfor.

Eksempler på implementering av avkrysningsrute i Bootstrap

Brukere kan forstå hvordan de implementerer en avkrysningsrute og bruken av disse knappene. Nedenfor er eksemplene for å implementere avkrysningsruten i Boostrap:

1. Vertikal avmerkingsboks
2. Innfelt avkrysningsrute

1. Vertikal avmerkingsboks

Eksempel på vertikal avmerkingsboks er gitt i det følgende.

Kode:



Bootstrap Example vertical checkbox





Avmerkingsboks Eksempel 1

Hvilke er syv underverker i listen nedenfor?

Taj Mahal

Egypt Pyramid

London Bridge

Eiffeltårnet

Produksjon:

Beskrivelse:

• Du kan se eksemplet ovenfor med den vertikale avmerkingsboksen. Dette er en standard avkrysningsrute og trenger ingen spesiell klasse eller enhet.
• Enhver form enhet kommer vertikalt inn en etter en.
• Dette brukes mest i flervalgsspørsmål til å vite alternativene tydelig og ikke forveksles med avkrysningsrute og etikett. Hver bruker klassen av avkrysningsrute med etikett. For spørsmålet bruker paragrafenheten

  .

• Du kan klikke på avmerkingsboksen-knappen, etter at du har klikket på knappen avmerkingsmerke blir synlig.

2. Innkryssingsrute

Eksempel på Inline Checkbox er gitt i det følgende.

Kode:



Bootstrap Example inline checkbox





Avmerkingsboks Eksempel 2

hobbyer:
maleri

dans

lesning

Produksjon:

Beskrivelse:

• Eksemplet ovenfor er en inline avmerkingsboks. Vi må bruke form-inline klassen for å andre danne en enhet som viser inline i form.
• For inline-avkrysningsruten, klasse avkrysningsrute-inline kreves for hver etikett.
• Hvis du vil bruke avkrysningsruten i noen form med andre innganger også den gangen en inline-avkrysningsrute er nyttig.
• All avkrysningsrute kommer på en linje.
• Du kan klikke på avmerkingsboksen-knappen, etter at du har klikket på knappen avmerkingsmerke blir synlig.

Avkrysningsrute ved bruk av knapper

Avkrysningsrute i bootstrap fungerte også med knappene med noen klasser for å se mer stilige og elegante ut. Klasseknapp-gruppe-veksling, knappeklasse må brukes i hhv. Med knappen-gruppe-veksle-klassen, er data-toggle = 'knapper' klasse også nødvendig i skjemaet. I typen må typen være en avkrysningsrute for å fungere som avkrysningsrute. La oss se noen eksempler for å forstå mer om å bytte i avkrysningsrute ved hjelp av oppstartsstrap.

Kode:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Produksjon:

Beskrivelse:

• For dette eksempelet brukte vi primærknappen, men en hvilken som helst knapp kan brukes til å kasse, men 'autocomplete' må være av for ikke å lagre ekstra data.
• Hvis brukeren trykker på knappen, blir den automatisk valgt som et alternativ, og i vippeknappen kan brukeren velge flere alternativer bare ved å klikke på knappene.
• Her har vi fire alternativer for å velge språk, brukere kan velge flere språk.
• class = 'btn-group-toggle' brukes til å style inndata til skjemaet.
• Fordi denne dataknappen tillater JavaScript, kan du bytte til knappene slik at Aktiv og ikke aktiv modus kan tolkes.

Bruke den aktive knappen i avmerkingsboksen i Bootstrap

Hvis den brukeraktive klassen legger til-knappen, blir denne knappen automatisk sjekket og brukerne har gjenværende alternativer å velge. Denne knappen endrer fargen for å få det aktiverte tegnet.

La oss se følgende eksempel:

Kode:


Languages