Bootstrap propose trois dispositions de formulaires: forme verticale, forme en ligne et forme horizontale. Permettez-moi de vous le présenter un par un. Les amis intéressés apprendront ensemble.
Créez une forme verticale ou de base:
• ・ Ajouter un rôle = "formulaire" à l'élément parent <form>.
• ・ Mettez les balises et les contrôles dans un <div> avec la classe .form-groupe. Ceci est nécessaire pour obtenir le meilleur espacement.
• ・ Ajouter une classe .form-control à tous les éléments de texte <fort>, <TextArea> et <lect>
<form role = "form"> <div> <label for = "name"> name </ labe> <input type = "text" id = "name" placeholder = "s'il vous plaît entrez un nom"> </v> <v> <label for = "inputfile"> Fichier Input </ Label> <entrée type de type = "file" id = "inputFile"> <p> Ceci est un exemple de bloc-lique d'aide du texte. </p> </ div> <v> <bablow> <entrée type = "Checkbox"> Veuillez cocher </bélli> </div> <Button Type = "Soumider"> Soumider </ Button> </ Form>
Forme en ligne:
Tous les éléments de la forme en ligne sont alignés à gauche et les étiquettes sont côte à côte. Pour créer un formulaire en ligne, vous devez ajouter une classe à la balise de formulaire.
.form-inline
<form role = "form"> <v> <label for = "name"> name </ label> <input type = "text" id = "name" placeholder = "s'il vous plaît entrez un nom"> </ div> <v> <label for = "inputfile"> Fichier Input </ label> <entrée type = "file" id = "inputFile"> </ div> <v> <label> <entrée type = "Checkbox"> VEILLE Type = "Soumider"> Soumider </ Button> </form>
L'effet d'affichage est le suivant:
Remarque: Par défaut, l'entrée, la sélection et le textarea dans Bootstrap ont une largeur de 100%. Lorsque vous utilisez des formulaires en ligne, vous devez définir une largeur sur le contrôle du formulaire.
Forme horizontale: différente des deux autres formes, vous devez suivre les étapes suivantes pour créer une forme horizontale.
• 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.
Par exemple:
<form role = "form"> <div> <label for = "FirstName"> name </ labe> <div> <input type = "text" id = "firstName" placeholder = "s'il vous plaît entrez un prénom"> </ div> </ div> <div> <label for = "LastName"> Last </ Label> <div> <entrée type = "text" id = "LastName" PlaceHolder = "Please Entrée a Nom "> </ div> </ div> <div> <bablow> <entrée type =" Checkbox "> Souvenez-vous de moi </ Label> </div> </div> <div> <div> <Button Type =" soumi "> Connexion </ Button> </ Div> </div> </orm>
Ce qui précède est la description complète de l'exemple de mise en page du septième bootstrap Exemple de mise en page détaillé (trois formulaires de formulaires) présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!