Le système de grille dans le framework bootstrap divise le récipient en 12 pièces. Lorsque vous l'utilisez, vous pouvez recompiler le code source moins / SASS en fonction de la situation réelle pour modifier la valeur 12. Comment le système de maillage fonctionne-t-il dans Bootstrap Framework:
1. Les lignes de données (.Rows) doivent être incluses dans le conteneur afin qu'ils puissent donner un alignement et un rembourrage appropriés
<div> <div> </div> </div>
2. Vous pouvez ajouter des colonnes (.column) en lignes (.row), mais la somme des colonnes ne peut pas dépasser le nombre total de colonnes qui sont bissectées (telles que: 12)
<div> <div> <div> </div> <div> </div> </div>
3. Le contenu spécifique doit être placé dans le conteneur de colonne (.column), et seule la colonne (.Column) peut être utilisée comme élément enfant direct du conteneur de ligne (.row).
4. Créez l'espacement entre les colonnes en définissant la distance intérieure (rembourrage), puis compensez l'influence du rembourrage en définissant des valeurs négatives pour la première colonne et la dernière pile.
Il y a un effet réactif dans le système de grille bootstrap, qui a quatre types de navigateurs, (écran ultra-petit, petit écran, écran moyen et grand écran), et son point d'arrêt est de 768px, 992px, 1220px
Le conteneur (.Container), pour différentes résolutions du navigateur, a des largeurs différentes: automatique, 760px, 970px, 1170px;
.Container {padding-droite: 15px; padding-left: 15px; marge-droite: auto; marge-left: auto; @media (min-large: 768px) {.Container {width: 750px;} @ media (min-width: 992px) {.Container {width: 970px;}} @ media (Min-largeur: 1200px) {.Container {largeur: 1170px;}Le conteneur de lignes (.row), divise les lignes du conteneur en 12 parties égales, c'est-à-dire les colonnes. Chaque colonne a un padding-left: 15px et padding-droite: 15px; Cela provoque également un padding-gauche dans la première colonne et un padding-droite dans la dernière colonne pour occuper 30px de la largeur moyenne.
.COL-XS-1, .COL-MD-1, .COL-LG-1, .COL-XS-2, .COL-MD-2, .COL-MD-2, .COL-LG-2, .COL-XS-3, .COL-SM-3, .COL-MD-3, .COL-MD-3, .COL-MD-3, .COL-LG-3, .COL-XSS-4,. .COL-MD-4, .COL-LG-4, .COL-XS-5, .COL-MD-5, .COL-MD-5, .COL-LG-5, .COL-MD-6, .COL-MD-6, .COL-LG-6, .COL-MD-6, .COL-LG-6, .COL-XS-7, .COL-MD-7,. .COL-XS-8, .COL-MD-8, .COL-MD-8, .COL-LG-8, .COL-XS-9, .COL-SM-9, .COL-MD-9, .COL-MD-9, .COL-MD-10, .COL-XS-10, .COL-MD-10, .COL-MD-10, .COL-MD-10,. .COL-XS-11, .COL-MD-11, .COL-MD-11, .COL-MD-11, .COL-LG-11, .COL-XS-12, .COL-MD-12, .COL-MD-12, .COL-LG-12 {Position: relatif; mine-height: 1px; padding-right: 15px; padding-left: 15px;};Le conteneur de ligne (.row) définit les valeurs de marge-gauche et de marge de -15px, qui sont utilisées pour compenser la distance intérieure gauche de la première colonne et la distance intérieure droite de la dernière colonne, de sorte qu'il n'y a pas d'espacement entre la première colonne et la dernière colonne et le conteneur (.Contaileur).
.Row {marge-droite: -15px; marge-gauche: -15px;}Utilisation de base
Étant donné que le framework bootstrap utilise différents styles de grille pour différentes tailles d'écran, prenons l'exemple de l'écran médian (970px).
1. combinaison de colonnes
La combinaison de colonnes consiste à modifier le nombre en colonnes de fusion (le nombre total de colonnes ne peut pas dépasser 12), ce qui est quelque peu similaire à l'attribut ColSpan d'une table; La méthode de combinaison de colonnes n'implique que deux caractéristiques: flottant en pourcentage de largeur
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> <div> <div> Col-md-4 </div> <div> Col-md-4 </div> <div> Col-md-4 </div> <di V> Col-md-4 </div> </div> <div> <div> Col-md-4 </div> </div> <div> <div> Col-md-3 </div> <v> Col-md-6 </div> <div> Col-md-3 </div> </div>
Les effets sont les suivants:
Assurez-vous que toutes les colonnes flottent à gauche
.COL-MD-1, .COL-MD-2, .COL-MD-3, .COL-MD-4, .COL-MD-5, .COL-MD-6, .COL-MD-10, .COL-MD-1, .COL-MD-MD-12 {flottante: gauche;}Définir la largeur de chaque combinaison de colonnes
.Col-MD-12 {largeur: 100%;}. Col-md-11 {largeur: 91.666666667%;}. Col-MD-10 {Width: 83.333333333%;}. Col-md-9 {Width: 75%;}. Col-MD-8 {width: 66.6666667%;}. Col-md-7 {largeur: 58.33333333%;}. Col-MD-6 {largeur: 50%;}. Col-MD-5 {Width: 41,66666667%;}. {largeur: 25%;}. Col-md-2 {largeur: 16.66666667%;}. Col-md-1 {largeur: 8.33333333%;}Décalage de la colonne
Parfois, nous ne voulons pas que deux colonnes adjacentes soient rapprochées, mais nous ne voulons pas utiliser la marge ou d'autres moyens techniques. Cela peut être réalisé en utilisant le décalage de la colonne. En utilisant le décalage de la colonne, ajoutez simplement le nom de classe.col-md-offset- * sur l'élément de colonne (l'astérisque représente le nombre de combinaisons de colonnes à décaler). La colonne avec ce nom de classe sera décalée, telle que: Add .Col-MD-Offset-4 sur l'élément de colonne, indiquant que la colonne est décalée à droite par 4 colonnes en largeur.
<div> <div> <div> 1111 </div> <div> 1111 </div> <div> 333 </div> </div> <div> <div> Colonne Offset </div> <div> Col-md-2 </div> <div> Col-md-2 </div> </div> </div> </div>
Les effets sont les suivants:
Principe de mise en œuvre:
En utilisant une marge à unft à gauche, autant de marge à gauche qu'il y a des décalages, vous pouvez obtenir autant de marge à gauche qu'il y en a.
.Col-Md-Offset-12 {marge-left: 100%;}. Col-Md-Offset-11 {margin-left: 91.6666667%;}. Col-MD-Offset-10 {margin-left: 83.33333333%;}. Col-Md-Offset-9 {margin-left: 75%;}. {marge-left: 66.66666667%;}. Col-Md-Offset-7 {margin-left: 58.3333333%;}. Col-md-Offset-6 {margin-left: 50%;}. Col-Md-Offset-5 {margin-left: 41.666666667%;}. {margin-left: 33.33333333%;}. Col-Md-Offset-3 {margin-left: 25%;}. Col-Md-Offset-2 {margin-left: 16.66666667%;}. Col-Md-Offset-1 {margin-left: 8.3333333%;}. Col-Md-Offset-0 {margin-left: Col-Md-Offset-0 {margin-left: Col-Md-Offset-0 {Margin-Left: Col-Md-Offset-0 {MARGIN-LEFT: 0;}Il convient de noter que lors de l'utilisation de Col-MD-Offset- * pour compenser la colonne à droite, il est nécessaire de s'assurer que le nombre total de colonnes et de colonnes de décalage ne dépasse pas 12, sinon cela entraînera une affichage de la colonne.
Tri de colonne
Le tri des colonnes consiste à changer la direction de la colonne et à régler la distance flottante. Dans le système Bootstrap Grid, c'est en ajoutant des noms de classe. col-md-push- * et col-md-pull- *
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> </div>
Les effets sont les suivants:
COL-MD-4 est à gauche et Col-MD-8 est à droite. Si vous souhaitez échanger des positions, vous devez déplacer Col-MD-4 vers la droite par 8 colonnes, c'est-à-dire, ajoutez le nom de classe.col-md-push-8; En même temps, vous devez déplacer Col-MD-8 vers la gauche par 4 colonnes, c'est-à-dire ajouter le nom de classe.col-md-pull-4.
Bootstrap n'atteint les effets du positionnement qu'en réglant la gauche et la droite.
.Col-Md-Pull-12 {droite: 100%;}. Col-md-Pull-11 {Right: 91.66666667%;}. Col-md-Pull-10 {droite: 83.333333333%;}. Col-md-Pull-9 {droite: 75%;}. Col-Md-Pull-8 {droit:: 66.6666667%;}. Col-md-Pull-7 {à droite: 58.33333333%;}. Col-md-Pull-6 {droite: 50%;}. Col-md-Pull-5 {Right: 41.66666667%;}. Col-Md-Pull-4 {Right: 33.33333333%;}. Col-md-Pull-3 {droite: 25%;}. Col-md-Pull-2 {à droite: 16.666666667%;}. Col-md-Pull-1 {droite: 0,333333333333;}. 100%;}. Col-md-push-11 {gauche: 91.666666667%;}. Col-md-push-10 {gauche: 83.3333333333%;}. Col-md-push-9 {Left: 75%;}. 58.33333333%;}. Col-md-push-6 {Left: 50%;}. Col-md-push-5 {Left: 41.666666667%;}. Col-md-push-4 {Left: 33.3333333%;}. 16.66666667%;}. Col-md-push-1 {Left: 8.33333333%;}. Col-md-push-0 {Left: 0;}Nichage
La nidification de la colonne peut en ajouter un ou créer un conteneur de ligne dans une colonne, puis insérer une colonne dans ce conteneur de ligne. Lorsque la largeur du conteneur de ligne (ligne) dans le conteneur de colonne est à 100%, il est la largeur de la colonne externe actuelle.
<div> <div> <div>
J'ai imbriqué une grille à l'intérieur
<div> <div> Col-md-6 </div> <div> Col-md-6 </div> </div> </div> <div> Col-md-4 </div> </div> <div> <div> Col-md-4 </div> </div> <div> Col-MD-4 </div> <v-div>
J'ai imbriqué une grille à l'intérieur
<div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> </div> </div> </div> </div>
Le contenu ci-dessus est le système de grille bootstrap qui vous est présenté par l'éditeur. J'espère que ce sera utile à tous!