Les éléments courants des formulaires incluent principalement: les boîtes d'entrée de texte, les boîtes de sélection déroulantes, les boîtes radio, les cases à cocher, les champs de texte, les boutons, etc. Voici les différentes versions de bootstrap:
Moins: Formulaires
Sass: _forms.scss
Bootstrap personnalise uniquement les balises du champ, de la légende et de l'étiquette dans le formulaire
fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;color: #333;border: 0;border-bottom: 1px solid #e5e5e5;}label {display: Block en ligne; marge-fond: 5px; Font-Weight: Bold;}En plus de ces éléments, il existe également des entrées, sélectionnées, textarea et autres éléments. Dans le framework bootstrap, l'effet est obtenu en personnalisant un nom de classe.
1. La largeur devient 100%;
2. Réglez une bordure gris clair (#ccc)
3. Coins ronds avec 4px
4. Définissez l'effet de l'ombre et l'élément se concentre, les effets de l'ombre et de la bordure changent.
5. Réglez la couleur du palé
Forme en ligne
Si vous souhaitez ajouter une balise d'étiquette avant l'entrée, elle entraînera l'affichage de la rupture de la ligne d'entrée; Si vous devez ajouter une telle balise d'étiquette et que vous ne souhaitez pas la rupture de la ligne d'entrée, vous devez mettre la balise d'étiquette dans le groupe Container.Form-Group, par exemple:
<div> <babline> Adresse e-mail </bable> </div> <v> <entrée type = "Email" Planholder = "Veuillez saisir votre numéro de messagerie"> </div>
Les effets sont les suivants:
Pour réaliser l'effet de la jonction des formulaires, ajoutez simplement le nom de classe. Le principe de mise en œuvre est:
Définissez le contrôle de formulaire sur un élément de bloc en ligne (affichage: bloc en ligne) pour afficher le contrôle de formulaire sur une ligne.
exemple:
<form> <div> <label> e-mail </ label> <entrée type = "e-mail" placeholder = "Veuillez saisir le numéro de messagerie"> </ div> <div> <vabed> mot de passe </ label> <entrée type = "mot de passe".
Les effets sont les suivants:
Avez-vous constaté que le code a clairement une balise d'étiquette et n'est pas placé dans le groupe conteneur. Ce qui est encore plus étrange, c'est que le contenu de la balise d'étiquette ne s'affiche pas! En fait, si vous regardez attentivement, la balise d'étiquette a ajouté le nom de classe. Jetons un coup d'œil à son code source:
.sr-only {position: absolu; largeur: 1px; hauteur: 1px; rembourrage: 0; marge: -1px; débordement: caché; clip: rect (0, 0, 0, 0); bordure: 0;}Depuis que la balise d'étiquette a été ajoutée et que le nom de classe .SR uniquement a été ajouté pour masquer l'étiquette, n'est-ce pas inutile? ? ? Mais c'est exactement l'un des avantages du framework bootstrap. Si l'étiquette n'est pas définie pour le contrôle des entrées, le lecteur d'écran ne sera pas correctement reconnu, et il a également certaines considérations pour les personnes handicapées.
Forme horizontale
La mise en œuvre des effets de forme horizontale dans Bootstrap nécessite les deux conditions suivantes:
1. Utilisez le nom de classe.
2. Système de grille avec framework bootstrap (Détails: Explication détaillée du système de grille bootstrap)
Utiliser le nom de classe.Form-horizontal dans l'élément de forme a principalement les fonctions suivantes:
1. Définissez les valeurs de rembourrage et de marge des contrôles de forme
2. Changez la forme d'expression du groupe.
Code source CSS:
.Form-horizontal .Control-Label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {padding-top: 7px; margin-top: 0; margin-bootporm: 0;}. {min-height: 27px;}. form-horizontal .form-group {margin-right: -15px; margin-left: -15px;}. form-horizontal .form-control-static {padding-top: 7px;} @ media (min-width: 768px) {. à droite;}}. Form-horizontal .has-feedback .form-control-feedback {top: 0; droite: 15px;}exemple:
<form> <div> <label> e-mail </ label> <div> <entrée type = "e-mail" placeholder = "Veuillez entrer votre e-mail"> </ div> </ div> <v> <vabed> mot de passe </ label> <v> <input type = "mot de passe" placeholder = "s'il vous plaît entrez votre mot de passe"> </ div> </ div> <v> <vabed> <entrée type = " Mot de passe </ label> </div> </div> <div> <div> <button> Entrez votre e-mail </fontificateur> </div> </ Form>
Les effets sont les suivants:
Boîte d'entrée à ligne unique
Lorsque vous utilisez l'entrée dans Bootstrap, vous devez également ajouter le type de type. Si vous ne spécifiez pas le type de type, vous n'obtiendrez pas le bon style, car le framework bootstrap définit les styles via la forme d'entrée [type = "?"], Comme: type de texte, qui correspond à l'entrée [type = "texte"]
Afin de rendre les commandes belles dans divers styles de forme, vous devez ajouter le nom de classe.
<form role = "form"> <div> <entrée type = "e-mail" placeholder = "Entrer e-mail"> </div> </ form>
Tirez la boîte de sélection de la boîte de sélection
La sélection multi-lignes définit la valeur de l'attribut multiple à plusieurs
<form role = "form"> <v> <lectring> <option> 1 </ option> <popoptive> 2 </ option> <option> 3 </ option> <opopoption> 4 </ option> <option> 5 </ option> </lect> </div> <v> <Sélectionner multiple> <opoption> 1 </ option> <option> 2 </ option> <option> 3 </ option> <opopoption> 4 </ option> <option> 5 </ option> </lect> </ div> </form>
Champ de texte textarea
Le champ de texte est le même que la méthode d'utilisation d'origine. Le réglage des lignes peut définir sa hauteur, le réglage des cols peut définir sa largeur. Si le nom de classe .form-control est ajouté à l'élément TextArea, il n'est pas nécessaire de définir l'attribut COLS, car la largeur d'espace de la cible de style .form-control dans le framework bootstrap est à 100% ou automatique.
<form role = "form"> <div> <TextArea Rows = "3"> </ TextArea> </div> </ Form>
Cocher la boîte à cocher et la radio radio
Il y aura quelques problèmes mineurs avec la case à cocher et la radio en conjonction avec les étiquettes (telles que les problèmes d'alignement)
<form> <div> <label> <entrée type = "Checkbox"> N'oubliez pas le mot de passe </vabe> </div> <div> <blouk> <entrée type = "radio" name = "Optionsradios" id = "Optionsradios1" Checked> comme </diab> </div> <div> <vabed> <entrée type = "radio" name = "OptionsRadios" id = "Optionsradios2">
1. Qu'il s'agisse de case ou de radio, ils sont enveloppés dans des étiquettes.
2. La case à cocher et la balise d'étiquette sont placées dans un conteneur appelé .Checkbox
3. La radio et l'étiquette sont placés dans un conteneur nommé .radio. Bootstrap utilise principalement des styles .Checkbox et .radio pour gérer l'alignement des cases à cocher, des boutons radio et des étiquettes.
.Radio, .Checkbox {Affichage: Block; min-height: 20px; padding-left: 20px; margin-top: 10px; margin-boot: 10px;}. Radio Label, .Checkbox Label {Affichage: Inline; Font-Weight: Normal; Cursor: Pointer). entrée [Type = "Checkbox"],. Checkbox-inline input [type = "checkbox"] {float: left; margin-left: -20px;}. Radio + .radio, .checkbox + .checkbox {margin-top: -5px;}Cocher les cases et les boutons radio horizontalement
1. Si la boîte à cocher doit être organisée horizontalement, il vous suffit d'ajouter le nom de la classe sur l'étiquette de l'étiquette.Checkbox-inline
2. Si la radio a besoin d'une arrangement horizontal, ajoutez simplement le nom de classe.
Voici le code source CSS:
.Radio-inline, .Checkbox-inline {Affichage: en ligne de bloc; padding-left: 20px; marge-fond: 0; Font-Weight: Normal; Vertical-Align: Middle; Cursor: Pointer;}. Radio-inline + .Radio-inline, .Checkbox-inline + .Check Box-inline {margin-top: 0; margin-left: 10px;}} <v> <Belle> <input type = "radio" name = "sexe" value = "option1"> mâle </ labe> <label> <input type = "radio" name = "sexe" value = "option2"> femelle </ labe> </ labe> <input type = "radio" name = "sexe" value = "option3"> neutre </ label> </v>État de contrôle de la forme
1. Statut de mise au point:
L'état de mise au point est mis en œuvre par pseudo-classe: focus. L'état de mise au point dans le contrôle du formulaire bootstrap supprime le style de contour par défaut et ajoute à nouveau l'effet d'ombre. Ce qui suit est
Code source CSS:
.form-Control: Focus {Border-Color: # 66AFE9; Coupure: 0; -webkit-box-shadow: encart 0 1px 1pxrgba (0,0,0, .075), 0 0 8px rgba (102, 175, 233, .6); box-shadow: 0 1px 1pxrgba (0,0, .075), 0 1px 1pxrgba (0,0,. 8px RGBA (102, 175, 233, .6);}Comme on peut le voir à partir du code source, afin de faire en sorte que le contrôle ait l'effet de style ci-dessus dans l'état de mise au point, vous devez ajouter le nom de classe au contrôle.form-control
<form> <div> <div> <input type = "text" placeholder = "pas un effet dans focus"> </div> <div> <input type = "text" placeholder = "Effect in focus"> </div> </div> </orm>
L'effet des commandes de fichiers, de radio et de case à cocher dans le foyer est également différent de celui des contrôles d'entrée ordinaires. Ce qui suit est le code source
entrée [type = "file"]: focus, entrée [type = "radio"]: focus, entrée [type = "checkbox"]: focus {sort: mince pointillé; contour: 5px auto -webkit-focus-ring-color;2. Désactiver le statut:
Ajoutez simplement la propriété désactivée sur le contrôle de formulaire correspondant, et ce qui suit est le code source CSS:
.Form-Control [Disabled],. input[type="radio"][disabled],input[type="checkbox"][disabled],.radio[disabled],.radio-inline[disabled],.checkbox[disabled],.checkbox-inline[disabled],fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] .radio,fieldset[disabled] .Radio-inline, Fieldset [désactivé] .CheckBox, Fieldset [Désable] .CheckBox-inline {Cursor: non allowé;}exemple:
<input type = "text" placeholder = "formant désactivé" désactivé>
Si Fieldset définit la propriété désactivée, le domaine entier sera désactivé
exemple:
<formulaire de formulaire = "form"> <Fieldset Disabled> <div> <Belle> La case d'entrée est désactivée </ Label> <Input Type = "Text" Paceholder = "Désactiver l'entrée"> </ Div> <v> <vabe> La case déroulante est désactivée </ Label> <lect> <option> 1 </ Option> </ SELECT> </ Option> </ Option> <option> > <input type = "Checkbox"> La boîte d'option est désactivée </ label> </div> <Button type = "Soumider"> Soumider </ Button> </FielDset> </form>
L'effet est le suivant: (Une icône désactivée apparaît lorsque la souris est déplacée. Voici une capture d'écran directe qui ne peut pas être vue)
3. Statut de vérification
Bootstrap fournit les effets suivants:
1.Has d'avertissement: statut d'avertissement jaune
2. .Has-error: statut d'erreur rouge
3..
Lorsque vous l'utilisez, ajoutez simplement le nom de classe d'état au conteneur du groupe de formulaire. Les effets sont les mêmes dans les trois états, mais les couleurs sont différentes.
exemple:
<form> <div> <label> État de réussite </ label> <input type = "text" placeholder = "Success Status"> </ div> <div> <vabe> statut d'erreur </ labe> <input type = "Text" Paceholder = "Error Status"> </ div> <div> <vabe> Statut d'avertissement </ Label> <entrée Type = "Text" PlaceHolder = "Wardening Status"> </ Div> </ Form>
Les effets sont les suivants:
Parfois, différents états fournissent différentes icônes lors de la validation du formulaire. Si vous souhaitez afficher l'icône dans l'état correspondant, il vous suffit d'ajouter le nom de classe. Notez qu'il doit être utilisé avec .has-error, .has-success, .has-warning.
Les petites icônes de bootstrap sont toutes fabriquées à l'aide de @ font-face. comme:
<span class = ”Glyphicon-Warning Form-Control-Feedback”> </span>
exemple:
<form> <div> <label> État de réussite </ labe> <entrée type = "text" placeholder = "Success Status"> <span> </span> </ div> <div> <vabe> Statut d'erreur </cabilège </ving type = "Text" PlaceHolder = "Error Status" Status "> <span> </span> </div> </ form>
Les effets sont les suivants:
Formulaire d'informations rapides
Généralement, lors de la vérification du formulaire, différentes informations rapides sont nécessaires. Utilisez .Help-block dans le framework bootstrap pour afficher les informations rapides dans les blocs et l'afficher en bas du contrôle.
Voici le code source CSS:
.Help-block {affichage: bloc; marge: 5px; marge-fond: 10px; couleur: # 737373;}exemple:
<form> <div> <label> Statut de réussite </ labe> <entrée type = "Text" Planholder = "Success Status"> <span> Les informations d'entrée sont correctes </span> <spandé> </span> </v> <v> <vabe> Statut d'erreur </colg status </bable> <entrée type = "text" placeholder = "statut d'avertissement"> <span> Veuillez saisir les informations correctes </span> <span> </span> </div> </ form>
Les effets sont les suivants:
Si vous ne souhaitez pas ajouter votre propre code à bootstrap.css et que la conception en a besoin, vous pouvez utiliser le système de grille de bootstrap, par exemple:
<form role = "form"> <div> <label for = "inputSuccess1"> Success Status </ Label> <div> <div> <input type = "text" id = "inputSuccess1" placeholder = "Success Status"> </ div> <span> Les informations que vous avez entrées sont correctes </span> </div> </div> </ form>
Ce qui précède est le contenu pertinent du composant de formulaire bootstrap qui vous est présenté par l'éditeur. J'espère que cela vous sera utile!