En combien de colonnes le bootstrap peut-il être divisé ?

Dans bootstrap, la page peut être divisée en 12 colonnes maximum ; le système de grille dans bootstrap est relativement flexible et peut diviser la page en 1, 2, 3, 4, 6 et 12 colonnes. Bootstrap divise également la page en 12 colonnes maximum. à 12 colonnes par défaut.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version bootstrap 3.3.7, ordinateur DELL G3

En combien de colonnes le bootstrap peut-il être divisé au maximum

Ce système de disposition en grille appartient à l'échafaudage ( cadre, mise en page). Dans Scaffolding, il existe une disposition de grille (fixe) (Grid System) et une disposition de grille fluide (Fluid Grid System). Cet article traite de la première disposition de grille fixe.

Bootstrap utilise un format de disposition à 12 colonnes, c'est-à-dire que jusqu'à 12 colonnes peuvent être organisées sur une seule ligne de la page.

Bootstrap ne peut avoir par défaut que 12 colonnes car 12 est le multiple le plus petit commun des nombres "1, 2, 3, 4, 6", donc le système de grille à 12 colonnes est relativement flexible et prend en charge la division d'une ligne en 1 colonne, 2 colonnes, 3 colonnes, 4 colonnes, 6 colonnes.

Bootstrap stipule que la largeur totale de la page est de 940 px, ce qui est différent des autres frameworks CSS (certains autres font 960 px (grille 960, etc.), certains font 950 px (plan, etc.)). Ce 940px est spécifié dans une classe nommée conteneur. Les détails sont les suivants

.container,
{
  width: 940px;
}

De plus, il est précisé que la page de ce conteneur est centrée

.container {
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

(Voici une astuce pour que le div apparaisse de la même manière dans différents navigateurs. . Pour l'effet de centrage, définir les valeurs de margin-left et margin-right sur auto est le moyen le plus simple *Le hack zoom css est destiné à la compatibilité avec ie6 et 7, mais la raison spécifique de l'utilisation de zoom=1 est inconnue. )

En même temps. , et a également utilisé le sélecteur de pseudo-éléments CSS Dans cette classe, le contenu avant et après a été effacé, et le contenu flottant a également été effacé à l'arrière

.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}

La mise en page multi-colonnes ne peut pas. être fait directement dans le conteneur À ce stade, la ligne doit être utilisée comme conteneur de niveau secondaire, le style du conteneur de ligne est assez intéressant

.row {
  margin-left: -20px;
  *zoom: 1;
}

La marge à gauche est de -20px, notez qu'elle est de moins 20. Cela signifie que la largeur de la ligne dépassera le conteneur externe de 20 pixels. Pourquoi? Vous le saurez plus tard. Bien sûr, row dispose également de paramètres de suppression et de contenu flottant, similaires à ceux du conteneur, je n'entrerai donc pas dans les détails ici.

Row contient la classe span pour la mise en page multi-colonnes spécifique que nous souhaitons réaliser. Lors de l'utilisation spécifique de la mise en page, le code ressemble à ceci

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

Pourquoi le span ne peut-il pas être placé directement dans le conteneur Pourquoi la ligne a-t-elle besoin de margin-left=-20px ? Parlons de span en détail. C’est aussi la raison pour laquelle l’auteur parle de « disposition de grille sophistiquée ».

En fait, Bootstrap a un total de 12 classes span, à savoir span1, span2,...span12. Leurs définitions sont très simples

.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
。。。
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}

Bien sûr, vous pouvez également utiliser des sélecteurs de pseudo-classes pour les définir uniformément sur des styles flottants.

[class*="span"] {
  float: left;
}

Flotter est une autre théorie, on n'insiste pas dessus. Nous avons examiné attentivement de span1 à span12 et avons trouvé un modèle, c'est-à-dire que chaque fois que la durée est augmentée, elle augmente de 80 pixels. C'est juste que span1 commence à compter à partir de 60. Pourquoi ne pas laisser span1 commencer à compter à partir de 80, et ensuite chaque span est un multiple de 80. C'est également plus facile à retenir ? En fait, la durée commence réellement à compter à partir de 80. C'est juste que la partie visible est de 60, et les 20 autres sont définis avec margin-left=20 dans le style comme suit

[class*="span"] {
  margin-left: 20px;
}

Ce 20 a une autre signification, c'est-à-dire qu'il peut représenter l'intervalle entre deux travées sur la page. , Autrement dit, il y a un écart de 20 pixels entre toutes les étendues afin qu'elles ne collent pas ensemble et qu'il soit difficile pour les utilisateurs finaux de les séparer.

Recommandations associées : Tutoriel bootstrap

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!