Bootstrap - Utilitaires réactifs

Bootstrap fournit quelques classes d'assistance, pour un développement plus rapide et adapté aux mobiles. Ceux-ci peuvent être utilisés pour afficher et masquer le contenu par appareil via une requête multimédia, combinés avec des appareils grands, petits et moyens.

Utilisez-les avec parcimonie et évitez de créer des versions entièrement différentes du même site. Responsive utilities are currently only available for block and table toggling.

Des classes	Dispositifs
.visible-xs	Très petit (moins de 768 pixels) visible
.visible-sm	Petit (jusqu'à 768 pixels) visible
.visible-md	Moyen (768 px à 991 px) visible
.visible-lg	Plus grand (992 pixels et plus) visible
.hidden-xs	Très petit (moins de 768 pixels) masqué
.hidden-sm	Petit (jusqu'à 768 px) masqué
.hidden-md	Moyen (768 px à 991 px) masqué
.hidden-lg	Plus grand (992 px et plus) masqué

Classes d'impression

Le tableau suivant répertorie les classes d'impression. Utilisez-les pour basculer le contenu à imprimer.

Des classes	Impression
.visible-print	Oui visible
. impression cachée	Visible uniquement par le navigateur pour ne pas imprimer.

Exemple

L'exemple suivant illustre l'utilisation des classes d'assistance répertoriées ci-dessus. Redimensionnez votre navigateur ou chargez l'exemple sur différents appareils pour tester les classes d'utilitaires réactifs.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks indique que l'élément est visible dans votre fenêtre actuelle.