J'ai appris Bootstrap il y a quelques jours et trié le système de grille. S'il y a des erreurs, n'hésitez pas à les corriger.
Résumé: Le système de grille a développé des pages Web réactives pour PC, PAD et terminaux mobiles, et il existe différentes solutions basées sur différentes résolutions d'écran.
(0,1, la taille de l'appareil d'écran est supérieure à 1200px SELECT COL-LG
(0,2. La taille de l'appareil d'écran se situe entre 970px et 1200px SELECT COL-MD
(0,3. La taille de l'appareil d'écran est comprise entre 768px et 970px
(0,4. La taille de l'appareil d'écran est inférieure à 768px sélectionner COL-XS
1. Le système de grille divise la page en 12 colonnes (jusqu'à 12 colonnes), comme suit :
<! Doctype html> <html lang = "zh-cn"> <éad> <meta charset = "utf-8"> <meta name = "vision" contenu = "width = device-width, initial-scale href = "Library / bootstrap.min.css"> <style> .a {hauteur: 50px; Border: 1px Solide rouge; Contexte: rose; } </ style> </ head> <body> <div> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </v> <v> 1 </v> <v> 1 </v> <v> 1 </v> </v> 1 </v> <v> 1 </div> <v> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <v> 1 </v> <v> 1 </div> <v> 9 </ div> </ div> </v> <v> 9 </ div> </ div> </v> <v> 9 </ div> </v> </ div> </ div> <v> 9 </v> </v> </v> </v> </v> <v> 9 </v> </v> </v> </v> </v> <v> 9 </v> </ div> </ div> <script src = "Library / jq.js"> </ script> <script src = "Library / bootstrap.min.js"> </ script> </ body> </html>(2.1, COL-MD-1 est une colonne, avec un total de 12 colonnes recouvertes d'une "ligne horizontale". Le nombre de fin après MD est le nombre de colonnes attribuées, (Col-LG, Col-SM, Col-XS est la même)
3. Sous les appareils avec différentes résolutions d'écran, la page présentée est la "page de barre de format raster" correspondante, réalisant ainsi une disposition réactive, comme suit :
<! Doctype html> <html lang = "zh-cn"> <éad> <meta charset = "utf-8"> <meta name = "vision" contenu = "width = device-width, initial-scale href = "Library / bootstrap.min.css"> <style> .a {hauteur: 50px; Border: 1px Solide rouge; Contexte: rose; } </ style> </ head> <body> <div> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </v> <v> 1 </v> <v> 1 </v> <v> 1 </v> </v> 1 </v> <v> 1 </div> <v> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> </div> </div> <script src = "Library / Jq.js"> </ script> <script src = "library / bootstrap.min.js"> </ script> </ htlin>(3.1. Le code ci-dessus montre que lorsque la taille du périphérique d'écran est supérieure à 1200px, une ligne horizontale a quatre colonnes, une grande colonne a trois petites colonnes et la petite colonne a un total de 12 colonnes.
(3.2, indiquant que lorsque la taille du périphérique d'écran se situe entre 970px et 1200px (vous pouvez d'abord regarder le navigateur rétrécissant à cette étape), il y a trois colonnes dans une ligne horizontale et quatre colonnes dans une grande colonne, avec un total de 12 colonnes.
(3.2, indiquant que lorsque la taille du périphérique d'écran se situe entre 768px et 970px (vous pouvez d'abord regarder le navigateur rétrécissant à cette étape), il y a deux grandes colonnes dans une ligne horizontale et six petites colonnes dans une grande colonne, avec un total de 12 colonnes.
(3.2, indiquant que lorsque la taille du périphérique d'écran est inférieure à 768px (vous pouvez d'abord regarder le navigateur rétrécissant à cette étape), il y a une grande colonne dans une ligne horizontale et une grande colonne a douze petites colonnes, avec un total de 12 colonnes.
4. Colonne Offset, nidification et échangez des positions dans le système raster
(4.1, décalage de la colonne
<div> <div> 8 </div> <div> 3 </div> <! - Colonne décroche une par une à droite -> </div>
(4.2, nidification
<div> <! - Nesting -> <div style = "padding: 0;"> <div> </div> <div> </div> <div> </div> </div> <div> 3 </div> </div>
(4.3, position d'échange
<div> <! - Swap Position -> <div> 9 </div> <! - Poussez, déplacez-vous vers la droite -> <div> 3 </div> <! - Pull, déplacez-vous vers la gauche -> </div>
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
Cet article utilise les cas les plus simples pour analyser les points de disposition des clés impliqués dans le cas, dans l'espoir d'être utile à l'apprentissage de chacun.