A quoi sert le système de grille bootstrap ?

En bootstrap, le rôle du système de grille est de permettre au même ensemble de pages de s'adapter à des appareils avec des résolutions différentes ; le système divise chaque ligne en 12 grilles en moyenne, puis précise qu'un même élément occupera un numéro différent de grilles sur différents appareils, réalisant ainsi la mise en page pour différents appareils.

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

A quoi sert le système de grille bootstrap ? 1. Le système de grille bootstrap : La fonction est de créer le même ensemble de pages s'adapte à différentes résolutions de l'appareil

2. Mise en œuvre du système de grille : divisez chaque ligne en 12 grilles, puis précisez que le même élément occupera un nombre différent de grilles sur les appareils mobiles et les appareils PC. . Par exemple : un div occupe 4 sur une grille d'ordinateur, occupant 12 grilles sur le téléphone mobile

3 Étapes

1 Définir le conteneur : équivalent à table table

*Classification du conteneur :

1.conteneur : largeur fixe. varie selon les appareils (laisser vide)

2.container-fluid : 100%

2. Définir la ligne : équivalent au style tr : ligne

3. Définir l'élément : préciser le nombre de grilles occupées par l'élément sur les différents appareils. . Style : col-code de l'appareil-nombre de grilles

*Code de l'appareil :

1.xs : téléphone mobile ultra petit écran (768px) : col-xs-12

2.sm : tablette petit écran (> =768px)

3.md : Moniteur de bureau à écran moyen (>=992px)

4.lg : Moniteur de bureau à grand écran (>=1200px)

**Remarque : Si le nombre de grilles d'affilée dépasse 12, l'excès de retour à la ligne automatique partiel

**Remarque : les attributs de classe définis sont compatibles vers le haut, mais incompatibles vers le bas si la largeur de l'appareil est inférieure à la valeur minimale du code de l'appareil de l'attribut de classe de grille que vous avez défini. un élément remplira un espace par défaut.

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!