Bootstrap mise en page

Utilitaires pour les Medias Queries

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 :

Vous êtes actuellement sur un grand écran

Vous êtes actuellement sur un écran moyen

Vous êtes actuellement sur une tablette

Vous êtes actuellement sur un smartphone

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>	
Précédent Suivant

Retour à l'accueil...