Bootstrap, de Twitter, est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide.
Lors de la révision de mon propre arrière-plan, j'ai utilisé Bootstrap en disposition générale et il n'y avait aucune raison de ne pas utiliser la partie du formulaire restant. Pour l'embellissement et la disposition de la forme, Bootstrap est également très bon, avec des bordures atmosphériques, des boutons multifonction et une disposition de la forme macro, tout est si complet et parfait!
Forme normale
Nous devons envelopper les éléments de forme dans la classe du groupe de formulaire, qui est généralement stocké dans <v> ... </div>, et le contenu du nom de l'élément de forme est généralement placé dans l'étiquette d'étiquette, et le nom de classe d'étiquette d'entrée est le contrôle de formulaire. Il convient de noter que votre case à cocher et vos éléments radio doivent être écrits dans votre propre div.
Par exemple, le formulaire suivant
<form> <div> <étiquette pour = "ExempleInPuleMail1"> Adresse e-mail </ labe> <entrée type = "e-mail" id = "ExempleInPuleMail1" PlaceHolder = "Email"> </ Div> <div> <label for = "ExampleInputPassword1" Plassholder = "Password"> </ Div> <étiquette> <label> <label> pour = "ExampleInputFile"> File Input </ Label> <Input Type = "Password" id = "ExempleInputPassword1" Planholder = "Password"> </ Div> <div> <label for = "ExamplePutFile"> Fichier Input </ Label type = "Checkbox"> Vérifiez-moi </ Label> </div> <Button Type = "Soumider"> Soumettre </ftont> </form>
Effet après course
Formulaire d'émission horizontale
Si les éléments de votre formulaire doivent être déchargés horizontalement, vous pouvez ajouter la classe. Ce formulaire est généralement plus adapté lorsqu'il y a moins d'éléments.
Par exemple
<form> <div> <étiquette pour = "ExempleInPuleMail3"> Adresse e-mail </ labe> <entrée type = "e-mail" id = "ExempleInPuleMail3" PlaceHolder = "Email"> </ Div> <div> <label for = "ExempleInputPassword3" PlassHolder = "Password"> </ Div> <étiquette> <étiquette> <pELLOW type = "checkbox"> Rappelez-vous moi </bablow> </div> <bouton type = "soumi"> Connectez-vous </fontissage> </ form>
Formulaire ordinaire + émission horizontale élément
Cette forme est la plus couramment utilisée. Lorsque les utilisateurs ordinaires s'inscrivent et remplissent des informations, ils peuvent souvent voir les effets de formulaire suivants.
L'implémentation de ce formulaire utilise la classe .form-horizontal, et chaque ligne d'éléments est enveloppée dans <v> ... </div>
Form> <div> <étiquette pour = "inputEmail3"> Email </ Label> <div> <input type = "e-mail" id = "inputEmail3" placeholder = "e-mail"> </ div> </ div> <div> <label for = "inputpassword3"> Mot de passe </ label> <v> <input type = "mot de passe" id = "inputpassword3" placeholder = "mot de passe"> </ / div> <div> <div> <vingpassword3 "PlaceHolder =" Password "> </ Div> </ Div> <div> <div>" <Labed> <entrée type = "Checkbox"> Souvenez-vous de moi </ Label> </div> </div> </div> </div> <div> <div> <Button Type = "soumi"> Signer </ Button> </div> </div> </div> </orm>
Nous pouvons également voir à travers le code que lors de la mise en page du formulaire, vous pouvez également utiliser Col-SM et Col-Sm-Offset pour la disposition de la grille !
Ce qui précède est une analyse complète de la forme de forme bootstrap introduite 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!