Les contrôles de formulaire pris en charge par bootstrap sont les suivants:
Bootstrap prend en charge les contrôles de formulaire les plus courants, principalement en entrée, textarea, case, radio et sélection.
Boîte de saisie
Le champ de texte de formulaire le plus courant est l'entrée de la boîte d'entrée. L'utilisateur peut saisir la plupart des données de formulaire nécessaire. Bootstrap prend en charge tous les types d'entrée HTML5 natifs, y compris: texte, mot de passe, datetime, datetime-local, date, mois, heure, semaine, numéro, e-mail, URL, recherche, tél et couleur. Des déclarations de type appropriées sont nécessaires afin que les entrées puissent être entièrement stylisées.
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - boîte d'entrée </apps.bdimg.com/libs/bootstrap/3.3.0/css/apps.bdimg.min.css "> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </cript> src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </ script> </ head> <body> <form rôle = "form"> <v> <label for = "name"> tag </ label> <upy type = "text" lickolder = "text entrée"> </ div>
Les résultats sont les suivants:
Textarea
Lorsque vous devez effectuer plusieurs lignes d'entrée, vous pouvez utiliser la zone de texte TextArea. La propriété des lignes peut être modifiée si nécessaire.
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - box de texte </apps.bdimg.com/libs/bootstrap/3.3.0/css/apps.bdimg.com/libs/bootstrap/3.3.0/css/bootsstrap.min.css "> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </cript> src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </ script> </ head> <body> <form role = "form"> <div> <label for = "name"> Text Box </ label> <TextArea rows = "3"> </ textarea> </div> </ form> </ body> </html>
Les résultats sont les suivants:
Checkbox ((Checkbox) et Radio Box (radio)
Les cases à cocher et les boutons radio sont utilisés pour permettre aux utilisateurs de sélectionner dans une série d'options prédéfinies.
Lors de la création d'un formulaire, utilisez la boîte à cocher si vous souhaitez que l'utilisateur sélectionne plusieurs options dans la liste. Si vous empêchez les utilisateurs de sélectionner une seule option, utilisez la radio.
Utilisez la classe .Checkbox-inline ou .radio-inline pour une série de cases à cocher et de boîtes radio pour les contrôler pour apparaître sur la même ligne.
L'exemple suivant montre ces deux types (par défaut et en ligne):
<! DocType Html> <Html> <A-Head> <Title> Bootstrap Instance - Cherchez les cases et les boutons radio </apps.bdimg.com/libs/bootstrap/3.3.0/css/bootsstrap.min.css "> < src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </cript> src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </ script> </ head> <body> <label pour = "name"> Instances de case par défaut et de boutons radio </ label> 1 </ label> </ div> <div> <vabe> <entrée type = "Checkbox" value = ""> Option 2 </ Label> </div> <div> <Belle> <Input Type = "Radio" Name = "OptionsRadios" id = "OptionsRadios1" Value = "Option1" Checked> Option 1 </ Label> </div> <v> <label> "Entrée =" Radio "Name =" OptionsRadios "ID =" Optionsradios2 "Entrée =" Radio "Name =" OptionsRadios "ID =" Optionsradios2) Value = "Option2"> Option 2 - La sélection désélectionnera l'option 1 </ Label> </div> <label for = "name"> Instance à cocher inclinée et instance du bouton de radio </ label> <v> <vabed> <entrée Type = "Checkbox" ID = "InneleChEckBox1" Value = "Option1"> Option 1 </ Label> <label> Option2 "> Option2" 2 </ Label> <Belle> <Input Type = "Checkbox" ID = "InlineCheckBox3" Value = "Option3"> Option 3 </ Label> <Beld> <Input Type = "Radio" Name = "OptionsRadiosinline" ID = "OptionsRadiosInline" ID = "OptionsRadiosInline" ID = "OptionsRadios4" Value = "Option2> Option 2 </ label>
Les résultats sont les suivants:
Cocher les cases et les boutons radio
Utilisez la zone de sélection lorsque vous souhaitez que l'utilisateur sélectionne parmi plusieurs options, mais une seule option peut être sélectionnée par défaut.
Utilisez l'option <lect> Afficher la liste, qui est généralement une liste de sélection familière aux utilisateurs, tels que l'état ou le numéro.
Utilisez plusieurs = "multiples" pour permettre aux utilisateurs de sélectionner plusieurs options.
L'exemple suivant montre ces deux types (sélectionnez et multiples):
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - sélectionnez box </Apps.bdimg.com/libs/bootstrap/3.3.0/css/bootsstrap.min.css "> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootsstrap.min.js"> </dcript> role = "form"> <div> <label for = "name"> sélectionnez la liste </ label> <lect> <option> 1 </ option> <option> 2 </ option> <option> 3 </ option> <option> 4 </ option> <option> 5 </ option> </ select> <label for = "name"> Liste de sélection multiple-sélect </ / SELECT> multiple> <opoption> 1 </ option> <option> 2 </ option> <option> 3 </ option> <option> 4 </ option> <option> 5 </ option> </lect> </ div> </form> </ body> </html>
Les résultats sont les suivants:
Commandes statiques
Lorsque vous devez placer du texte brut derrière une balise de formulaire dans une forme horizontale, utilisez la classe .form-control-static sur <p>.
<! Doctype html> <html> <éad- head> <ititle> instance bootstrap - contrôle statique </apps.bdimg.com/libs/bootstrap/3.3.0/css/bootsstrap.min.css "> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootsstrap.min.js"> </dcript> role = "form"> <div> <bablow> e-mail </bétique> <v> <p> [email protected] </p> </div> </ div> <v> <label for = "inputpassword"> Mot de passe </ label> <v> <input type = "passway" id = "inputpassword" placeholder = "s'il vous plaît entrez le mot de passe"> </v> </v> </orm> </orm>
Les résultats sont les suivants:
État de contrôle de la forme
En plus de l'état: Focus (c'est-à-dire que l'utilisateur clique sur l'entrée ou utilise la touche Tab pour se concentrer sur l'entrée), Bootstrap définit les styles pour les boîtes d'entrée désactivées et fournit une classe pour la validation du formulaire.
Focus du cadre d'entrée
Lorsque l'entrée d'entrée reçoit: Focus, le contour de la zone d'entrée est supprimé et la box-shadow est appliquée.
Entrée de la boîte d'entrée désactivée
Si vous souhaitez désactiver une entrée de boîte d'entrée, ajoutez simplement l'attribut désactivé, qui non seulement désactive la zone d'entrée, mais modifie également le style de la zone d'entrée et le style du pointeur de la souris lorsque le pointeur de la souris plane sur l'élément.
Foux de champs handicapés
Ajoutez un attribut désactivé à <FielDset> pour désactiver tous les contrôles dans <FielDset>.
Statut de vérification
Bootstrap contient des styles de vérification pour les erreurs, les avertissements et les messages de réussite. Il suffit d'ajouter simplement la classe appropriée (.has-warning, .has-error ou .has-success) à l'élément parent pour utiliser l'état de vérification.
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - statut de contrôle du formulaire </apps.bdimg.com/libs/bootstrap/3.3.0/css/bootsstrap.min.css "> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </cript> src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </ script> </ head> <body> <form role = "form"> <div> <label> focus </ label> <div> <input id = "focusInput" type = "text" varie focus ... "> </ div> </ div> <div> <label for =" inputpassword "> Disable </ labe> <v> <input id =" DisabledInput "type =" text "placeholder =" Cette boîte d'entrée interdit l'entrée ... "Disable Disabled) </ Labe> <div> <entrée type = "Text" id = "DisabledTextInput" Paceholder = "Disabled"> </div> <div> <label for = "DisabledSelect"> Disable Sélection Menu (Fieldset Disable pour = "inputSuccess"> Entrez réussi </vabe> <v> <input type = "text" id = "inputSuccess"> </div> </ div> <div> <label for = "inputwarning"> Entrée d'avertissement </ labe> <v> <entrée = "Text" ID = "Inputwarning"> </ div> </v> <div> <étiquette pour = "entrée" type = "text" id = "inputError"> </ div> </ form> </ body> </html>
Les résultats sont les suivants:
Taille de contrôle de la forme
Vous pouvez utiliser la classe .input-lg et .col-lg- * pour définir la hauteur et la largeur de la forme, respectivement. L'exemple suivant le démontre:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - taille de contrôle du formulaire </apps.bdimg.com/libs/bootstrap/3.3.0/css/bootsstrap.min.css "> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </cript> src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </ script> </ head> <body> <form rôle = "form"> <v> <entrée type = "Text" PlaceHolder = ". Disponse-lg"> </ div> <v> <entrée type = "Text" PlaceHolder = ". Input "> </ div> <div> <input type =" text "placeholder =". input-sm "> </ div> <div> </ div> <div> <lelect> <option value =" ">. input-lg </ secream> </div> <v> <évac> <option value =" "Default Sélection </opoption> </lect> </div> <v> <div> <SELECT> Value = "">. Input-sm </ option> </ select> </ div> <div> <div> <input type = "text" placeholder = ". Col-lg-2"> </ div> <div> <input type = "text" placeholder = ". Col-lg-3"> </div> <div> <input type = "text" placeholder = ". Col-lg-4"> </div> </div> </ form> </ody> </html>
Les résultats sont les suivants:
Le rédacteur en chef de Wulin.com vous recommande des sujets connexes:
Compétences de fonctionnement des composants bootstrap
Résumé des connaissances liées à l'amorçage
Ce qui précède sont les contrôles de formulaire pris en charge par bootstrap. Tout le monde le comprend. Si vous avez des questions, laissez-moi un message. L'éditeur répondra à tout le monde à temps. Dans le même temps, je tiens à remercier tout le monde pour son soutien au site Web de Wulin.com.