Maison >interface Web >tutoriel CSS >Comment masquer des éléments dans des mises en page réactives avec Bootstrap ?
Comment masquer des éléments dans des mises en page réactives avec Bootstrap ?
- Barbara Streisandoriginal
- 2024-11-06 08:19:02815parcourir
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 des éléments en fonction de la taille de l'écran :
- Extra petits appareils : Téléphones (<768px) - .visible-xs-* (afficher), .hidden-xs (masquer )
- 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 :
Remarques supplémentaires :
- Pour Bootstrap 4, utilisez Hidden-*-up (masqué pour des points d'arrêt plus grands) ou Hidden-*-down (se cache pour les points d'arrêt plus petits).
- Bootstrap 3.2.0 a abandonné .hidden-* au profit de .visible-*.
- Dans les anciennes versions de Bootstrap, .hidden-phone et .hidden-tablet sont obsolètes.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!