Formulaire
Formulaire de base
Pour la saisie, TextArea et Sélectionner dans le formulaire, j'ajoute généralement la classe "format-control", qui définit la largeur par défaut de l'élément à 100% (pas absolue, comme le formulaire en ligne mentionné ci-dessous). Et chaque élément (y compris l'étiquette et l'élément à saisir) sera ajouté avec un "groupe de formulaire". Il n'a qu'un seul style. marge-fond: 15px.
<form action = ""> <div> <étiquette pour = ""> Nom d'utilisateur: </ label> <entrée type = "Text" /> </div> <div> <étiquette pour = ""> Mot de passe: </ label> <entrée type = "mot de passe" /> </v> </orm>
Forme en ligne
En ajoutant "Form-inline" à l'élément le plus extérieur (l'élément parent du groupe form). Indique que tous les éléments de formulaire sont affichés sur une seule ligne (avec une largeur suffisante). Et ".form-inline .form-group" s'affiche comme un bloc en ligne. Et la largeur de ".form-inline .form-control" est auto. Cela garantit qu'il est affiché en une seule ligne.
<form action = ""> <div> <étiquette pour = ""> Nom d'utilisateur: </ label> <entrée type = "Text" /> </div> <div> <étiquette pour = ""> Mot de passe: </ label> <entrée type = "mot de passe" /> </v> </orm>
Forme horizontale
Contrairement aux formes normales et en ligne. Si vous souhaitez afficher l'étiquette et les éléments de formulaire d'entrée sur une seule ligne, vous devez utiliser "Form-Horizontal". Ce type de "groupe de formulaire" conjoint équivaut à "Row" dans le système de grille. Ainsi, ses sous-classes ont "COL-MD- *", et le "Control-Label" de l'étiquette - ". Form-Horizontal .Control-Label" a l'effet du texte d'alignement droit. Si vous ne l'ajoutez pas, l'étiquette et l'entrée semblent incompatibles.
<form action = ""> <div> <label for = ""> nom d'utilisateur: </ label> <v> <input type = "text" /> </ div> </ div> <div> <label for = ""> mot de passe: </ labe> <v> <input type = "mot de passe" /> </ div> </ div> </ form>
Taille de formulaire
Ceux qui contrôlent la taille de l'entrée sont «entrée-sm» et «entrée-lg», ce qui rend la boîte d'entrée d'entrée plus petite ou plus grande que la normale. Cela correspond à la taille du texte dans l'étiquette. Vous devez ajouter "Form-Group-SM" et "Form-Group-LG" au parent "Form-Group" en même temps. Comme dans la boîte d'entrée de mot de passe d'une démo ci-dessus.
Boîte de saisie
Dans HTML5, le type dans la balise de boîte d'entrée prend en charge plus de types. Il y a du texte, du mot de passe, du datatime, du datatime-local, de la date, du mois, de l'heure, de la semaine, du numéro, de l'e-mail, de l'URL, de la recherche, du tél et de la couleur. Le style correct ne peut être affiché que sur l'étiquette <ntffour> si un type spécifique est attribué. Certains éléments ne peuvent afficher leurs effets que sur votre téléphone.
Sélection de la boîte déroulante
Similaire à la boîte d'entrée. Il vient de modifier l'entrée pour sélectionner et ajouter la classe "format-control".
<form action = ""> <div> <label for = ""> Veuillez sélectionner: </ label> <div> <select name = "" id = ""> <option value = ""> html </ option> <option value = ""> css </ option> <option value = ""> javascript </ option> <option value = ""> java </ option> <option value = ""> php </ option> <option> value = ""> nodejs </ option> </lect> </div> </ form>
COL-MD-Pull- * est le décalage gauche.
Champ de texte
Similaire à ce qui précède.
<formulaire form = ""> <div> <étiquette pour = ""> textarea: </ label> <div> <textarea name = "" id = "" rows = "3"> Bonjour </ textarea> </div> </div> </ form>
Boîtes à radio multiples et
Afin de faire apparaître les éléments de la radio et de la boîte à cocher dans une ligne et de s'aligner sur l'étiquette. Bootstrap offre deux options. Un:
<div><label for=""><input type="radio" name="sex"/>Male<input type="radio" name="sex"/>Female<input type="radio" name="sex"/>Confidential</label><label for=""><input type="checkbox"/>HTML<input type="checkbox"/>CSS<input type="checkbox"/>JavaScript</label></div>
L'étiquette elle-même est en ligne en ligne. Mais .radio, .Checkbox lui-même est bloqué.
Alors enveloppez plusieurs cases radio ou cochées avec une seule étiquette, qui semblera peu professionnelle (haha). De plus, beaucoup sont également très disgracieux. Donc, la deuxième façon d'écrire est ici.
<div> <étiquette pour = ""> <input type = "radio" name = "sex" /> mâle </ labe> <label for = ""> <input type = "radio" name = "sexe" /> femel </ label> <label for = ""> <input type = "radio" name = "sex" /> confidentiel </ label> <br /> <label> <"> <upy type =" checkbox "/> html </ label> <label> for = ""> <input type = "checkbox" /> css </ labe> <label for = ""> <input type = "checkbox" /> javascript </ labe> </div>
Vérification du formulaire
Has-succès: succès, vert.
Avance: avertissement, jaune.
Has-error: erreur, rouge.
Ajoutez simplement le style correspondant au "groupe de formulaire". Pour une meilleure vérification, nous pouvons continuer à ajouter "Has-Feedback". Ajoutez ensuite "Form-Control-Feedback" au niveau de l'élément après entrée ("format-control"). La sémantique est claire et claire. Le code est le suivant:
<form action = ""> <div> <étiquette pour = ""> Nom d'utilisateur: </ label> <div> <entrée type = "Text" /> <span> </span> </ div> </ div> <div> <label for = ""> mot de passe: </vabe> <v> <entrée type = "text" /> <pan> </span> </v> </v> <v> <vate type = "text" /> <span> </span> </span> </ form>
Bouton
Multi-bouton et style bouton
Il existe différents styles de bouton dans Bootstrap. Le bouton, A, l'entrée, la portée, la div, etc. peuvent tous devenir des boutons tant qu'il a "BTN BTN-style". Cependant, pour une meilleure compatibilité et lisibilité, il est préférable de ne pas utiliser de cette façon, essayez d'utiliser les balises de bouton.
<Futony> Button </futton> <fontificateur> Button> Button </fontificateur> <fontificateur> Button </frut> <fontificateur> Button </fontificateur> </ bouton> Button </futton> </ bouton> Button </ Button> <! - BTN-Block rend le bouton exclusif à un Row -> <fontissage> Button </ Button> <Fut-bouton> Button </ Button> <Fut-Button> Button </ Button> <Inter> Button </ Button> <Fut-Button> Button </ Button> <Fut-Button> Button </ Button> </ Button> Button </ Button> <fontificateur> Button </ Button> <fontificateur> Button </ Button> </ Button> Button </ Button>
Taille de bouton
Comme mentionné ci-dessus, utilisez "BTN-XS", "BTN-SM", "BTN-LG" pour définir la taille du bouton.
État du bouton
Comme mentionné ci-dessus, les efficaces sont "actives" et "focus".
image
IMG sensible à IMG: images réactives, principalement destinées à la conception réactive.
IMG Round: Corners arrondis.
IMG-Circle: Round.
IMG-Thumbnail: Vignette, représentée par une frontière ajoutée à la couche extérieure.
icône
BootStart a de nombreuses petites icônes intégrées. La méthode d'utilisation est la suivante. En fait, il a été utilisé dans le "Form-Control-Feedback" ci-dessus. Parmi eux, "Glyphicon" est un must.
<span> </span>
Groupe de boîtes d'entrée
Le groupe de boîtes d'entrée est un "groupe d'entrée". Nous devons ajouter des suffixes (tels que des suffixes par e-mail) et des préfixes (symboles monétaires ￥, $, etc.) pour utiliser "Input-Group-addon" ou "entrée-groupe-btn". Sémantique simple et claire. comme suit:
<! - Email-box -> <div> <input type = "text" /><span>@gmail.com</span></div><!--currency--><div><pan>$</span><input type = "Text"> <span> .00 </ span> </v> <! Type = "Text" /> </ Div> <! - Choix multiple -> <div> <spandé> <entrée type = "Checkbox" /> </ span> <input type = "Text" /> </ div> <! - Taobao Input Box Group -> <div> <div> <Button Data-toggle = "Dropdown"> Veuillez sélectionner <pander> </span> </fonton> <ul> <li> <A href = "JavaScript: void (0)"> bébé </a> </li> <li> <a href = "javascript: void (0)"> shop </a> </li> </ul> </v> <entrée = "Text" /> <span> <button> Recherche </frut> </span> </ving>
résumé
"Form-Horizontal" et "Form-inline" sont tous deux les étiquettes les plus externes du groupe de formulaires.
Un groupe de formulaires prend le "groupe de formulaire" comme élément parent. Des similaires sont des «groupes d'entrée» et du «groupe de bouton» qui peuvent être utilisés à l'avenir. Ils peuvent tous être dimensionnés.
"form-group-lg", "input-lg", "input-group-lg", "btn-lg", etc.
Le style de vérification a "Has-Error", "Has-Success", "Has-Warning". "Has-Feedback" peut être ajouté au même élément. Afin de rendre la vérification plus complète.
Il existe de nombreux styles pour les boutons et les tailles peuvent être définis.
Quatre styles communs pour les images.
Bootstarp a de nombreuses icônes intégrées.
Le groupe de boîtes d'entrée commence par "entrée-groupe" et les éléments de l'enfant incluent "l'entrée-groupe-addon", "entrée-groupe-btn", etc.
Ce qui précède est une collection complète de formulaires dans Bootstrap qui vous est 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!