Tout d'abord, je voudrais remercier tous mes amis pour leur soutien. Je continuerai à mettre à jour mon résumé de l'étude sur Bootstrap. S'il y a quelque chose qui ne va pas avec l'écriture, veuillez me corriger. En ce qui concerne l'article précédent, la disposition fixe et la disposition du streaming sont très importantes. Si vous n'êtes pas clair à ce sujet, vous pouvez jeter un œil à ce que j'ai écrit: Notes d'étude Bootstrap: CSS Style Design (1)
Cette fois, jetons un coup d'œil à certaines classes spécifiques et clés sur les styles de bootstrap et comment utiliser ces classes, les différences entre les classes et certaines classes connexes impliquées, qui sont expliquées lors de la répertorie.
1. Forme
1. Classe de contrôle de formulaire: La largeur des balises <prening> <lect> <Textarea> contenant cette classe deviendra largeur: 100%, et dans la forme, le contrôle est généralement inclus dans le groupe de formulaire avec la balise d'étiquette.
<formulaire de formulaire = "form"> <! - Toutes les entrées, TextArea, Select Elements avec ensemble de classes de formulaire de formulaire seront par défaut sur la largeur: 100% -> <div> - Form-Group: D'une manière générale, les labels et l'enveloppe d'espace sont utilisés dans Form-Group <Label for = "ExempleInPuttemail"> Adresse par e-mail </boup " pour = "ExampleInPuteMail"> Nom de messagerie </ Label> <TextArea> 11111 </ TextArea> </div> <div> <label for = "SELECT" SELECT FORM </ Label> <Select> <Option> 111 </ Option> <option> 222 </ Option> </ Select> </div> </ form>
Selon le code ci-dessus, nous pouvons le regarder un par un. Ajouter une classe de formulaire en ligne (mettre le contrôle en une seule ligne) | Classe Form-Horizontal (l'étiquette est à gauche et le contrôle est à droite), qui utilise l'aide de l'étiquette.
<! - Form-Inline Class rend le formulaire Horizontally présente -> <form> - SECONDEMMENT il y a un montant en ligne, une radio-inline, etc. <v> <étiquette pour = "ExempleInputAmount"> Montant </ Label> <Iv> - Intput-Group: Input Group <div> @ </div> --Addon: REFONS au texte ou à la bouton Ajouté <entrée = "Texte" <div> @ </div> </div> </div> <Button Type = "Soumider"> Recherche </fontillante> </ form>
Les effets sont les suivants:
S'il n'est pas ajouté, le bouton sera pressé à la ligne suivante. Plus de photos ne sont publiées ici, vous pouvez coller du code et la tester vous-même.
<! - Hostly organisé le formulaire de formulaire de contrôle: signifie que le texte est aligné à droite -> <form> <div> <label for = "inputEmail"> e-mail: </bolg placeholder = "mot de passe"> </ div> </div> </div> </form>
Les effets sont les suivants:
( Remarque: la zone de texte d'entrée ici doit tenir compte de 5/6, j'ai personnalisé sa largeur à 20%)
Ici, concernant le formulaire-horizontal, il doit être effectué en conjonction avec le système de grille de bootstrap.
L'utilisation du nom de classe "form-horizontal" sur l'élément <form> a les fonctions suivantes:
1: Définissez les valeurs de rembourrage et de marge du contrôle de la forme. Le code ci-dessus peut être vu dans la console de débogage, padding-left: 50px.
2: Modifiez l'expression de "Form-Group", similaire à la "ligne" du système de grille.
2. La fonction de l'étiquette
<étiquette pour = "Hello1"> Bonjour </ Label> <Input Type = "Text" id = "Hello"> <br> --- Le Halo bleu est généré <label for = "1111"> Bonjour </Bel> <Input type = "Text" id = "Jiang"> <br> --- L'ID ne correspond pas à cela, il n'y a aucune réponse. Ce n'est que lorsque la souris est placée sur le contrôle qu'il y aura un halo bleu
Sur la base du code ci-dessus, voir: L'attribut FOR dans l'étiquette doit correspondre à l'ID dans le contrôle. Fonction: Assurez-vous que lorsque la souris est placée sur l'étiquette, le contrôle correspondant produira un halo bleu.
3. Rôle du rôle
Trouvez-vous étrange pourquoi vous devez ajouter un rôle lors de l'écriture de formulaires ou de certains contrôles?
Fonction: Assurez-vous que le logiciel de lecture d'écran peut être reconnu. Le logiciel de lecture d'écran est un logiciel qui aide les personnes retardées mentalement à accéder à Internet. Il transmet des images, du texte, etc. pour retardé les personnes mentalement sous forme de voix. Par conséquent, afin de s'assurer que le logiciel de lecture d'écran peut être reconnu, il n'y a généralement pas de balises ou de balises sémantiques avec des fonctions spéciales qui doivent être écrites dessus. Par exemple:
<a href = "#" role = "Button"> lien </a> <! - Si le lien a est utilisé comme bouton et est utilisé pour déclencher certaines fonctions sur la page actuelle, plutôt que de se connecter à d'autres pages ou le reste de la page actuelle, assurez-vous de définir Role = "Button" -> À l'origine, la balise A représente un lien, mais il est utilisé ici comme bouton. Le logiciel de lecture d'écran ne peut pas le reconnaître, donc Role = "Button" doit être ajouté pour permettre au logiciel de lecture d'écran de savoir qu'il s'agit d'un bouton de bouton.
4. Quelle est la différence entre l'étiquette, le marais Aria, le marquage Aria?
<v> <input type = "text" id = "idcard" aria-label = "id carte"> <p>
Les effets sont les suivants:
Le premier n'a pas le mot "carte d'identité" visuelle, qui sont tous deux pour la commodité du logiciel de lecture d'écran à identifier. C'est juste que Aria-Babel est caché.
Jetons un coup d'œil à l'utilisation d'étiqueter Aria. Habituellement, lorsque le texte de l'étiquette existe déjà dans un certain élément, utilisez un étiquette ARIA et sa valeur est l'ID de tous les éléments de lecture. Jetons un coup d'œil aux sous-marins suivants:
<div> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Sélectionnez les options suivantes <span> </span> </ Button> <Ul Role = "Menu" Aria-LABELLEDBY = "DropDownMenu1"> <li rôle = "Présentation"> <a rôle = "MenUiStem" role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> 22222 </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> 22222 </a> </li> <li role = "présentation"> <a role = "Menushem" href = "#"> 33333 </a> </li> </ul> </div>
À l'heure actuelle, l'UL contient Li et est contrôlé dans le bouton, il est donc plus approprié d'utiliser Aria-marquée à ce moment. Autrement dit, la portée d'utilisation entre les trois est différente, et les fonctions de base sont les mêmes, tout pour la commodité de la reconnaissance du logiciel de lecture d'écran. En ce qui concerne les classes cachées, nous devons mentionner la classe SR uniquement. Jetons un coup d'œil.
<étiquette pour = "inputEmail"> Email: </bablowe>
<étiquette pour = "inputEmail"> Email: </bablowe>
L'effet à l'heure actuelle est: le texte ci-dessus est caché, et seule cette différence restera inchangée.
5. Classe handicapée
Dans le formulaire, vous devez faire attention à cette classe, comparons-le ici.
<! - Introduire un formulaire avec Fieldset, Fonction: Incluez le formulaire dans un bloc -> <formulaire Role = "Form"> <FieldSet Disabled> <div> <Label for = "DisabledTextInput" Disabled Input Box </ Label> <INPUT TYPE = "Text" ID = "DisabledTextInput" PlaceHolder = "Disabled"> </v> <div> <label pour = "DisabledSelect"> Distinat Drop-Down Box </ Labeled pour = "DisabledSel" id = "DisabledSelect"> <opoption> Désactiver non sélectionnable </opoption> </lect> </ div> <div> <vabed> <input type = "Checkbox"> Disable Impossible de sélectionner </ Label> </div> <Button Type = "Soumider"> Soumider </ Button> </ FieldSet> </orm>
Si vous ajoutez une classe désactivée à l'ensemble de fichiers, le formulaire désactivé ne sera désactivé que pour l'entrée de sélection de bouton, etc., et ne fonctionnera pas pour les autres attributs de légende des éléments. En comparaison, ajoutez l'attribut légende
<! - Propriété à longueur ajoutée -> <formulaire de formulaire = "form"> <FieldSet Disabled> <gend> <entrée type = "text" placeholder = "Color devient grisé, mais pas désactivé"> </gend> - Ici, la souris peut être placée dans la boîte d'entrée <div> <étiquette pour = "DisabledText"> Disabled Box Disabled Box </ Label> <Input Type = "Text" ID = "ID =" DisabledThold " </div> <v> <étiquette pour = "DisabledSelect"> Disabled Drop-down Box </Babe> <SELECT ID = "DisabledSelect"> <Option> Non Selectable </ Option> </ Select> </div> <div> <Babel> <Input Type = "Checkbox"> Impossible de Select </ Label> </ Div> <Button Type = "Soumettre"> Soudre </ Button> </fIeldSet> Désactivé pour l'entrée de sélection de bouton, etc., et ne fonctionne pas pour d'autres éléments légende ->
6.Data-Toggle Data-Target Data-Spy Attribut
HTML5 permet aux développeurs d'ajouter librement des attributs à leurs balises, et cet attribut personnalisé commence généralement par "Data-".
Data-Toggle: indique l'interaction des données. Cliquez sur le bouton dans la colonne ci-dessus pour passer au menu déroulant.
Data-Spy indique: surveillance
Data-Traget: Target.
Cela implique des événements dans JS, et je ne les expliquerai pas en détail. Je vais jeter un œil à ces problèmes lorsque j'entrerai dans l'apprentissage JS dans Bootstrap. Il y a encore beaucoup de choses impliquées dans la forme, et il y a presque autant de résumés. Il y a aussi des ajouts. S'il vous plaît laissez-moi un message ci-dessous.
2. Classe de bouton
Ce n'est pas difficile, rappelez-vous simplement la classe d'attribut, c'est facile à comprendre.
<a href = "#" "role =" bouton "> lien </a> <bouton type =" soumettre "Disabled =" Disabled "> Default </ Button> <Button Type =" soumi "> primaire </ bouton> <Button Type =" Soumider "> Success </ Button> <Button Type = Button <Button </ Button Type =" Soumider "> Warning </ Warning> <Poute = Button" Button type = " value = "input"> <input type = "bouton" value = "soumi">
Les effets sont les suivants:
3. Catégorie d'image
<! - Centre le bloc central de l'image: Centre le contenu pour afficher IMG Round: avec des coins arrondis IMG-Circle: Ring IMG-Thumbnail: Ajoutez une bordure extérieure à l'image ->
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
Les effets sont les suivants:
Pour résumer, je pense personnellement que le rôle des formes est encore très important. Il est plus facile d'expliquer ici d'autres catégories de base. Le prochain article sera transféré à l'apprentissage de la composante CSS: Bootstrap Learning Notes CSS Component (3)
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
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.