Bootstrap fournit les types de dispositions de formulaires suivants:
• Formulaire vertical (par défaut) -> Celui-ci n'est pas beau, ce sont toutes des versions mobiles, et la version PC prend une ligne et elle n'est pas belle;
• Formulaire en ligne-> Je crois que c'est ce que vous voulez, la version PC répond aux lignes horizontales et la version mobile répond aux lignes verticales.
• Forme horizontale-> Affichage de contrôle avec système de grille
1. Formulaire vertical
Étapes standard pour l'utilisation du formulaire vertical
1. Ajouter un rôle = "form" à l'élément <form>.
2. Placez les balises et les commandes dans un <v> avec "Form-Group" pour obtenir le meilleur espacement.
3. Ajoutez des styles "formulaire de formulaire" à tous les éléments de texte <fort>, <TextArea> et <lect>.
<form role = "form"> <v> <étiquette pour = "name"> name </ label> <input type = "text" id = "name" placeholder = "s'il vous plaît entrez un nom"> </ div> <v> <label for = "name"> Âge </ label> <input type = "text" id = "name" placeholder = "s'il vous plaît entrez un âge"> </ div> </orm>
2. Disposition en ligne
La disposition en ligne est exactement la même que la mise en page verticale, mais vous devez ajouter class = form-inline à <formulaire de formulaire = "form">.
<form role = "form">
Après avoir utilisé une telle disposition en ligne, le grand écran s'affiche horizontalement et le petit écran s'affiche verticalement.
Petit écran:
Grand écran:
3. Forme horizontale
Une forme horizontale fait référence au niveau entre une étiquette d'étiquette et un contrôle (entrée, bouton).
Les étapes de l'utilisation sont les suivantes:
• Ajouter une classe .form-horizontal à l'élément parent <form>.
• Mettez les balises et les contrôles dans un <v> avec la classe .form-groupe.
• Ajouter une classe .Control-label à l'étiquette.
<form role = "form"> <div> <label for = "name"> name </ label> <div> <input type = "text" id = "name" placeholder = "s'il vous plaît entrez un nom"> </ div> </ div> <div> <label for = "name"> Âge </ Label> <div> <port type = "text" id = "name" PlaceHolder = "s'il vous plaît entrez un âge"> <fort-type> </ Form>
Ce n'est qu'après avoir utilisé le formulaire Horizontal que le contrôle d'entrée peut être défini sur DIV, et le div peut également utiliser le système de grille. Le style de forme-horizontal modifie le comportement du groupe de forme, agissant comme des lignes dans un raster.
4. Box et radio
Ces deux commandes sont spéciales en bootstrap. Parfois, ils doivent être disposés horizontalement, et parfois ils doivent être disposés verticalement.
C'est aussi comme une forme, et il est également incliné.
• Si un affichage en ligne est requis, définissez la classe de l'étiquette entourée de sa couche extérieure sur cocher la boîte en ligne.
• Si l'affichage vertical par défaut est requis, définissez la classe de l'étiquette entourée de la couche extérieure sur Heckbox.
<form rôle = "form"> <! - Check -> <div> <vabe> <entrée type = "checkbox" value = ""> banane </ label> </v> <v> <vabe> <input type = "checkbox" value = ""> Apple </v> </div> <div> <bablow Value = ""> banane </ label> </ div> <div> <vabed> <input type = "checkbox" value = ""> Apple </ Label> </div> <div> <label> <entrée Type = "Checkbox" Value = ""> Watermelon </ Label Mâle </ label> </ div> <div> <vabe> <entrée type = "radio" name = "OptionsRadios" value = "option2" checked> femel </vabe> </ div> <div> <vabe> <entrée type = "radio" name = "OptionsRadios" value = "Option1" Checked> male </vabe> </v> <v> <label> <preny type = "radio" nom = "optionsvarsadios" Valuar = "Checked>" Entrée = "Radio" Name = "OptionsRadiO Femme </bétique> </div> </ form>
L'effet d'affichage est le suivant:
5. Commandes statiques
Les contrôles statiques se réfèrent à ceux qui ne peuvent pas modifier la valeur. Dans Bootstrap, lorsque vous devez placer du texte brut derrière des balises de forme dans une forme horizontale, utilisez class = "form-control-static" sur <p>.
<form role = "form"> <div> <label> name </ label> <div> <p> liu xuande </p> </div> </div> </ form>
L'effet d'affichage est le suivant:
6. Formez le texte d'aide
La forme bootstrap aide le texte qui se réfère généralement à l'invite d'entrée, généralement suivi d'un élément HTML de .Help-bloc.
<form role = "form"> <div> <input type = "text"> <span> rappel spécial, si vous n'avez rien, ne le tapez pas. </span> </div> </ form>
L'effet d'affichage est le suivant:
En plus de ceux-ci, Bootstrap possède également de nombreuses colonnes de styles utilisées pour contrôler la hauteur de l'entrée, que l'entrée soit réussie, etc. Vérifiez-les simplement et trouvez les mots clés correspondants et enregistrez-les plus tard.
Ce qui précède est la disposition du formulaire bootstrap introduit par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!