"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Comment contrôler la visibilité des éléments dans les mises en page réactives Bootstrap ?

Comment contrôler la visibilité des éléments dans les mises en page réactives Bootstrap ?

Publié le 2024-11-22
Parcourir:645

How to Control Element Visibility in Bootstrap Responsive Layouts?

Masquage d'éléments dans les mises en page réactives Bootstrap

Améliorez votre conception Bootstrap en optimisant la visibilité du contenu sur différentes tailles d'écran. Bootstrap offre des fonctionnalités pour afficher les éléments de menu sur des appareils plus petits, mais qu'en est-il des autres éléments de page ?

Pour résoudre ce problème, Bootstrap fournit des classes « visibles » et « cachées » qui vous permettent d'afficher ou de masquer dynamiquement des éléments en fonction de l'écran. taille. Les classes disponibles incluent :

Classes visibles :

  • .visible-xs-block : Afficher sur les très petits appareils (téléphones)
  • .visible-sm-block : Afficher sur les petits appareils (tablettes)
  • .visible-md-block : Afficher sur les appareils de taille moyenne (ordinateurs de bureau)
  • .visible-lg-block : Afficher sur les grands appareils (ordinateurs de bureau)

Classes cachées :

  • .hidden-xs : masquer sur les très petits appareils (téléphones)
  • .hidden-sm : masquer sur les petits appareils (tablettes)
  • .hidden-md : masquer sur les appareils de taille moyenne (ordinateurs de bureau)
  • .hidden-lg : masquer sur les gros appareils (ordinateurs de bureau)

Pour masquer vos pilules de navigation sur des écrans plus petits, ajoutez simplement la classe .hidden-xs au conteneur respectif.

Vous pouvez également utiliser la classe "hidden-*-down", qui masque les éléments au point d'arrêt spécifié ou plus petit.

N'oubliez pas d'utiliser la classe "visible-*-up" si vous je veux montrer le élément au point d'arrêt spécifié ou plus large.

Pour plus d'informations sur les classes d'utilitaires réactifs de Bootstrap, reportez-vous à leur documentation officielle sur http://getbootstrap.com/css/#responsive-utilities.

Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3