Il arrive lorsqu'on utilise les Medias Queries d'avoir besoin pour certains supports de rendre une partie d'une page invisible ou visible. Bootstrap propose quelques classes bien pratiques pour réaliser cela :
Petit écran (smartphone) | Ecran réduit (tablette) | Ecran moyen (desktop) | Grand écran (desktop) | |
---|---|---|---|---|
.visible-xs | Visible | Caché | Caché | Caché |
.visible-sm | Caché | Visible | Caché | Caché |
.visible-md | Caché | Caché | Visible | Caché |
.visible-lg | Caché | Caché | Caché | Visible |
.hidden-xs | Caché | Visible | Visible | Visible |
.hidden-xs | Visible | Caché | Visible | Visible |
.hidden-md | Visible | Visible | Caché | Visible |
.hidden-lg | Visible | Visible | Visible | Caché |
Prenons un exemple avec une adaptation d'une présentation selon le support :
Modifiez la largeur de l'affichage pour voir l'effet.
Le code correspondant est celui-ci :
<div class="visible-lg"><h4>Vous êtes actuellement sur un grand écran<h4><img src="assets/img/moniteur.png" width="96" height="96"></div> <div class="visible-md"><h4>Vous êtes actuellement sur un écran moyen<h4><img src="assets/img/portable.png" width="96" height="96"></div> <div class="visible-sm"><h4>Vous êtes actuellement sur une tablette<h4><img src="assets/img/tablette.png" width="96" height="80"></div> <div class="visible-xs"><h4>Vous êtes actuellement sur un smartphone<h4><img src="assets/img/smartphone.png" width="96" height="96"></div>