Masquage d’éléments de présentation sensible ?

Question

Regardant à travers bootstrap, il dirait qu’ils soutiennent s’effondrer les éléments de la barre de menus pour des écrans plus petits. Y a-t-il quelque chose de similaire pour les autres éléments de la page ?

Par exemple, j’ai un ainsi que nav-pilules flottait à droite. Sur un petit écran, cela entraîne des problèmes. J’aimerais au moins le mettre dans une liste déroulante les cliquer-à-spectacle-plus semblable.

Est-ce possible dans un cadre « bootstrap » existant ?

Answer 1

Nouveau visible classes ajouté à Bootstrap

Le plus petit des appareils Téléphones (<768px) (Class names : .visible-xs-block, hidden-xs)

Les petits appareils Comprimés (≥768px) (Class names : .visible-sm-block, hidden-sm)

Moyen d'appareils Les ordinateurs de bureau (≥992px) (Class names : .visible-md-block, hidden-md)

Gros appareils Les ordinateurs de bureau (≥1200px) (Class names : .visible-lg-block, hidden-lg)

Pour plus d'informations : http://getbootstrap.com/css/#responsive-utilities

---

Ci-dessous est obsolète depuis la v3.2.0

---

Le plus petit des appareils Téléphones (<768px) (Class names : .visible-xs, hidden-xs)

Les petits appareils Comprimés (≥768px) (Class names : .visible-sm, hidden-sm)

Moyen d'appareils Les ordinateurs de bureau (≥992px) (Class names : .visible-md, hidden-md)

Gros appareils Les ordinateurs de bureau (≥1200px) (Class names : .visible-lg, hidden-lg)

---

Beaucoup plus âgé Bootstrap

---

.hidden-phone, .hidden-tablet etc. sont pas pris en charge/obsolète.

Answer 2

Vous pouvez entrer ces suffixes de classe de module pour n’importe quel module de mieux contrôler où elle montrera ou être caché.

.visible-téléphone
.visible-tablette
.visible-Bureau
.Hidden-téléphone
.Hidden-tablette
.Hidden-Bureau

http://Twitter.github.com/bootstrap/Scaffolding.html faites défiler vers le bas

Answer 3

J'ai quelques précisions à ajouter ici:

1) La liste ci (visible téléphone, visible tablette, etc.) est obsolète dans le Bootstrap 3. Les nouvelles valeurs sont:

• visible-xs-*
• visible-sm-*
• visible-md-*
• visible-lg-*
• hidden-xs-*
• caché-sm-*
• caché-md-*
• caché-lg-*

L'astérisque se traduit par les éléments suivants pour chacun (je ne montre que visible-xs-* ci-dessous):

• visible-xs-bloc
• visible-xs-inline
• visible-xs-inline-block

2) Lorsque vous utilisez ces classes, vous n'avez pas l'ajout d'une période à l'avant (comme point de prêter à confusion montré dans le cadre de la réponse ci-dessus).

Par exemple:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) Vous pouvez utiliser visible-* et caché-* (par exemple, visible-xs et hidden-xs), mais ces derniers ont été dépréciés dans le Bootstrap 3.2.0.

Pour plus de détails et les dernières spécifications, rendez-vous ici et de la recherche pour "visible": http://getbootstrap.com/css/