Masquer des éléments dans des mises en page réactives avec Bootstrap

Lors de la conception de mises en page réactives, la gestion de l'espace devient cruciale, en particulier sur les écrans plus petits. Bootstrap prend en charge la réduction des éléments de la barre de menus pour les appareils mobiles, mais que se passe-t-il si vous souhaitez masquer d'autres éléments de page de la même manière ?

Solution :

Bootstrap propose des cours qui vous permettent pour masquer les éléments en fonction de la taille de l'écran :

• Très petits appareils : Téléphones (
• Petits appareils : Tablettes (≥768px) - .visible-sm-* (afficher), .hidden -sm (masquer)
• Appareils moyens : Ordinateurs de bureau (≥992px) - .visible-md-* (afficher), .hidden-md (masquer)
• Grands appareils : Ordinateurs de bureau (≥1200px) - .visible-lg-* (afficher), .hidden -lg (masquer)

Exemple d'utilisation :

Pour masquer un élément .nav-pills sur les petits écrans :

  ...

Notes supplémentaires :

• Pour Bootstrap 4, utilisez Hidden-*-up (masqué pour les points d'arrêt plus grands) ou Hidden-*-down (se cache pour les points d'arrêt plus petits).
• Bootstrap 3.2.0 a rendu obsolète .hidden-* au profit de .visible-*.
• Dans les anciennes versions de Bootstrap, .hidden-phone et .hidden-tablet sont obsolètes.