Afkrydsningsfelt i Bootstrap - Eksempler på implementering af afkrydsningsfelt i Bootstrap

• Introduktion til afkrydsningsfelt i Bootstrap
• Afkrydsningsfelteksempel 1
• Afkrydsningsfelteksempel 2

Introduktion til afkrydsningsfelt i Bootstrap

Bootstrap brugte mange knapper med et enkelt klik, men nogle gange er vi nødt til at vælge en mulighed. Valg af valgmulighed har to måder, den ene er alternativknap, og den anden er en afkrydsningsfelt. Radioknap har kun én mulighed at vælge fra andre. Under enhver betingelse er vi nødt til at vælge mere end en mulighed, der er tidsafkrydsningsfeltet fungerer. Afkrydsningsfeltet har flere indstillinger at vælge imellem de mange indstillinger. Afkrydsningsfelt bruges til at vælge indstillinger i flere valg med et klik på afkrydsningsfeltet. Brug af afkrydsningsfeltknapper er multiple choice-spørgsmål i eksamenen, når spørgsmålet har flere svar på et spørgsmål. Bootstrap har egen klasse af afkrydsningsfelt-knappen, du kan se nedenfor.

Eksempler på implementering af afkrydsningsfelt i Bootstrap

Brugere kan forstå, hvordan man implementerer et afkrydsningsfelt og funktionen af ​​disse knapper. Nedenfor er eksemplerne til implementering af afkrydsningsfeltet i Boostrap:

1. Lodret afkrydsningsfelt
2. Inline afkrydsningsfelt

1. Lodret afkrydsningsfelt

Eksempel på lodret afkrydsningsfelt er angivet i det følgende.

Kode:



Bootstrap Example vertical checkbox





Afkrydsningsfelteksempel 1

Hvilke er syv vidundere på følgende liste?

Taj Mahal

Egypten-pyramiden

London Bridge

Eiffeltårnet

Produktion:

Beskrivelse:

• Du kan se ovenstående eksempel på det lodrette afkrydsningsfelt. Dette er en standard afkrydsningsfelt og behøver ikke nogen særlig klasse eller enhed.
• Enhver form entitet kommer lodret ind ad gangen.
• Dette bruges for det meste i flervalgspørgsmål til at kende indstillingerne klart og ikke forveksles med afkrydsningsfelt og etiket. Hver bruger klassen af ​​afkrydsningsfelt med etiket. Til spørgsmålet bruger afsnitsenheden

  .

• Du kan klikke på afkrydsningsfeltet, når du har klikket på knappen afkrydsningsfeltet bliver synligt.

2. Inline afkrydsningsfelt

Eksempel på Inline-afkrydsningsfelt er angivet i det følgende.

Kode:



Bootstrap Example inline checkbox





Afkrydsningsfelteksempel 2

hobbyer:
maleri

dans

læsning

Produktion:

Beskrivelse:

• Ovenstående eksempel er et inline-afkrydsningsfelt. Vi er nødt til at bruge form-inline klassen til at andre danner en enhed, der viser inline i form.
• For inline-afkrydsningsfeltet kræves klasse-afkrydsningsfelt-inline til hver etiket.
• Hvis du vil bruge afkrydsningsfeltet i en hvilken som helst form med andre indgange også den gang er et inline-afkrydsningsfelt nyttigt.
• Alle afkrydsningsfelter findes på en linje.
• Du kan klikke på afkrydsningsfeltet, når du har klikket på knappen afkrydsningsfeltet bliver synligt.

Afkrydsningsfelt ved hjælp af knapper

Afkrydsningsfelt i bootstrap arbejdede også med knapperne med nogle klasser for at se mere stilfulde og elegante ud i form. Klasseknap-gruppe-skifte, knapklasse skal bruges i henholdsvis og. Med knap-gruppe-toggle-klassen er data-toggle = 'knapper' klasse også nødvendig i formularen. I typen skal typen være et afkrydsningsfelt for at fungere som afkrydsningsfeltet. Lad os se nogle eksempler for at forstå mere om at skifte i afkrydsningsfeltet ved hjælp af bootstrap.

Kode:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Produktion:

Beskrivelse:

• I dette eksempel brugte vi den primære knap, men enhver knap kan bruges til kassen, men 'autocomplete' skal være slået fra for ikke at gemme ekstra data.
• Hvis brugeren trykker på knappen, vælges den automatisk som en mulighed, og i vippeknappen kan brugeren vælge flere muligheder ved blot at klikke på knapperne.
• Her har vi fire muligheder for at vælge sprog, brugere kan vælge flere sprog.
• class = 'btn-group-toggle' bruges til at style formularens input.
• Fordi denne data-veksling tillader JavaScript, kan der skiftes til knapperne, så Aktiv og ikke aktiv tilstand kan fortolkes.

Brug af den aktive knap i afkrydsningsfeltet i Bootstrap

Hvis den brugeraktive klasse tilføjer knap, kontrolleres denne knap automatisk, og brugerne har de resterende muligheder at vælge. Denne knap ændrer farven for at få det aktiverede tegn.

Lad os se følgende eksempel:

Kode:


Languages