bootstrap pourquoi 12 raster

Introduction au système de grille

Bootstrap fournit une grille fluide réactive et mobile. Le système, en tant que la taille de l’écran ou de la fenêtre augmente, sera automatiquement divisée en 12 colonnes maximum. Il contient des classes prédéfinies faciles à utiliser, ainsi que de puissants mixins pour générer des présentations plus sémantiques.

Le système de grille crée la mise en page de la page à travers une série de combinaisons de lignes et de colonnes, et le contenu défini peut être placé dans la mise en page créée.

Le principe de mise en œuvre du système de grille

Le principe de mise en œuvre du système de grille est très simple, il suffit de définir la taille du conteneur , divisé en 12. Ajustez ensuite les marges intérieures et extérieures, et enfin combinez-les avec des requêtes multimédias pour créer un puissant système de grille réactif.

Le principe de fonctionnement principal du système de grille :

➣ Une ligne de données (ligne) doit être contenue dans .container (largeur fixe ) ou .container -fluid (100 % de largeur) pour lui donner un alignement et un rembourrage appropriés.

➣ Créez un ensemble de "colonnes" dans le sens horizontal à travers des "lignes".

➣ Votre contenu spécifique doit être placé dans "colonne", et seule "colonne" peut être un élément enfant direct de la ligne

➣ Il y en a beaucoup. styles intégrés Vous pouvez utiliser des styles (c'est-à-dire des classes prédéfinies) tels que .row et .col-xs-4 (largeur de quatre colonnes) pour créer rapidement une disposition en grille dans le code source Bootstrap. Le mixin défini peut également être utilisé pour. créez des dispositions sémantiques en définissant l'attribut padding pour "column" pour créer des espaces entre les colonnes. L'élément .row définit une marge négative pour compenser le remplissage défini pour l'élément .container, ce qui compense indirectement le remplissage de la "colonne" contenue dans le. "row"

➣ Les colonnes d'un système raster sont représentées par la plage qu'elles couvrent en spécifiant une valeur de 1 à 12. Par exemple, trois colonnes de largeur égale peuvent être créées en utilisant trois .col. -xs-4.

➣ Si la "colonne" contenue dans une "ligne" est supérieure à 12, les éléments de la "colonne" supplémentaire seront disposés dans une autre ligne dans son ensemble

➣ Les classes de grille sont disponibles pour les appareils dont la largeur d'écran est supérieure ou égale à la taille du point d'arrêt et sont remplacées pour les appareils à petit écran. Par conséquent, toutes les classes de grille .col-md-* appliquées sur un élément s'appliqueront avec les appareils. la largeur de l'écran est supérieure ou égale à la taille du point d'arrêt, et en remplaçant la classe de grille pour les appareils à petit écran, tout .col-lg-* appliqué sur l'élément n'affecte pas également les appareils à grand écran

Disposition du système de grille. conteneur

Bootstrap doit envelopper un conteneur .container pour le contenu de la page et le système de grille. Notez que nous fournissons deux classes à cet effet, en raison du remplissage et d'autres attributs, ces deux conteneurs. les classes ne peuvent pas être imbriquées les unes dans les autres. La classe

.container est utilisée pour les conteneurs avec une largeur fixe et prenant en charge la mise en page réactive

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

.container. avec 100 % de largeur et occupant toute la fenêtre d'affichage

<div class="container-fluid">
  ...
</div>

L'utilisation du système de grille

L'utilisation du système de grille est en fait Diverses combinaisons de colonnes. Il y en a quatre. fonctionnalités dans l'utilisation de base, à savoir la combinaison de colonnes, le décalage de colonnes, l'imbrication de colonnes et le tri de colonnes. Étant donné que différentes tailles d'écran utilisent des styles différents, nous prenons l'écran moyen (md) comme exemple d'introduction, l'utilisation des autres écrans est similaire. >

1. Combinaison de colonnes

La combinaison de colonnes consiste à fusionner des colonnes en modifiant les nombres, similaire à colspan dans le tableau. L'implémentation de la combinaison de colonnes est simple et n'implique que deux propriétés CSS : left float et percent.

Remarque : lorsque vous utilisez le système de grille, n'oubliez pas que le nombre total de cellules dans chaque rangée est de 12 et que vous pouvez les combiner librement en fonction du projet réel.

        <div class="container">
            <div class="row">
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8">.col-md-8</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-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>

Recommandations associées : "
Tutoriel d'introduction au bootstrap

"

2. Décalage de colonne

Parfois. nous ne voulons pas que deux colonnes adjacentes soient côte à côte. Dans ce cas, nous pouvons utiliser la fonction de décalage de colonne du système de grille pour y parvenir sans avoir à définir une valeur de marge. Pour les écrans moyens, vous pouvez utiliser des styles de la forme .col-md-offset-* pour décaler les colonnes vers la droite.

Par exemple, .col-md-offset-2 signifie déplacer l'élément de deux largeurs de colonne vers la droite.

　　　 <!--列偏移-->
　　　　<div class="container">
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
            </div>
            <div class="row">
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
            </div>
　　　　</div>

3. Imbrication de colonnes

栅格系统也支持列嵌套，即在一个列里再声明一个或多个行（row），但是要注意，内部所嵌套的 row 的宽度为 100% 时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。

        <!--列嵌套-->
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    Level 1：col-md-8
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-6">Level 2：col-md-6</div>
                        <div class="col-md-6">Level 2：col-md-6</div>
                    </div>
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-3"> Level 3：col-md-3 </div>
                        <div class="col-md-6"> Level 3：col-md-6 </div>
                    </div>
                </div>
                <div class="col-md-4">Level 1：col-md-4</div>
            </div>
        </div>

说明：可以看到，在第一个列(col-md-8)里面，嵌套了一个新行(row)，然后在新行里，又放置了两个等宽的(col-md-6)列，并且两个 col-md-6 加起来是12，但是总宽度和外面的 col-md-8 列的宽度一样，也就是说在  row 里的列宽度是按照百分比分配的。在任何一个嵌套列里，不管宽度是多少，都可以再进行 12 等分，并可以进一步组合。

4、列排序

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过 .col-md-push-* 和 .col-md-pull-* 来实现这一目的。

　　　　　<!--列排序-->
        <div class="container">
            <div class="row">
            　　<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            　　<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        　　</div>
        </div>

说明：默认情况下，col-md-9 在左边，col-md-3 在右边，如果要互换位置，需要将 col-md-9 列向右移动三个列的距离，也就是推三个列的 offset，样式用 col-md-push-3；而 col-md-3 需要向左移动，也就是拉九个 offset，样式用 col-md-pull-9。

响应式栅格

我们都知道，Bootstrap 可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕(md)，既然是响应式页面，当然还应该包括超小屏幕(xs)、小型屏幕(sm)、大屏幕(lg)等。

Bootstrap 栅格参数

说明：通过下表可以详细查看 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!