Analyse raster bootstrap

Center (conteneur)

1. Center : Un conteneur avec le nom de classe .container La largeur du conteneur a des valeurs différentes sur chaque périphérique d'écran. Laissez-le vide.
   La largeur centrale de chaque taille est la suivante :

   屏幕设备	版心宽度
   max-width:768px	xs 继承父元素宽度（即width:100%）
   min-width:768px	sm 750px
   min-width:992px	md 970px
   min-width:1200px	lg 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;
  }}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

1. Quelle que soit la largeur de l'écran, le conteneur.container aura toujours un remplissage de 15px à gauche et à droite pour éviter que le contenu ne touche directement le bord du navigateur. N'imbriquez jamais un autre conteneur dans un conteneur. Le conteneur de mise en page de

2. .container-fluid est le même que le conteneur de mise en page pour les écrans inférieurs à 768 pixels. Il ne définit pas de valeur de largeur fixe et en hérite. . La largeur de l'élément parent. Le conteneur

3. .container est utilisé pour fournir des contraintes de largeur sur la largeur réactive. En réponse aux changements de taille, le conteneur est réellement modifié. Les lignes et les colonnes sont basées sur des pourcentages, elles n'ont donc pas besoin d'être modifiées.

Ligne (ligne)

1. Ligne : Un conteneur avec le nom de classe .row ; Il y a un espace total et il est divisé en 12 colonnes.

2. Il y aura deux valeurs de marge négatives de 15px aux deux extrémités de la ligne, afin de décaler les valeurs de remplissage des deux côtés du conteneur. .row n'est pas valide lorsqu'il est utilisé en dehors du conteneur.

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

colonne

1. Chaque colonne a des côtés avec une valeur de remplissage de 15 px. N'utilisez jamais col en dehors d'un conteneur .row, sinon col ne sera pas valide.

2. La valeur de remplissage de chaque colonne col fournit une marge pour son contenu afin que le contenu ne colle pas au bord du navigateur et que les colonnes ne collent pas ensemble.

3. == Les colonnes sont allouées selon des pourcentages (par rapport au pourcentage de la largeur du centre de la page, donc plus le centre de la page est large, plus la largeur de chaque colonne est grande)== .

//五列的宽度
.col-xs-5 {
  width: 41.66666667%;
}// 四列的宽度
.col-xs-4 {
  width: 33.33333333%;
}// 三列的宽度
.col-xs-3 {
  width: 25%;
}// 占两列的宽度
.col-xs-2 {
  width: 16.66666667%;
}// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {
  width: 8.33333333%;
}...
// 如果是中等屏幕 类名为.col-md-1
//       小屏幕   类名为：.col-sm-1
//       大屏幕   类名为：.col-lg-1
@media (min-width:768px) {
    .col-sm-1 {
        width: 8.33333333%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width: 992px) {
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width:1200px) {
    .col-lg-1 {
        width: 8.33333333%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    ...
}

栅格嵌套

1. Après avoir défini le conteneur/ligne/colonne, vous pouvez créer une nouvelle grille système et ajoutez simplement des lignes directement à la colonne. Il n'est pas nécessaire d'ajouter un conteneur, car les valeurs de remplissage des deux côtés de la colonne peuvent compenser les valeurs de marge négatives des deux côtés de la ligne, et la colonne est équivalent à un conteneur.

Décalages (décalages)

1. Les décalages de décalage sont principalement les marges des colonnes - la valeur gauche détermine . S'il est décalé d'une colonne, il est en marge gauche : 8,3333333 % (1/12). S'il est décalé de deux colonnes, il est en marge gauche : 16,66666667 % (soit 2/12) ;

.col-xs-offset-0 {
    margin-left: 0;
}.col-xs-offset-1 {
    margin-left: 8.33333333%;
}...
@median (min-width:768px) {
    .col-sm-offset-0 {
        margin-left: 0;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    ...
}
...

Tri des colonnes (Push and Pull)

1. Dans les applications pratiques, c'est plus à propos de l'appel de la position et du tri, vous permettant de rompre la disposition fixe de p de haut en bas et de gauche à droite en HTML.

2. pull et push sont implémentés via les valeurs droite et gauche de la position. Pull est implémenté via la valeur droite La valeur pull-1 right:8.33333333% (1/. 12); valeur push-1 => gauche :8,33333333%(1/12);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!