utilisation de la grille d'amorçage

Utilisation de la grille d'amorçage : 1. Utilisez le conteneur pour envelopper le div ; 2. Définissez les lignes à l'intérieur du div ; 3. Définissez les colonnes pour créer rapidement ce cadre ; 4. Modifiez la largeur en faisant glisser le navigateur.

L'environnement d'exploitation de cet article : système Windows 7, bootstrap3, ordinateur Dell G3.

Comment utiliser la grille bootstrap ?

Le div est enveloppé dans un conteneur, puis définit les lignes à l'intérieur. Après avoir défini les lignes puis défini les colonnes, ce cadre peut être rapidement construit

<div class="container">
            <h1>Hello, world!</h1>
         
            <div class="row">
                <div class="col-md-1"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                    第一列占1个md
                    </p>
                </div>
         
                <div class="col-md-2" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        这个是第二列 占 2 个md
                    </p>
                </div>
                <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>最后一个md占9个列
                        </p>
                </div>
            </div>
        </div>

Le nombre total. est garanti 12, par glisser-déposer. Les modifications peuvent être vues en modifiant la largeur du navigateur.

De plus, la taille de l'écran l'affectera également. À ce stade, la classe de la colonne doit également utiliser la plus grande couleur. Vous pouvez voir le changement en faisant glisser le navigateur.

<div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    中型占6，大型占4
                </div>
                <div class="col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    中型占6，大型占8
                </div>
            </div>
        </div>

L'allocation complète de la taille de la grille

.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)

Recommandé : "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!