Cet article présentera principalement les compétences de l'utilisation de formes bootstrap.
1. Formulaire de base Bootstrap
Les éléments communs sous les formulaires incluent principalement: les boîtes d'entrée de texte, les boîtes de sélection déroulantes, les boutons radio, les boutons à cocher, les champs de texte et les boutons, etc.
Regardons d'abord une forme de base:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <itle> formulaires de base </netdna.bootstrapcdn.com/bootstrap/3 <form role = "form"> <div> <étiquette pour = "ExampleInPuteMail1"> Email: </bold> <entrée type = "e-mail" id = "ExempleInPuleMail1" Planholder = "Veuillez entrer votre adresse e-mail"> </ div> <v> <label pour = "ExempleInputPassword1"> Passue: </ Label> <Entrée Type = "Passue" ID = "ExempleInputPassPassword1" </div> <div> <Babel> <entrée Type = "Checkbox"> N'oubliez pas le mot de passe </vabe> </div> <Button Type = "Soumide"> Login </ Button> </ Form> </ Body> </html>
Les rendus sont les suivants:
Nous pouvons également réaliser différents effets en ajoutant différents noms de classe à former. Les règles de forme spécifiques sont présentées dans le tableau suivant:
Par exemple:
<form role = "form"> ... </ form>
2. Contrôle de la forme Bootstrap
1) Entrée de la boîte d'entrée
<form role = "form"> <div> <! - Le type de type doit être ajouté. Si le type de type n'est pas spécifié, le style correct ne sera pas obtenu -> <entrée type = "e-mail" placeholder = "Entrée e-mail"> </div> </form>
2) Tirez le boîtier de sélection vers le bas Sélectionner
<form rôle = "form"> <v> <! - Boîte de sélection déroulante en une seule ligne -> <lect> <popoptive> 1 </ option> <option> 2 </ option> </ select> </ div> <v> <! - Box de sélection multi-lignes -> </ div> </ Form>
3) Texte 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 et le réglage des cols peut définir sa largeur. Mais si le nom de classe "format-control" est ajouté à l'élément TextArea, il n'est pas nécessaire de définir l'attribut COLS. Parce que le contrôle de formulaire de style "formulaire de formulaire" dans le framework Bootstrap est à 100% ou automatique.
<form role = "form"> <div> <! - Rows = "3" Définissez la hauteur trois lignes -> <TextArea Rows = "3"> </ TextArea> </div> </form>
4) Box
Arrangement vertical:
<form role = "form"> <div> <label> <entrée type = "checkbox" value = ""> cocher la boîte à cocher </ label> </div> </ form>
Arrangement horizontal:
<form role = "form"> <div> <label> <entrée type = "checkbox" value = "option1"> checkbox1 </ labe> <label> <input type = "checkbox" value = "option2"> Checkbox2 </ label> </v> </ form>
5) Radio du bouton de sélection unique
Arrangement vertical:
<form role="form"> <div> <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>A</label> </div> <div> <!-- Whether it is checkbox or radio, they are wrapped in label--> <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">B</label> </div> </ form>
Arrangement horizontal:
<formulaire de formulaire = "form"> <div> <Belle> <entrée type = "radio" value = "option1" name = "sexe"> a </ label> <belg> <input type = "radio" value = "option2" name = "sexe"> b </vabe> </v> </orm>
Remarque: Checkbox et Label sont placés dans un conteneur appelé ".Checkbox"; La radio et l'étiquette sont placés dans un conteneur appelé ".radio".
3. État de contrôle du formulaire bootstrap
1) Statut de mise au point
L'état de mise au point est réalisé en ajoutant le nom de formulaire de nom de classe à l'entrée. L'état de mise au point du contrôle de forme dans le framework bootstrap supprime le style par défaut du contour et ajoute à nouveau l'effet d'ombre.
<! - Form-horizontal atteint l'effet de forme horizontale -> <form role = "form"> <div> <div> <input type = "text" placeholder = "focus status"> </div> </div> </ form>
2) Désactiver le statut
Ajoutez simplement "désactivé" au contrôle de formulaire qui doit être désactivé:
<input type = "text" placeholder = "le formulaire est désactivé, ne peut pas être entré" désactivé>
3) Statut de vérification
Pour la vérification du formulaire, vous devez également fournir un style de statut de vérification. Ces effets sont également fournis en bootstrap:
Lorsque vous l'utilisez, il vous suffit d'ajouter le nom de classe d'état correspondant au conteneur de groupe de formulaire.
<form role = "form"> <div> <label for = "inputwarning1"> statut d'avertissement </ labe> <input type = "text" id = "inputwarning1" placeholder = "statut d'avertissement"> </ div> <v> <label for = "inputError1"> Statut d'erreur </ label> <entrée type = "text" id = "inputErro for = "inputSucCess1"> Success Status </Beld> <input type = "text" id = "inputSucCess1" placeholder = "Success"> </div> </ form>
Les rendus sont les suivants:
Si vous voulez que le formulaire affiche l'icône dans l'état correspondant, il vous suffit d'ajouter le nom de classe "Has-Feedback" à l'état correspondant (ce nom de classe doit être accompagné de "Has-Error", "Has-Warning" et "Has-Success").
4. bouton de formulaire Bootstrap
1) Boutons de style personnalisés
<Button Type = "Button"> Basique Button </ Button> <Button Type = "Button"> Button par défaut </ Button> <Button Type = "Button"> Button principal </ Button> <Button Type = "Button"> Button Success </ Button> <Button Type = "Button"> Button d'informations </ Button> <Button Type = "Button" Button "Button </ Button> <Button Type = Button" Bouton "Button" Button "Button </fraire> <
Les rendus sont les suivants:
2) Le bouton bootstrap prend en charge plusieurs étiquettes, et les boutons fabriqués par d'autres étiquettes sont les suivants:
<Button Type = "Button"> Button Button Button </ Button> <Type d'entrée = "Soumider" Valeur = "Button de balise d'entrée" /> <span> Button de balise Span </span> <div> Button Tag </div> <a href = "##"> A Bouton de balise </a>
3) Taille du bouton
Contrôlez la taille du bouton en ajoutant le nom de classe sur le bouton de base ".btn".
<Button Type = "Button"> Button normal </ Button> <Button Type = "Button"> Big Button </ftont> <Button Type = "Button"> Petit Button </ftont>
4) bouton de blocage (plus utilisé sur les terminaux mobiles)
Bouton de bloc: La largeur du bouton remplit l'ensemble du conteneur parent (largeur: 100%) et n'aura aucune valeur de rembourrage et de marge.
Bootstrap fournit un nom de classe "BTN-Block". Le bouton peut utiliser ce nom de classe pour implémenter un bouton de bloc (pour plus de détails, veuillez vous référer à la ligne de fichier bootstrap.css 2340 à la ligne 2353)
<Button Type = "Button"> Big Button </ Button> <Button Type = "Button"> Button normal </fontificateur> <Button Type = "Button"> Petit Button </ftont>
Les rendus sont les suivants:
5. Bootstrap Form Form-Button Statut
Dans Bootstrap, les effets d'état des boutons sont principalement divisés en deux types: l'état actif et l'état désactivé.
1) État actif: comprend principalement plusieurs types d'état de suspension de bouton (: Hover), cliquez sur l'état (: actif) et l'état de mise au point (: focus).
2) Désactiver le statut
Il existe deux façons de désactiver le bouton:
Méthode 1: Ajouter un attribut désactivé dans la balise
Méthode 2: Ajouter le nom de classe "désactivé" à l'étiquette d'élément
Les principales différences entre les deux sont:
Le style ".Disabled" n'interdit pas le comportement par défaut du bouton. La méthode d'ajout de l'attribut "désactivé" à l'étiquette de l'élément peut interdire le comportement par défaut de l'élément.
6.bootstrap Image
Dans Bootstrap, les styles suivants sont fournis pour le style des images:
Comment utiliser: ajoutez simplement le nom de classe correspondant à la balise IMG, comme suit:
<img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/20160726151432225">
L'effet en cours d'exécution est le suivant ou affiche la fenêtre de résultat à droite:
7.bootstrap icône
Bootstrap fournit 200 icônes différentes, comme suit:
Comment utiliser: ajoutez simplement le nom de classe d'icône correspondant à la balise, comme suit:
<span> </span>
<span> </span>
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Série d'articles:
La première fois que je suis entré en contact avec la disposition de base magique Bootstrap //www.vevb.com/article/89278.htm
La première fois que je suis entré en contact avec le système magique de grille bootstrap //www.vevb.com/article/89333.htm
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.