Sommaire

Afficher et masquer des éléments GRILLE ADAPTATIVE:Afficher des éléments GRILLE ADAPTATIVE:Masquer des éléments

1. L’objectif

Dans vos projets de création de site Web adaptatif, vous pouvez masquer et/ou afficher certains éléments de la structure de vos sites. Vous pouvez parfaitement juger pertinent de ne pas afficher telle ou telle zone pour l’affichage dans un smartphone et au contraire afficher certaines zones uniquement sur un smartphone et pas sur un écran d’ordinateur.

2. Les classes

Pour rappel, voici les quatre dimensions des écrans gérées par Bootstrap :

  • Smartphone (xs) : largeur inférieure à 768 pixels.

  • Tablette (sm) : largeur supérieure à 768 pixels.

  • Écran moyen d’ordinateur (md) : largeur supérieure à 992 pixels.

  • Écran large d’ordinateur (lg) : largeur supérieure à 1200 pixels.

Bootstrap nous propose d’utiliser la classe .visible-* pour afficher les blocs voulus et la classe .hidden-* pour masquer les blocs voulus. Dans ces classes l’astérisque en suffixe représente le type d’écran ciblé : xs (smartphone), sm (tablette), md (écran moyen) ou lg (écran large).

Si nous souhaitons masquer une boîte <div> dans un affichage sur une tablette, voilà la syntaxe à utiliser : <div class="hidden-sm">. Cette boîte sera affichée pour toutes les autres tailles d’écran. ...