En regardant dans bootstrap, il semble qu'ils prennent en charge la réduction des éléments de la barre de menu pour les écrans plus petits. Existe-t-il quelque chose de similaire pour les autres éléments de la page ?
Par exemple, j'ai un
Est-ce possible dans le cadre existant de Bootstrap ?
Très petits appareils
Téléphones (<768px) (Nom des classes : .visible-xs-block, hidden-xs)
Petits appareils
Tablettes (≥768px) (Nom des classes : .visible-sm-block, hidden-sm)
Périphériques de taille moyenne
Ordinateurs de bureau (≥992px) (Nom des classes : .visible-md-block, hidden-md)
Périphériques de grande taille
Ordinateurs de bureau (≥1200px) (Nom des classes : .visible-lg-block, hidden-lg)
Les éléments ci-dessous sont obsolètes depuis la version 3.2.0.
Dispositifs très petits
Téléphones (<768px) (Nom des classes : .visible-xs, hidden-xs)
Petits appareils
Tablettes (≥768px) (Nom des classes : .visible-sm, hidden-sm)
Appareils de taille moyenne
Ordinateurs de bureau (≥992px) (Nom des classes : .visible-md, hidden-md)
Appareils de grande taille
Ordinateurs de bureau (≥1200px) (Nom des classes : .visible-lg, hidden-lg)
Bootstrap beaucoup plus ancien
.hidden-phone, .hidden-tablet
etc. ne sont pas supportés/supprimés.
UPDATE:
Dans Bootstrap 4 il y a 2 types de classes :
hidden-*-up
qui cachent l'élément lorsque le viewport est au point de rupture donné ou plus large.hidden-*-down
qui cache l'élément lorsque la fenêtre d'affichage est au point de rupture donné ou plus petite.De plus, la nouvelle fenêtre xl
a été ajoutée pour les appareils dont la largeur est supérieure à 1200px. [Pour plus d'informations, cliquez ici][1].
[1] : https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes
Vous pouvez saisir ces suffixes de classe de module pour tout module afin de mieux contrôler l'endroit où il sera affiché ou masqué.
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.html scroll to bottom
J'ai quelques clarifications à ajouter ici :
L'astérisque se traduit par ce qui suit pour chacun (je ne montre que visible-xs-* ci-dessous) :
Par exemple :
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
Pour plus de détails et les dernières spécifications, allez ici et cherchez "visible" : http://getbootstrap.com/css/