Les classes utiles pour faire du responsive avec Bootstrap

Actuellement, on utilise la plus part du temps une conception de page mobile-friendly (adaptée aux mobiles).

Pour nous aider lors des phases de développement responsive bootstrap nous propose d’utiliser ces classes utilitaires pour afficher et masquer le contenu suivant les résolutions de l’écran.

Les classes en mode impression aussi sont proposées pour basculer le contenu lors de l’impression d’un site web.

On vous propose ici une liste non exhaustive des classes qu’on pourrait utiliser pour éviter de recréer entièrement des taches répétitives sur chaque type d’appareil.

Les classes en mode web

  • Les classes .hidden-*-up permettent de cacher l’élément concerné sur les points d’arrêts précisé et toutes les résolutions supérieurs ou plus larges.
    Par exemple .hidden-md-up va cacher les éléments medium, large, et extra-large viewports.

  • Les classes .hidden-*-down permettent de cacher l’élément concerné sur les points d’arrêts précisé et toutes les résolutions inferieurs ou plus petites. Par exemple, .hidden-md-down va cacher les éléments extra-small, small, et medium viewports.

  • Les classes “visible” et “show” spécifiques n’existent pas, il vous faudra jouer sur les points d’arrêts qui y correspondent pour l’afficher ou pas.

  • Vous pouvez combiner les classes .hidden-*-up et .hidden-*-down classe pour afficher un élément sur une intervalle de résolution d’écran.
    Par exemple, .hidden-sm-down.hidden-xl-up va afficher l’élément uniquement sur les medium et large viewports.
    Le fait de combiner plusieurs .hidden-*-up et .hidden-*-down sont inutiles.

  • Par contre, il y a des cas spécifiques de résolution personnalisé qui ne peuvent être gérer par les classes bootstrap. Dans ce cas là il vous faudra écrire du css personnalisé.

Extra small
Mobile en mode portrait (<544px)
Small
Mobile en mode paysage (≥544px – <768px)
Medium
Tablette (≥768px – <992px)
Larges
Desktop (≥992px – <1200px)
Extra large
Desktop (≥1200px)
.hidden-xs-down Visible Visible Visible Visible
.hidden-sm-down Visible Visible Visible
.hidden-md-down Visible Visible
.hidden-lg-down Visible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up Visible
.hidden-md-up Visible Visible
.hidden-lg-up Visible Visible Visible
.hidden-xl-up Visible Visible Visible Visible

Les classes en mode print

Bootstrap nous propose aussi des classes spécifiques en mode impression de site web

Class Etat Print
.visible-print-block Visible
(en mode display: block)
.visible-print-inline Visible
(en mode display: inline)
.visible-print-inline-block Visible
(en mode display: inline-block)
.hidden-print Visible

Répondre