En raison des besoins du projet, je prévois d'apprendre bien le framework bootstrap. J'ai appris un peu avant. Le cadre n'est pas difficile dans l'ensemble, mais il y a encore beaucoup de choses impliquées. Si vous souhaitez le maîtriser avec compétence, vous devez toujours pratiquer davantage.
1. Qu'est-ce que Bootstrap?
Qu'est-ce que BS? Autrement dit, l'outil de framework standardisé construit par la page frontale a été écrit dans le style CSS.JS, et il n'a qu'à être utilisé.
Comment utiliser BS? L'effet est principalement augmenté en utilisant différentes classes, et chaque classe a des fonctions correspondantes différentes.
Avantages BS: augmente l'efficacité du développement, rend la conception de pages plus belle et prend en charge le développement réactif. Télécharger l'adresse: https://github.com/foreverjiangting/bootstrap
Documentation d'apprentissage: http://v3.bootcss.com/getting-started/
2. Design de style CSS
1. Basé sur la documentation HTML
Bootstrap fait référence à certains éléments HTML, donc l'en-tête doit être écrit comme la colonne d'échantillon ci-dessous.
<! Doctype html> --- Contient la déclaration de document HTML5, tous les navigateurs activent le mode standard <html> <éadf> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "Viewport" contenu = "width = appareil, instruc 3 Meta Tags * doit * être placé en premier, et tout autre contenu * doit * les suivre! Assurez-vous que les dispositions réactives sont prises en charge -> <Title> Bootstrap </Title> [/ Code] [Code] <! - New Bootstrap Core CSS Fichier -> <Link Rel = "Stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><! -> <link rel = "Stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- Fichier jQuery. Assurez-vous de vous présenter -> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- Le dernier fichier JavaScript de cootter Core -> <script src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><body><h1>hello, monde! </h1> </ body> </ html>
2. Disposition du système de grille
Disposition du contenu en définissant les lignes et les colonnes. Bootstrap définit la page sur 12 colonnes. Disposition en modifiant le nombre de colonnes, telles que la définition de trois colonnes de largeur égale:
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "Viewport" contenu = "width = device-width, premier, et 1"> <! - Le bilan de device ci-dessus? Tout autre contenu * doit * les suivre! -> <itle> </ title> <link href = "css / bootstrap.css" rel = "Stylesheet"> <link href = "css / bootstrap.min.css" rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </ script> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootsstrap.min.js"> </cript> Layout -> <div> <! - ou conteneur-fluid -> <div> - COL-XS-4: fait référence à un petit appareil inférieur à 768px <div> 11 </div> - Col-SM-4: fait référence à un périphérique> = 768px <v> 22 </v> - COL-MD-4: Réfers pour un périphérique> = 992px <v> 33 </ div> - COLL-4: Références pour un dispositif pour un périphér less than 1200px</div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </ body> </html>
Il existe quatre façons d'écrire le format réseau CSS, qui sont principalement utilisés dans la résolution de différents appareils.
2: traduire la colonne
Utilisez le décalage pour pan. C'est-à-dire le nombre de colonnes traduites
<div> <! - ou conteneer-fluid -> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> --- fait référence à la droite de 33 </div> <v> 11 </div> <v> 22 </div> <div> 33 </div> --- fait référence à la droite de 33 </div> <v> 11 </ div> <div> 33 </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <! - Traduire la colonne ->
Les effets sont les suivants:
33 Étant donné que les deux colonnes ont été traduites, elle ne pouvait pas répondre à ses besoins d'occuper 4 colonnes, il a donc été serré dans la ligne suivante et a commencé à occuper 4 colonnes. Autrement dit, il équivaut à déplacer tout le bloc DIV à droite.
3: colonnes imbriquées
Autrement dit, les colonnes de nid dans la colonne de la grille. Comparons.
<div> <! - ou conteneur-fluid -> <div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <div> <v> 11 </v> </v> <v> <v> </div> </ div> </ div> <v> <v> 33 </ div> </ div> <v> <v> 33 </ div> </ div> <v> <vac </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div>
Les effets sont les suivants:
Avez-vous trouvé des problèmes? Pourquoi n'y a-t-il pas de distribution égale de 8 ci-dessus?
Raison: jetons un coup d'œil à la console de débogage
.COL-XS-1, .COL-XS-10, .COL-XS-11, .COL-XS-12, .COL-XS-2, .COL-XS-3, .COL-XS-4, .COL-XS-5, .COL-XS-6,. Padding-Left: 15px; padding-droite: 15px; Position: relative;}
Il a été constaté que le padding-gauche et le padding-droite sont tous deux de 15px. En effet, le rembourrage entre les colonnes est digne d'influence, alors pourquoi la deuxième div n'a-t-elle aucune influence? Explorons le principe de la grille de clôture.
1. "Row" doit être inclus dans .container (largeur fixe) ou .container-fluid (100% largeur) pour lui donner l'alignement et le rembourrage appropriés.
2. Créez une gouttière entre les colonnes en définissant la propriété padding pour "colonne". En définissant une margin négative pour l'élément .row , un jeu de padding de décalage pour l'élément .container
Indirectement, la "colonne" contenue dans padding "Row" compense.
Remarque : Pour le moment, la ligne a compensé le rembourrage de la colonne, il n'y a donc pas de valeur de rembourrage.
4: tri de colonne
Utilisation principalement de col-xs-push- * Col-Xs-Pull- * (* représente un certain nombre de 0-11) Comment comprendre ces deux classes? Pousser signifie pousser, tirer signifie tirer.
<div> <div> 21 </div> <div> 24 </div> </div> <div> <div> 21 </div> <div> 24 </div> </div>
Les rendus sont les suivants:
<div> 21 </div> --- Enregistré comme div1 <div> 24 </div> - enregistré comme div2
On peut comprendre qu'il s'agit d'échanger les positions des deux. Vous devez pousser Div1 vers les 8 colonnes de droite et vous devez tirer 4 colonnes vers la gauche.
3. Disposition de la grille en streaming
1. La largeur de la colonne utilise des pourcentages, pas des pixels
2. Changez la classe de ligne en fluide de ligne
3. Les autres fonctions de base sont les mêmes que la disposition fixe ci-dessus et soutiennent la réactivité.
4. Lors de la division d'une certaine colonne dans une bissectrice, puisque la disposition de streaming utilise des pourcentages, il doit être calculé selon 6.
// Notez la situation suivante. Lors de la division de 8 colonnes bilatéralement, il n'est pas réglé sur deux 4s, mais deux 6s, car il y a 12 colonnes de distribution raster dans bootstrap. <div> <div> <div> 2 </div> <div> 2 </div> </div> </div> </div> </div>
Jetons un coup d'œil à l'application des dispositions de streaming et comparons-les avec des dispositions fixes.
<! - Streaming Layout -> <div> <div> 333 </div> <div> 444 </div> </div> <div> --- Déclarez la classe de conteneur-fluide, indiquant que le contenu est une mise en page de streaming, fonction: en tant que bloc contenant le contenu en streaming <v> <v> </v> <div> 444 </v> </v> </v> </div> </vlate Classes de conteneur et de conteneur-fluide, et c'est la largeur de l'écran <div> 333 </div> <div> 444 </div> </div>
Lorsque l'écran est inférieur à 768px, l'effet est le suivant:
Lorsque l'écran est supérieur à 992px, l'effet est le suivant: Pour le moment, une ligne est exclusive
La classe de fluide en ligne (très importante) détermine s'il s'agit d'une disposition de flux. Ensuite, le code de bloc de contenu est écrit de la même manière que le système de grille, et il commence toujours de Col-MD-1 à Col-MD-12, qui correspondent respectivement à des pourcentages différents.
4. Conception réactive
En termes simples, il prend en charge les résolutions (960px, 1366px, 978px, etc.) de différents appareils (téléphones mobiles, PC) pour une réponse adaptative.
<div> <div> 21 </div> <div> 24 </div> </div>
Lorsque l'appareil est inférieur à 768px, l'effet est le suivant:
Lorsque l'appareil> = 992px. Les effets sont les suivants:
Les résolutions des deux catégories ci-dessus sont différentes. COL-MD-12 signifie que chaque colonne a une ligne, c'est-à-dire 12 colonnes.
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.