Bootstrap Système de grille
Dans ce chapitre, nous expliquerons le système de grille de Bootstrap.
Bootstrap fournit un système de grille fluide, réactif et mobile-first. Lorsque la taille de l'écran ou de la fenêtre d'affichage augmente, le système se divise automatiquement en 12 colonnes maximum.
Qu'est-ce qu'une grille ?
D'après Wikipédia :
En design graphique, une grille est une structure (généralement bidimensionnelle) composée d'une série de lignes droites qui se croisent (verticales, horizontales) utilisées pour organiser le contenu. Elle est largement utilisée dans la conception imprimée pour la mise en page et la structure du contenu. En conception web, c'est une méthode permettant de créer rapidement des mises en page cohérentes et d'utiliser efficacement HTML et CSS.
En termes simples, une grille en conception web est utilisée pour organiser le contenu, ce qui rend le site web facile à parcourir et réduit la charge côté utilisateur.
Qu'est-ce que le système de grille Bootstrap ?
Description du système de grille dans la documentation officielle de Bootstrap :
Bootstrap inclut un système de grille fluide, réactif et mobile-first qui s'étend de manière appropriée jusqu'à 12 colonnes à mesure que la taille de l'appareil ou de la fenêtre d'affichage augmente. Il inclut des classes prédéfinies pour des options de mise en page simples, ainsi que de puissants mixins pour générer des mises en page plus sémantiques.
Comprenons l'affirmation ci-dessus. Bootstrap 3 est mobile-first dans le sens où le code Bootstrap part des appareils à petit écran (tels que les appareils mobiles, les tablettes) puis s'étend aux composants et aux grilles sur les appareils à écran plus grand (tels que les ordinateurs portables, les ordinateurs de bureau).
Stratégie mobile-first
- Contenu
- Décidez ce qui est le plus important.
- Layout
- Priorisez la conception pour les largeurs plus petites.
- Le CSS de base est mobile-first, et les requêtes média sont destinées aux tablettes et aux ordinateurs de bureau.
- Amélioration progressive
- Ajoutez des éléments à mesure que la taille de l'écran augmente.
Le système de grille responsive se divise automatiquement en 12 colonnes maximum à mesure que la taille de l'écran ou du viewport augmente.
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Comment fonctionne le système de grille Bootstrap
Le système de grille crée des mises en page via une série de lignes et de colonnes qui contiennent du contenu. Voici comment fonctionne le système de grille Bootstrap :
- Les lignes doivent être placées dans la classe.container, afin d'obtenir un alignement et un remplissage corrects.
- Utilisez des lignes pour créer des groupes horizontaux de colonnes.
- Le contenu doit être placé dans des colonnes, et seules les colonnes peuvent être des enfants directs des lignes.
- Predefined grid classes, such as.rowet.col-xs-4, peuvent être utilisées pour créer rapidement des mises en page de grille. Les mixins LESS peuvent être utilisés pour des mises en page plus sémantiques.
- Les colonnes créent des espaces entre le contenu des colonnes grâce au padding. Ce padding est obtenu par.rowsqui prennent des marges négatives sur la marge extérieure, indiquant le décalage de ligne pour la première et la dernière colonne.
- Le système de grille est créé en spécifiant les douze colonnes disponibles que vous souhaitez couvrir. Par exemple, pour créer trois colonnes égales, utilisez trois.col-xs-4。
Requêtes média
Les requêtes média sont de très astucieuses « règles CSS conditionnelles ». Elles ne s'appliquent qu'à une partie du CSS en fonction de certaines conditions spécifiées. Si ces conditions sont remplies, les styles correspondants sont appliqués.
Les requêtes média dans Bootstrap vous permettent de déplacer, afficher et masquer du contenu en fonction de la taille de la fenêtre d'affichage. Les requêtes média suivantes sont utilisées dans les fichiers LESS pour créer les principaux seuils de point de rupture du système de grille de Bootstrap.
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
Nous incluons parfois aussimax-width, afin de limiter l'impact du CSS à une plage plus réduite de tailles d'écran.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Les requêtes média comportent deux parties : d'abord une spécification d'appareil, puis une règle de taille. Dans le cas ci-dessus, les règles suivantes sont définies :
Regardons la ligne de code suivante :
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
Pour tous les appareils avecmin-width: @screen-sm-min, si la largeur d'écran est inférieure à@screen-sm-max, alors un certain traitement sera effectué.
Options de grille
Le tableau suivant résume le fonctionnement du système de grille de Bootstrap sur plusieurs appareils :
| Appareils très petits Téléphones (<768px) | Petits appareils Tablettes (≥768px) | Appareils moyens Ordinateurs de bureau (≥992px) | Grands appareils Ordinateurs de bureau (≥1200px) | |
|---|---|---|---|---|
| Comportement de la grille | Toujours horizontal | Réduit au départ, horizontal au-dessus des points de rupture | Réduit au départ, horizontal au-dessus des points de rupture | Réduit au départ, horizontal au-dessus des points de rupture |
| Largeur maximale du conteneur | Aucune (auto) | 750px | 970px | 1170px |
| Préfixe de classe | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Nombre de colonnes et | 12 | 12 | 12 | 12 |
| Largeur minimale de colonne | Auto | 60px | 78px | 95px |
| Largeur de gouttière | 30px (15px de chaque côté d'une colonne) | 30px (15px de chaque côté d'une colonne) | 30px (15px de chaque côté d'une colonne) | 30px (15px de chaque côté d'une colonne) |
| Imbriquable | Oui | Oui | Oui | Oui |
| Décalages | Oui | Oui | Oui | Oui |
| Ordre des colonnes | Oui | Oui | Oui | Oui |
Structure de base de la grille
Voici la structure de base de la grille Bootstrap :
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
Examinons quelques exemples simples de grille :
- Exemple : empilement horizontal
- Exemple : appareils de taille moyenne et grande
- Exemple : téléphones, tablettes, ordinateurs de bureau
Réinitialisations de colonnes responsives
L'exemple suivant contient 4 grilles, mais nous ne pouvons pas déterminer où les grilles s'affichent lors de la navigation sur de petits appareils.
Pour résoudre ce problème, vous pouvez utiliser la classe.clearfixet lesclasses utilitaires responsivespour le résoudre, comme montré dans l'exemple ci-dessous :
Exemples
Essayez-le vous-même »
Ajustez la taille de la fenêtre dans votre navigateur pour voir les changements, ou consultez le résultat sur votre téléphone.
Décalage des colonnes
Le décalage est une fonctionnalité utile pour des mises en page plus professionnelles. Il peut être utilisé pour faire plus d'espace pour les colonnes. Par exemple,.col-xs-*les classes ne prennent pas en charge les décalages, mais elles peuvent simplement obtenir cet effet en utilisant une cellule vide.
Pour utiliser les décalages sur les grands écrans, utilisez les.col-md-offset-*classes. Ces classes augmentent la marge gauche (margin) d'une colonne de*colonnes, où*la plage va de1à11。
Dans l'exemple ci-dessous, nous avons
Exemple
Essayez-le vous-même »
Le résultat est le suivant :
Imbrication des colonnes
Pour imbriquer la grille par défaut dans le contenu, ajoutez une nouvelle.row, et dans une.col-md-*colonne existante, ajoutez un ensemble de.col-md-*colonnes. La ligne imbriquée doit contenir un ensemble de colonnes, et le nombre de colonnes ne peut pas dépasser 12 (en fait, il n'est pas obligatoire de remplir les 12 colonnes).
Dans l'exemple ci-dessous, la mise en page comporte deux colonnes, et la deuxième colonne est divisée en deux lignes de quatre boîtes.
Exemple
Essayez-le vous-même »
Le résultat est le suivant :
Ordre des colonnes
Une autre fonctionnalité parfaite du système de grille Bootstrap est que vous pouvez facilement écrire les colonnes dans un ordre, puis les afficher dans un autre ordre.
Vous pouvez très facilement modifier l'ordre intégré des colonnes de la grille avec les.col-md-push-*et.col-md-pull-*classes, où*la plage va de1à11。
Dans l'exemple ci-dessous, nous avons une mise en page à deux colonnes, avec la colonne de gauche étroite et servant de barre latérale. Nous utiliserons les classes.col-md-push-*et.col-md-pull-*pour échanger l'ordre de ces deux colonnes.
Exemple
Essayez-le vous-même »
Le résultat est le suivant :
