Maison > interface Web > tutoriel CSS > le corps du texte

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

Barbara Streisand
Libérer: 2024-11-06 10:06:03
original
230 Les gens l'ont consulté

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 permettant d'afficher des é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 de 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.

<code class="html"><div class="nav-pills hidden-xs float-right">...</div></code>
Copier après la connexion

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

<code class="html"><div class="nav-pills hidden-sm-down float-right">...</div></code>
Copier après la connexion

N'oubliez pas d'utiliser la classe "visible-*-up" si vous souhaitez afficher l'é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.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal