Le plus grand avantage de Bootstrap pour les développeurs est sa disposition réactive et d'excellents styles.
Maintenant, je vais présenter quelques étapes et certaines choses couramment utilisées pour utiliser Bootstrap.
1. Écrivez l'en-tête
<A-head> <meta charset = "utf-8"> <! - Afin de faire en sorte que IE utilise le dernier mode de rendu, ajoutez cette balise -> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <! - Pour une mise en page réactive, obtenez d'abord la largeur physique du dispositif, définissez la largeur de la page Web en fonction de la largeur physique de la montée name = "Viewport" contenu = "width = device-width, initial-scale = 1"> <itle> Learnbootstrap </tapt> <! - Reportez-vous directement au fichier -> <link = "Stylesheet" type = "Text / CSS" HREF = "CSSS / BOOTSTRAP.MIN.CSS"> <! - Adresse CDN de référence -> <lin href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <! - Afin de prendre en charge IE9 ou ci-dessous, ajoutez-les -> <! - [Si lt ie 9]> <! - Laissez-le prendre en charge H5 Tags -> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </ script> <! - Laissez-le prendre en charge les requêtes de médias, c'est-à-dire, <! - [endif] -> </ head>
2. introduce js
Cela peut être écrit dans le corps
<! - Fichier jQuery. Assurez-vous de présenter -> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- Le dernier fichier JavaScript de Bootstrap Core -> <script src =" // cdn.bootcss.com/bootstrap/3.5/js/bootsstrames
3. Utilisez la classe de conteneurs
La classe de conteneurs est une classe div couramment utilisée
Utilisez principalement la fonction de centrage
<div> Bonjour </div>
4. Utilisez un système rasterisé
Le système rasterisé est un système de mise en page très couramment utilisé pour bootstrap
Utilisation simple comme suit
<div> <! - XS signifie que sur le téléphone, SM signifie sur la tablette et MD signifie sur le bureau. Les chiffres suivants représentent le nombre de colonnes occupées. Le plein écran est de 12 colonnes -> <! - Le contenu dépasse la hauteur de la grille, et la hauteur sera augmentée, et la largeur ne sera pas augmentée -> <! - Le décalage signifie combien de colonnes seront déplacées vers la droite -> <div> .col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md8.col-xs-12 .col-sm-6 .col-md8.col-xs-12 .col-sm-6 .col-md8.col-xs-12 .col-sm-6 .col-md8.col-xs-1. .COL-SM-6 .COL-MD-4 </div> </div> <div> <! - Push se déplace vers l'arrière, Pull se déplace vers l'avant-> <div> .col-xs-12 .col-sm-6 .col-md-8 </div> <div> .Col-xs-6 .col-md-4 </div> </div>
Vous pouvez voir que le système rasterisé peut ajuster différentes largeurs en fonction de différents appareils.
5. Utilisez le formulaire
<div> <! - Tableau réactif, le contenu est trop long pour se déplacer à gauche et à droite -> <div> <! - Les dernières tables sont les tables avec des frontières. Lorsque la souris passe par la ligne TBODY, la couleur est plus foncée et la table est compactée -> <Table> <Thead> <Tr> <Th> Titre de la table </th> <th> Titre de la table </ Th> <Th> Titre de la table </ Th> <Th> Titre de la table </th> </tr> </thead> <Tbody> <! - La couleur de la ligne est Green -> <tr> <tr> content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> </tr> <! - La couleur de la ligne est beige -> <tr> <th> Contenu de la table </th> <th> Contenu de la table </th> <th> Table Contenu </th> <th> Table Content </ Th> <Th> Table Content </ Th> <Th> Table Content </ Th> <Th> Table Content </ Th> <Th> Table Table Content <th> Table Table Content </ th> <th> Table Table Content <TH> Table Table Content <TH> <th <th> Table Content </ Th> <Th> Table Content </ Th> <Th> Table Content </ Th> <Th> Table Content </ Th> <Th> Table Content </ Th> <Th> Table Content </ Th> <Th> Table Table Content </ Th> <Th> Table Content </th> </tr> </bbody> </plow> </div> </div> </div>
Si vous souhaitez modifier la couleur d'une certaine grille, vous pouvez ajouter des classes comme TR dans le th étiquette
6. Utilisez des formulaires
L'utilisation la plus élémentaire est la suivante
<v> <form> <! - Une partie de l'élément est une disposition des parents de formulaire de formulaire, avec étiquette et entrée -> <div> <! - Étiquette pour correspondre à l'ID de saisie -> <étiquette pour = "ExampleInPuleMail1"> Adresse e-mail </BeL> <! - Classe d'entrée devrait être définie sur Form-Control -> <entrée Type = "Email" ID = "ExampleMail1" PlaceHolder = "Courriel"> </ Div> <Étiquette " pour = "ExampleInputPassWord1"> Mot de passe </ labe> <entrée type = "mot de passe" id = "ExempleInputPassword1" Planholder = "Motword"> </ div> <div> <label for = "ExampleIpputFile"> Fichier Input </ Label <entrée type = "Checkbox"> Vérifiez-moi </ label> </div> <Button Type = "Soumider"> Soumider </futton> </form> </div>
Si vous définissez la classe de formulaire sur Form-inline, tous les éléments seront affichés sur la même ligne
Si vous définissez la classe de formulaire sur Form-Horizontal, chaque groupe de formulaires affichera une ligne, mais vous devez définir la largeur vous-même
comme
<div> <! - Laissez chaque groupe de formulaire afficher une ligne, mais chaque enfant de groupe de formulaire doit spécifier la largeur -> <form> <div> <étiquette pour = "Emai"> Email </ Label> <! - Input-group Loit les invites et les suppléments être affichés dans la même ligne -> </ div> <fort type = "e-mail" placeholder = "e-mail" id = "Emai"> </v> </v> for = "Passwor"> mot de passe </ labe> <v> <input type = "mot de passe" placeholder = "mot de passe" id = "passwor"> </ div> </ div> <Button type = "soumi"> Summit </utton> </ form> </ div>
Habituellement, lorsque nous enregistrons un compte, si les informations sont incorrectes ou correctes, elles vous inviteront à côté et que la couleur de la boîte d'entrée sera différente.
Bootstrap nous offre cette fonction très pratique
<div> <form> <! - Ajouter deux éléments doivent être ajoutés à la classe du parent div -> <! - Success Status -> <div> <label for = "inputSuccess2"> avec succès </ label> <input type = "text" id = "inputSuccess2" aria-descriptedBy = "EntruSuccess2status"> <! <! - Cette information est masquée, augmentant la lisibilité du code -> <span id = "inputSuccess2status"> (Success) </span> </div> <! - Statut d'avertissement -> <div> <étiquette pour = "inputwarning2"> avec avertissement </Beld> <entrée type = "text" id = "inputwarning2" aria-descrip aria-hidden = "true"> </span> <span id = "inputwarning2status"> (avertissement) </span> </v> <! - Statut d'erreur -> <v> <label for = "inputError2"> entrée avec l'erreur </vabe> <entrée type = "text" id = "inputError2" aria--------descrip <span id = "inputError2Status"> (erreur) </span> </div> </ form> </div>
7. Bouton
Les boutons sont essentiels
<! - Bondage blanc -> <Button Type = "Button"> (Style par défaut) Par défaut </ Button> <! - Bleed Background -> <Button Type = "Button"> (Préférences) Succès primaire </ Button> <! - Background Green -> <Button Type = "Button"> (Informations générales) Informations </fontes> <! AVERTISSEMENT </FITCHE> <! - Background rouge -> <Button Type = "Button"> (Danger) Danger </ftont>
Vous pouvez également ajouter des dimensions à la classe
<Button Type = "Button"> (gros bouton) Big Button </ Button> <Button Type = "Button"> (Taille par défaut) Bouton par défaut </fontificateur> <Button Type = "Button"> (petit bouton) Petit Button </ftont> <Button Type = "Button"> (petit bouton) Extra Small Button </ Button>
Ce qui précède sont les étapes et l'utilisation commune de bootstrap
Après avoir utilisé ce cadre, non seulement la vitesse de développement a augmenté, mais la qualité s'est également améliorée.
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.