Kontrollkästchen in Bootstrap - Beispiele zum Implementieren von Checkbox in Bootstrap

• Einführung in Checkbox in Bootstrap
• Kontrollkästchen Beispiel 1
• Kontrollkästchen Beispiel 2

Einführung in Checkbox in Bootstrap

Bootstrap verwendete viele Schaltflächen mit einem Klick, aber manchmal müssen wir eine Option auswählen. Es gibt zwei Möglichkeiten, eine Option als Optionsfeld und eine andere als Kontrollkästchen auszuwählen. Das Optionsfeld hat nur eine Option zur Auswahl. In jedem Fall müssen wir mehr als eine Option auswählen, bei der das Zeit-Kontrollkästchen funktioniert. Das Kontrollkästchen bietet mehrere Optionen zur Auswahl. Das Kontrollkästchen wird verwendet, um Optionen in mehreren Auswahlmöglichkeiten mit einem Klick auf das Kontrollkästchen auszuwählen. Die Verwendung von Kontrollkästchen-Schaltflächen ist eine Multiple-Choice-Frage in der Prüfung, wenn die Frage mehrere Antworten auf eine Frage enthält. Bootstrap hat eine eigene Klasse von Kontrollkästchen-Schaltflächen, die Sie unten sehen werden.

Beispiele zum Implementieren von Checkbox in Bootstrap

Benutzer können verstehen, wie ein Kontrollkästchen implementiert wird und wie diese Schaltflächen funktionieren. Unten sehen Sie die Beispiele zur Implementierung des Kontrollkästchens in Boostrap:

1. Vertikales Kontrollkästchen
2. Inline Checkbox

1. Vertikales Kontrollkästchen

Beispiel für ein vertikales Kontrollkästchen wird im Folgenden angegeben.

Code:



Bootstrap Example vertical checkbox





Kontrollkästchen Beispiel 1

Welches sind die sieben Wunder in der folgenden Liste?

Taj Mahal

Ägypten Pyramide

London Bridge

Eiffelturm

Ausgabe:

Beschreibung:

• Sie können das obige Beispiel des vertikalen Kontrollkästchens sehen. Dies ist ein Standard-Kontrollkästchen und benötigt keine spezielle Klasse oder Entität.
• Alle Formularentitäten werden einzeln vertikal eingegeben.
• Dies wird hauptsächlich in Multiple-Choice-Fragenprüfungen verwendet, um die Optionen klar zu kennen und nicht mit Kontrollkästchen und Beschriftung zu verwechseln. Jeder verwendet die Ankreuzfeldklasse mit Beschriftung. Bei Frage wird die Absatzentität verwendet

  .

• Sie können auf die Checkbox-Schaltfläche klicken, nachdem Sie auf die Schaltfläche geklickt haben, wird das Häkchen sichtbar.

2. Inline Checkbox

Das folgende Beispiel zeigt ein Inline-Kontrollkästchen.

Code:



Bootstrap Example inline checkbox





Kontrollkästchen Beispiel 2

Hobbys:
Gemälde

Tanzen

lesen

Ausgabe:

Beschreibung:

• Das obige Beispiel ist ein Inline-Kontrollkästchen. Wir müssen die form-inline-Klasse verwenden, um eine Entität zu bilden, die in Form von Inline angezeigt wird.
• Für das Inline-Kontrollkästchen ist für jedes Etikett ein Inline-Kontrollkästchen für die Klasse erforderlich.
• Wenn Sie das Kontrollkästchen auch dieses Mal in irgendeiner Form mit anderen Eingaben verwenden möchten, ist ein Inline-Kontrollkästchen hilfreich.
• Alle Kontrollkästchen werden in einer Zeile angezeigt.
• Sie können auf die Checkbox-Schaltfläche klicken, nachdem Sie auf die Schaltfläche geklickt haben, wird das Häkchen sichtbar.

Kontrollkästchen mit Schaltflächen

Checkbox im Bootstrap hat auch mit den Buttons bei einigen Klassen geklappt, um stilvoller und eleganter in Form zu wirken. Klasse button-group-toggle, Buttonklasse muss in bzw. verwendet werden. Bei der Klasse button-group-toggle ist auch die Klasse data-toggle = 'buttons' im Formular erforderlich. In muss der Typ ein Kontrollkästchen sein, um als Kontrollkästchen zu fungieren. Sehen wir uns einige Beispiele an, um mehr über das Umschalten des Kontrollkästchens mithilfe von Bootstrap zu erfahren.

Code:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Ausgabe:

Beschreibung:

• In diesem Beispiel haben wir den primären Button verwendet, aber jeder Button kann zum Auschecken verwendet werden, aber "Autocomplete" muss deaktiviert sein, um keine zusätzlichen Daten zu speichern.
• Wenn der Benutzer auf die Schaltfläche drückt, wird diese automatisch als Option ausgewählt. Über die Umschaltschaltfläche kann der Benutzer weitere Optionen auswählen, indem er nur auf die Schaltflächen klickt.
• Hier haben wir vier Optionen zur Auswahl der Sprachen, Benutzer können mehrere Sprachen auswählen.
• class = 'btn-group-toggle' wird für die Eingabe des Formulars verwendet.
• Aufgrund dieses Datenwechsels ermöglicht JavaScript das Wechseln zu den Schaltflächen, sodass der aktive und nicht aktive Modus interpretiert werden kann.

Verwenden der aktiven Schaltfläche des Kontrollkästchens in Bootstrap

Wenn die vom Benutzer aktive Klasse die Schaltfläche hinzufügt, wird diese Schaltfläche automatisch aktiviert und der Benutzer hat die verbleibenden Optionen zur Auswahl. Diese Schaltfläche ändert die Farbe, um das aktivierte Zeichen zu erhalten.

Sehen wir uns das folgende Beispiel an:

Code:


Languages