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:
- Lodret afkrydsningsfelt
- 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
HTML
CSS
JavaScript
bootstrap
Produktion:
Beskrivelse:
- Dette eksempel kan genkende HTML-knappen mørkere end andre, hvilket betyder, at denne knap allerede er aktiv.
- På HTML-filen skal du tilføje den aktive klasse med den primære knap.
- Dette eksempel har også brug for button-toggle = “knapper” i stedet for en knap på grund af knappen på knappen.
Konklusion
Afkrydsningsfelt er nyttigt Hvis jobbet har flere indstillinger at vælge for en betingelse. Brugeren kan vælge mere end en mulighed, der kræves til opgaven. Afkrydsningsfelt Check betyder Ja eller Ikke markeret betyder nej. Minimum to gensidige betingelser kan vælges ved hjælp af et afkrydsningsfelt.
Anbefalet artikel
Dette er en guide til Checkbox i Bootstrap. Her diskuterer vi introduktionen til afkrydsningsfeltet i Bootstrap og dens eksempler sammen med kodeimplementering. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -
- Forskellige bootstrap-komponenter
- Bootstrap-layout med typer
- Flexbox vs Bootstrap | Top 10 sammenligning
- Top 10 interviewspørgsmål om bootstrap