Introduction à Checkbox dans Bootstrap
Bootstrap a utilisé de nombreux boutons en un seul clic, mais parfois nous devons choisir une option. Le choix de l'option a deux façons: un bouton radio et un autre est une case à cocher. Le bouton radio n'a qu'une seule option à choisir parmi les autres. Dans toutes les conditions, nous devons choisir plus d'une option pour que la case à cocher fonctionne. La case à cocher a plusieurs options pour choisir parmi les nombreuses options. La case à cocher est utilisée pour choisir des options dans plusieurs choix en cliquant sur la case à cocher. L'utilisation des boutons de case à cocher est une question à choix multiples dans l'examen lorsque la question a plusieurs réponses à une question. Bootstrap a sa propre classe de bouton de case à cocher, vous verrez ci-dessous.
Exemples pour implémenter la case à cocher dans Bootstrap
Les utilisateurs peuvent comprendre comment implémenter une case à cocher et le fonctionnement de ces boutons. Voici les exemples d'implémentation de la case à cocher dans Boostrap:
- Case à cocher verticale
- Case à cocher en ligne
1. Case à cocher verticale
Un exemple de case à cocher verticale est donné ci-dessous.
Code:
Bootstrap Example vertical checkbox
Exemple de case à cocher 1
Quelles sont les sept merveilles de la liste suivante?
Taj Mahal
Pyramide d'Egypte
le pont de Londres
tour Eiffel
Production:
La description:
- Vous pouvez voir l'exemple ci-dessus de la case à cocher verticale. Il s'agit d'une case à cocher par défaut et ne nécessite aucune classe ou entité spéciale.
- Toutes les entités de formulaire arrivent verticalement une par une.
- Ceci est principalement utilisé dans les examens de questions à choix multiples pour connaître les options clairement et ne pas confondre avec la case à cocher et l'étiquette. Chacun utilise la classe de case à cocher avec étiquette. Pour la question utilise l'entité paragraphe
.
- Vous pouvez cliquer sur le bouton de la case à cocher, après avoir cliqué sur le bouton, la coche devient visible.
2. Case à cocher en ligne
Un exemple de case à cocher en ligne est donné ci-dessous.
Code:
Bootstrap Example inline checkbox
Exemple de case à cocher 2
loisirs:
La peinture
dansant
en train de lire
Production:
La description:
- L'exemple ci-dessus est une case à cocher en ligne. Nous devons utiliser la classe form-inline pour que d'autres forment une entité qui affiche inline sous forme.
- Pour la case à cocher en ligne, la classe case à cocher en ligne est requise avec chaque étiquette.
- Si vous souhaitez utiliser la case à cocher sous une forme quelconque avec d'autres entrées, cette fois, une case à cocher en ligne est utile.
- Toutes les cases à cocher se trouvent sur une seule ligne.
- Vous pouvez cliquer sur le bouton de la case à cocher, après avoir cliqué sur le bouton, la coche devient visible.
Case à cocher à l'aide des boutons
La case à cocher dans le bootstrap a également fonctionné avec les boutons de certaines classes pour avoir l'air plus élégant et plus élégant. Classe bouton-groupe-bascule, la classe bouton doit être utilisée dans et respectivement. Avec la classe button-group-toggle, la classe data-toggle = 'buttons' est également nécessaire dans le formulaire. Dans le, le type doit être une case à cocher pour fonctionner comme case à cocher. Voyons quelques exemples pour en savoir plus sur la bascule dans la case à cocher en utilisant le bootstrap.
Code:
Bootstrap Example checkbox
Languages
HTML
CSS
JavaScript
Bootstrap
Production:
La description:
- Pour cet exemple, nous avons utilisé le bouton principal, mais n'importe quel bouton peut être utilisé pour passer à la caisse, mais la saisie semi-automatique doit être désactivée pour ne pas enregistrer de données supplémentaires.
- Si l'utilisateur appuie sur le bouton, il est automatiquement choisi en option et dans le bouton bascule, l'utilisateur peut choisir plus d'options en cliquant simplement sur les boutons.
- Ici, nous avons quatre options pour choisir les langues, les utilisateurs peuvent choisir plusieurs langues.
- class = 'btn-group-toggle' est utilisé pour styliser l'entrée du formulaire.
- Parce que cette bascule de données, JavaScript permet de basculer vers les boutons afin que le mode actif et non actif puisse être interprété.
Utilisation du bouton actif de la case à cocher dans Bootstrap
Si la classe active de l'utilisateur ajoute un bouton, ce bouton est automatiquement coché et les utilisateurs ont le choix entre les options. Ce bouton change la couleur pour obtenir le signe activé.
Voyons l'exemple suivant:
Code:
Languages
HTML
CSS
Javascript
Amorcer
Production:
La description:
- Cet exemple peut reconnaître le bouton HTML plus sombre que les autres, ce qui signifie que ce bouton est déjà actif.
- Sur le HTML, ajoutez la classe active avec le bouton principal.
- Cet exemple a également besoin de bouton-bascule = «boutons» au lieu d'un bouton, en raison du groupe du bouton.
Conclusion
La case à cocher est utile si le travail a plusieurs options à choisir pour une condition. L'utilisateur peut sélectionner plusieurs options requises pour la tâche. Case à cocher Cocher signifie Oui ou Non coché signifie non. Au moins deux conditions mutuelles peuvent être sélectionnées à l'aide d'une case à cocher.
Article recommandé
Ceci est un guide de Checkbox dans Bootstrap. Nous discutons ici de l'introduction à la case à cocher dans Bootstrap et de ses exemples ainsi que de l'implémentation du code. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus -
- Différents composants Bootstrap
- Disposition d'amorçage avec types
- Flexbox vs Bootstrap | Comparaison des 10 meilleurs
- Top 10 des questions d'entretien de Bootstrap