Explication détaillée des compétences du système de grille Bootstrap_javascript

Le système de grille du framework bootstrap divise le conteneur en 12 parties égales. Lors de son utilisation, vous pouvez recompiler le code source LESS/SASS en fonction de la situation réelle pour modifier la valeur de 12. Comment fonctionne le système de grille du framework bootstrap :

1. La ligne de données (.row) doit être contenue dans le conteneur (.container) afin qu'elle puisse recevoir un alignement et un remplissage appropriés

<div class="container">
<div class="row"></div>
</div> 

2. Des colonnes (.column) peuvent être ajoutées aux lignes (.row), mais la somme du nombre de colonnes ne peut pas dépasser le nombre total de colonnes également divisées (telles que : 12)

<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></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 un espacement entre les colonnes en définissant le remplissage, puis compensez l'effet du remplissage en définissant des marges négatives pour la première colonne et la dernière pile
.

Avec des effets réactifs dans le système de grille d'amorçage, il est livré avec quatre types de navigateurs (très petit écran, petit écran, écran moyen et grand écran), et ses points d'arrêt sont 768px, 992px, 1220px

Le conteneur (.container) a différentes largeurs pour différentes résolutions de navigateur : automatique, 760px, 970px, 1170px
;

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
} 

Le conteneur de lignes (.row) divise la ligne du conteneur en 12 parties égales, c'est-à-dire des colonnes. Chaque colonne a un padding-left:15px et un padding-right:15px ; cela fait également que le padding-left de la première colonne et le padding-right de la dernière colonne occupent 30px de la largeur moyenne

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
} 

Le conteneur de lignes (.row) définit les valeurs de marge gauche et droite de -15px, qui sont utilisées pour décaler le remplissage gauche de la première colonne et le remplissage droit de la dernière colonne, de sorte que la première et les dernières colonnes sont alignées avec le conteneur (.container) Il n'y a pas d'espace entre elles

.row {
margin-right: -15px;
margin-left: -15px;
}

Utilisation de base

Étant donné que le framework bootstrap utilise différents styles de grille pour différentes tailles d'écran, ce qui suit prend l'écran moyen (970 px) comme exemple.

1. Combinaison de colonnes

La combinaison de colonnes consiste à modifier le nombre de colonnes à combiner (le nombre total de colonnes ne peut pas dépasser 12), ce qui est quelque peu similaire à l'attribut colspan du tableau ; la méthode de combinaison de colonnes n'implique que deux caractéristiques : flotter dans le pourcentage de largeur ;

<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
</div>
</div> 

L'effet est le suivant :

Assurez-vous que toutes les colonnes flottent vers la gauche

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}

Définissez la largeur de chaque combinaison de colonnes

.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}

Décalage de colonne

Parfois, nous ne voulons pas que deux colonnes adjacentes soient proches l'une de l'autre, mais nous ne voulons pas utiliser de marge ou d'autres moyens techniques. Cela peut être réalisé en utilisant le décalage de colonne (offset). Pour utiliser le décalage de colonne, ajoutez simplement le nom de classe .col-md-offset-* (l'astérisque représente le nombre de combinaisons de colonnes à décaler) sur l'élément de colonne. La colonne avec ce nom de classe sera décalée, par exemple : in. l'élément column Ajoutez .col-md-offset-4 pour indiquer que la colonne est décalée vers la droite de la largeur de 4 colonnes

<div class="container">
<div class="row">
<div class="col-md-4">1111</div>
<div class="col-md-4 col-md-offset-2">111</div>
<div class="col-md-2">333</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">列偏移</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
</div> 

L'effet est le suivant :

Principe de mise en œuvre :

En utilisant un douzième de marge gauche, il y a autant de marges gauches qu'il y a de décalages

.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
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.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}

Il est à noter que lorsque vous utilisez col-md-offset-* pour décaler une colonne à droite, assurez-vous que le nombre total de colonnes et de colonnes décalées ne dépasse pas 12, sinon les colonnes seront affichées avec des lignes brisées

Tri des colonnes

Le tri des colonnes consiste à changer la direction de la colonne et à définir la distance flottante. Dans le système de grille d'amorçage, cela se fait en ajoutant le nom de la classe. col-md-push-* et col-md-pull-*

<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
</div>
</div> 

L'effet est le suivant :

col-md-4 est à gauche et col-md-8 est à droite. Si vous souhaitez échanger les positions, vous devez déplacer col-md-4 vers la droite de 8 colonnes, c'est-à-dire ajouter. le nom de la classe.col-md -push-8; En même temps, vous devez déplacer col-md-8 de 4 colonnes vers la gauche, c'est-à-dire ajouter le nom de la classe.col-md-pull-4

Bootstrap n'obtient des effets de positionnement qu'en réglant à gauche et à droite.

.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: 0;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: 0;
} 

Imbrication de colonnes

L'imbrication de colonnes peut ajouter ou créer un conteneur de ligne (ligne) dans une colonne, puis insérer des colonnes dans ce conteneur de ligne. Lorsque la largeur du conteneur de ligne (ligne) dans le conteneur de colonne est de 100 %, c'est la largeur actuelle. Largeur de la colonne extérieure

<div class="container">
<div class="row">
<div class="col-md-8">

我在里面嵌套了一个网格

<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">

我在里面嵌套了一个网格

<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>

以上内容是小编给大家介绍的Bootstrap网格系统，希望对大家有所帮助！