Faciliter l’intégration responsive avec Bootstrap 3.0

Le Grid System de Bootstrap 3

Le système de grille Bootstrap fournit un moyen rapide et facile pour mettre en page nos sites Web. Contrairement à la version 2.x de bootstrap où les grilles sont fixés par défaut, la nouvelle version, à savoir Bootstrap 3 introduit l’approche responsive par la technique mobile first c’est-à-dire on pourra avoir jusqu’à 12 colonnes dépendant du support utilisé ( le viewport).

Bootstrap 3 comprend des classes de grilles prédéfinies pour faire rapidement la mise en page pour différents types d’appareils comme les smartphones, les tablettes, les ordinateurs de bureau, etc.

Par exemple, vous pouvez utiliser la classe .col-XS- pour cibler les colonnes de la grille pour les petits dispositifs comme les mobiles, le .col-sm pour les appareils plus grand que les smartphones comme les tablettes, la classe .col-MD- pour les appareils de taille moyenne comme l’écran de bureau et enfin la classe .col-LG- pour les supers grands écrans de bureau.

Caractéristiques du grid system de Bootstrap 3
Supports mobiles (<768px)
Support tablette (≥768px)
Ecran Desktop de taille moyenne (≥992px)
Ecran Desktop de grande taille (≥1200px)
Largeur du wrapper Aucun (auto) 750px 970px 1170px
le comportement de la grille Toujours à l’horizontal Taille comprimée au debut puis change de position par rapport au points d’arrêt
préfixe des classes .col-XS- .col-sm .col-MD- .col-LG-
Largeur de chaque colonne Max Auto ~ 62px ~ 81px ~ 97px
Marges 15px de chaque côté d’une colonne (par exemple 30px )

Par rapport au tableau ci-dessus, on tient à apporter quelques remarques:

Avec la préfixe étoile sur les classes par exemple la classe *.col-sm n’impactera pas seulement les appareils mobiles, mais aussi les appareils de tailles moyennes et grandes tailles c’est-à-dire tous les supports ayant une taille d’écran supérieure ou égale à 768px ( ≥768px ) à condition que les classes .col-MD- * et .col-LG- * ne sont pas présent.

Dans le même principe, la classe .col-MD- * va impacter aussi sur les écrans de grande taille si la classe .col-LG- * est pas présent.

Template à 2 colonnes avec Bootstrap

L’exemple suivant va vous montrer la façon de créer deux colonnes sur les appareils de résolution moyenne (desktop) ainsi que sur les écrans inférieurs à 992 pixels, ce qui est assez fréquent sur les tablette (iPad, samsung tab).

Le système de grille de Bootstrap repose sur 12 colonnes, afin de garder les colonnes sur une seule ligne (c’est-à-dire cote à côte), la somme des nombres de colonne sur chaque rangée doit être égale à 12. C’est exactement le cas dans l’exemple ci-dessus.(6+6, 4+8 et 3+9)

Template à 3 colonnes avec Bootstrap

On va créer d’autres modèles basés sur le même principe de celui avec 2 colonnes.
Dans l’exemple suivant on va créer trois colonnes sur les supports desktop et tablette en mode paysage. Cependant, en mode portrait, on va passer les blocs les uns par dessus les autres.

Template avec colonne flexible sur Bootstrap

Maintenant, nous allons créer un Template plus souple qui va changer la disposition des colonnes selon la résolution de la fenêtre.

On va créer une mise en page à trois colonnes sur les desktop de grande ou moyenne taille et sur les tablettes (par exemple iPad) en mode paysage.

Mais sur les petits supports comme les tablettes en mode portrait, il se transformera en mise en page à deux colonnes et la troisième colonne va tout simplement changer de ranger.

Dans l’exemple ci-dessus la somme des nombres de colonnes de type petite grille (c’est-à-dire ayant une classe col-sm * ) est de 3 + 9 + 12 = 24 et est donc supérieur à 12 donc la troisième colonne va ce mettre dans une autre rangée sur les petits appareils ayant pour résolution inférieure à 992 pixels.

Template avec colonne flexible suivant le support avec Bootstrap

Avec l’approche mobile first de Bootstrap 3, vous pouvez facilement contrôler la disposition des colonnes sur différents supports ( big desktop, desktop, laptop, tablettte, smartphone…).

On va illustrer comme ceci la disposition des blocs :

grid-system-illustration

Dans l’illustration ci-dessus, il y aura au total 12 grids de contenu sur tous les appareils, mais leur disposition varie en fonction de la taille de l’écran de l’appareil.

Sur les périphériques mobiles, la mise en page se fait dans une colonne en 12 rangées placées l’un au dessus des autres, alors que sur tablette, il s’affichera sur deux Grilles de colonne qui seront composés de 2 colonnes et de 6 lignes.

En outre, pour les périphériques avec écran moyen comme les ordinateurs portables et les ordinateurs de bureau, il s’affichera sur trois colonnes et enfin sur les grands écrans, il s’affichera sur quatre colonnes et trois rangées

Maintenant, la question est de savoir comment nous pouvons créer de telles dispositions en se basant sur l’approche mobile first de Bootstrap.

Commençons par traiter les dispositions sur le support de type ordinateur portable ou bureau de taille moyenne c’est-à-dire une disposition sur 3 colonnes et 4 lignes (3×4 grille de mise en page).

Voici le code HTML nécessaire pour cela

Le rendu sur écran d’ordinateur portable ou de bureau ayant une résolution entre 992px et 1200px vous trouverez qu’il se disposera en 3 colonnes égales et qui se disposera sur 4 rangées (3×4).

Mais attendez, l’exemple ci-dessus présente un grand problème d’alignement.
Si la hauteur des colonnes n’est pas uniforme donc la mise en page sera cassée. Pour résoudre ce problème il suffit de combiner la classe .clearfix et les classes utilitaires de bootstrap.

Vu que le grid system de Bootstrap dispose de 12 colonne donc un devrait avoir 12 pour l’ensemble des classes col-MD- * .

C’est pour cela qu’on a besoin de casser le flux après chaque troisième colonne et pour cela on va utiliser la classe clearfix.
Dans un tout autre scénario où le nombre de grid est différent dans chaque colonne, on doit utiliser .clearfix pour compléter la grille.

Remarque: La classe utilitaire .visible-md-bloc limite l’efficacité de .clearfix uniquement sur les appareils de résolution moyenne.

Maintenant il est temps de personnaliser notre disposition sur les autres supports.

Nous allons voir en premier les tablettes en mode portrait , nous voulons avoir un rendu avec une grille de 2×6 (soit 2 colonnes et 6 lignes).
Alors, il suffira d’ajouter la classe .col-sm-6 sur chaque colonne.

Maintenant, puisque que nous voulons avoir 2 colonnes par rangée, pour cela il suffira de mettre une classe clearfix combiné avec visible-sm-bloc après chaque occurrence de 2 colonnes.

De même, vous pouvez personnaliser la mise en page pour les supports avec grande résolution comme sur un écran large haute définition.

Les classes utilitaires responsive de Bootstrap

Vous pouvez utiliser les classes utilitaires suivantes pour permettre la visibilité de certains éléments sur un support spécifique :

Classe Description
.visible-XS- * Rend l’élément visible uniquement sur ​​les petits supports ayant un largeur d’écran inférieur à 768px . Invisible sur les autres.
.visible-sm * Rend l’élément visible uniquement sur ​​les petits supports ayant un largeur d’écran supérieure ou égale à 768px (c. ≥768px ) mais moins de 992px . Invisible sur les autres.
.visible-MD- * Rend l’élément visible uniquement sur ​​les supports de taille moyenne ayant un largeur d’écran supérieure ou égale à 992px (c. ≥992px ) mais moins de 1200px . Invisible sur les autres.
.visible-LG- * Rend l’élément visible uniquement sur ​​les grands écrans ayant un largeur supérieure ou égale à 1200px (c. ≥1200px ). Invisible sur les autres.

De même, vous pouvez utiliser les classes d’utilitaires pour cacher les éléments sur certains appareils.

Classe Description
-xs .hidden Cacher les éléments seulement sur ​​les petits supports ayant largeur d’écran inférieure à 768px . Visible sur les autres.
.hidden-sm Cacher les éléments seulement sur ​​les petits supports ayant largeur d’écran supérieure ou égale à 768px (c. ≥768px ) mais moins de 992px . Visible sur les autres.
.hidden-md Cacher les éléments uniquement sur ​​les supports de taille moyenne ayant un largeur d’écran supérieur ou égal à 992px (c. ≥992px ) mais moins de 1200px . Visible sur les autres.
.hidden-lg Cacher les éléments sur les supports ayant écran large qui est supérieure ou égale à 1200px (c. ≥1200px ). Visible sur les autres.

Répondre