Formulaires bootstrap | Expliqué
Cet article couvrira:
- Comment créer une forme en ligne dans Bootstrap?
- Comment définir l'espacement sous forme en ligne?
- Comment créer une forme empilée dans Bootstrap?
- Comment créer un formulaire à l'aide de lignes de grille?
- Comment créer une forme de mise en page compacte?
- Comment créer une forme horizontale?
- Comment définir le dimensionnement de l'étiquette du formulaire?
Comment créer une forme en ligne dans Bootstrap?
Les formulaires en ligne sont créés à l'aide du «.formulaire" classe. Cette classe a un CSS prédéfini "afficher«Propriété avec la valeur»fléchir"Avec d'autres propriétés.
Exemple
Consultez l'exemple qui montre comment créer une forme en ligne dans Bootstrap:
- Tout d'abord, ajoutez un ""Élément avec la classe"formulaire".
- À l'intérieur, ajoutez deux "«Éléments avec le«groupe de formulaire" classe.
- Chaque élément «» contient le «" et "" éléments.
- Enfin, ajoutez un «»Élément pour créer un bouton:
Sortir
Comment définir l'espacement sous forme en ligne?
Les utilitaires d'espacement de bootstrap ajustent l'espacement d'une forme en ligne. Ceux-ci inclus "ml- *"Pour la marge-gauche,"M-*”Pour la marge droite et bien d'autres. Le "*»Représente la taille.
Pour une démonstration pratique, consultez l'exemple ci-dessous.
Exemple
Dans l'exemple en cours, ajoutez la classe "ml-2«À l'élément« ». Il générera de l'espace à gauche de l'étiquette:
Sortir
Comment créer une forme empilée dans Bootstrap?
Les formulaires empilés se réfèrent aux formes verticales. Ceci est un formulaire par défaut.
Découvrez l'exemple ci-dessous.
Exemple
Suivez les instructions données pour créer une forme verticale:
- Ajouter un "" élément.
- À l'intérieur, ajoutez un "«Tag et attribuez-lui un« groupe de formulaire »de classe.
- Cet élément «» contient le «" et "" éléments. Vous pouvez ajouter les éléments de formulaire en fonction de vos préférences.
- À la fin, ajoutez un "«À la forme:
Sortir
Comment créer un formulaire à l'aide de lignes de grille?
Faire une forme à l'aide de la grille bootstrap est très simple. Tout d'abord, spécifiez une ligne et créez des colonnes pour les entrées de formulaire à l'intérieur.
Analyser l'exemple ci-dessous.
Exemple
Suivez les instructions pour créer un formulaire à l'aide de la grille de bootstrap:
- Ajouter un "" élément.
- À l'intérieur, ajoutez un "«Conteneur avec la classe« ligne ».
- À l'intérieur de ceci "ligne«Conteneur, spécifiez deux autres éléments« »avec la classe« col ».
- Ajouter le "<étiqueter> "Et"<saisir> ”Éléments de chaque élément« »:
Sortir
Comment créer une forme de mise en page compacte?
Pour les dispositions compactes et plus étroites, le «rang"La classe est utilisée au lieu du"ligne" classe:
Sortir
Comment créer une forme horizontale?
Les formes horizontales sont créées en utilisant le «ligne" et "Col - * - *" Des classes. Le "ligne«La classe spécifie une ligne, et les classes« col - * - * »définissent la largeur des étiquettes et des contrôles, tels que«col-sm-2","col-md-6" ou plus. Le «col-forme-label» doit également être ajouté à l'élément «».
Exemple
Pour créer une forme horizontale, essayez les instructions données:
- Tout d'abord, ajoutez un "" élément.
- À l'intérieur, ajoutez un «"Élément avec les classes"groupe de formulaire" et "ligne".
- Spécifiez les groupes de formulaires dans ceci "" élément. Dans notre cas, le «" et le "»Les éléments sont spécifiés.
- Le ""L'élément est placé dans un autre""Avoir la classe"col-sm-6". Il spécifiera 6 colonnes de grille pour le «" élément:
Sortir
Comment ajuster le dimensionnement de l'étiquette du formulaire?
La taille du «»L'élément peut être ajusté facilement en utilisant le«col-forme-label-sm" et "col-forme-label-lg". Le «col-forme-label-sm» a un CSS prédéfini "taille de police«Propriété avec la valeur»0.875rem"Avec d'autres propriétés. Le «col-forme-label-lg» a un CSS prédéfini "taille de police«Propriété avec la valeur»1.25"Avec d'autres propriétés.
Exemple
Dans l'exemple en cours, ajoutez le «col-forme-label-sm» à l'élément «» et «col-forme-label-lg» au second pour voir la différence:
Sortir
Vous avez réussi à créer des formulaires à l'aide de bootstrap.
Conclusion
Bootstrap offre une méthode simple pour produire des formes réactives et cohérentes. Il existe principalement trois types de formes bootstrap: des formes en ligne, empilées et horizontales. Un formulaire en ligne est créé à l'aide du «formulaire" classe. Pour spécifier des styles généraux au groupe de contrôles de forme, le «groupe de formulaire"La classe est utilisée. Plus précisément, il existe plusieurs classes qui aident à ajuster la taille des composants de la forme, tels que «col-sm-4», «col-form-label-sm», et bien d'autres. Cet article a démontré comment créer des formulaires à l'aide de bootstrap.