Selectievakje in Bootstrap - Voorbeelden om Checkbox in Bootstrap te implementeren

• Inleiding tot Checkbox in Bootstrap
• Selectievakje Voorbeeld 1
• Selectievakje Voorbeeld 2

Inleiding tot Checkbox in Bootstrap

Bootstrap gebruikte veel knoppen met één klik, maar soms moeten we een optie kiezen. Het kiezen van een optie heeft twee manieren: een is keuzerondje en een ander is een selectievakje. Het keuzerondje heeft slechts één optie om uit andere te kiezen. In alle omstandigheden moeten we meer dan één optie kiezen die werkt met tijdcontrole. Checkbox heeft meerdere opties om uit de vele opties te kiezen. Selectievakje wordt gebruikt om opties in meerdere keuzes te kiezen met een klik op het selectievakje. Het gebruik van selectievakjes is meerkeuzevragen in het examen wanneer de vraag meerdere antwoorden op één vraag heeft. Bootstrap heeft een eigen klasse selectievak-knop, zie je hieronder.

Voorbeelden om Checkbox in Bootstrap te implementeren

Gebruikers kunnen begrijpen hoe een selectievakje te implementeren en hoe deze knoppen werken. Hieronder staan ​​de voorbeelden om het selectievakje in Boostrap te implementeren:

1. Verticaal selectievakje
2. Inline selectievakje

1. Verticaal selectievakje

Een voorbeeld van een verticaal selectievakje wordt hieronder gegeven.

Code:



Bootstrap Example vertical checkbox





Selectievakje Voorbeeld 1

Wat zijn zeven wonderen in de volgende lijst?

Taj Mahal

Piramide van Egypte

London bridge

Eiffeltoren

Output:

Beschrijving:

• U kunt het bovenstaande voorbeeld van het verticale selectievakje zien. Dit is een standaard aankruisvakje en vereist geen speciale klasse of entiteit.
• Alle vormentiteiten komen één voor één verticaal binnen.
• Dit wordt meestal gebruikt bij multiple-choice vragenexamens om de opties duidelijk te kennen en niet te verwarren met het selectievakje en label. Elke gebruikt de klasse van selectievakje met label. Bij vraag gebruikt de alinea-entiteit

  .

• U kunt op het selectievakje klikken, nadat u op het knopvinkje hebt geklikt, zichtbaar wordt.

2. Inline selectievakje

Voorbeeld van Inline Checkbox wordt hieronder gegeven.

Code:



Bootstrap Example inline checkbox





Selectievakje Voorbeeld 2

hobby's:
schilderij

dansen

lezing

Output:

Beschrijving:

• Het bovenstaande voorbeeld is een inline-selectievakje. We moeten de vorm-inline-klasse gebruiken om anderen een entiteit te vormen die inline in vorm wordt weergegeven.
• Voor het selectievakje inline, klasse checkbox-inline vereist bij elk label.
• Als u het selectievakje in welke vorm dan ook met andere ingangen wilt gebruiken, is een inline-selectievakje nuttig.
• Alle selectievakjes staan ​​op één regel.
• U kunt op het selectievakje klikken, nadat u op het knopvinkje hebt geklikt, zichtbaar wordt.

Selectievakje Knoppen gebruiken

Checkbox in bootstrap werkte ook met de knoppen in sommige klassen om er stijlvoller en eleganter uit te zien. Klasse knop-groep-wissel, knopklasse moet gebruikt worden in respectievelijk. Met de klasse button-group-toggle is de klasse data-toggle = 'buttons' ook noodzakelijk in de vorm. In de moet het type een selectievakje zijn om als selectievakje te werken. Laten we een paar voorbeelden bekijken om meer te weten te komen over het schakelen in het selectievakje met bootstrap.

Code:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Output:

Beschrijving:

• Voor dit voorbeeld hebben we de primaire knop gebruikt, maar elke knop kan worden gebruikt om af te rekenen, maar 'autocomplete' moet zijn uitgeschakeld om geen extra gegevens op te slaan.
• Als de gebruiker op de knop drukt, wordt deze automatisch als optie gekozen en in de schakelknop kan de gebruiker meer opties kiezen door op de knoppen te klikken.
• Hier hebben we vier opties om de talen te kiezen, gebruikers kunnen meerdere talen kiezen.
• class = 'btn-group-toggle' wordt gebruikt voor de stijl van de invoer van het formulier.
• Omdat deze gegevens omschakelen, staat JavaScript omschakelen naar de knoppen toe zodat de actieve en niet actieve modus kan worden geïnterpreteerd.

Met behulp van de actieve knop van Checkbox in Bootstrap

Als de actieve klasse van de gebruiker de knop toevoegt, wordt deze knop automatisch aangevinkt en kunnen gebruikers nog opties kiezen. Deze knop verandert de kleur om het geactiveerde teken te krijgen.

Laten we het volgende voorbeeld bekijken:

Code:


Languages