web-dev-qa-db-fra.com

Cacher des éléments dans un layout réactif?

En regardant à travers bootstrap, il semble qu'ils prennent en charge la réduction des éléments de la barre de menu pour des écrans plus petits. Y a-t-il quelque chose de similaire pour d'autres éléments sur la page?

Par exemple, j'ai un long avec nav-pilules flotté à droite. Sur un petit écran, cela pose des problèmes. J'aimerais au moins le mettre dans un menu déroulant similaire "cliquer pour afficher".

Est-ce possible dans le cadre existant de Bootstrap?

htmlcsstwitter-bootstrapresponsive-design
275
Kaitlyn2004

Nouvelles classes visibles ajoutées à Bootstrap

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

Petits appareils Tablettes (≥768px) (Class names : .visible-sm-block, hidden-sm)

Périphériques moyens Ordinateurs de bureau (≥992px) (Class names : .visible-md-block, hidden-md)

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

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

Below est obsolète à partir de v3.2.0

Très petits appareils Téléphones (<768px) (Class names : .visible-xs, hidden-xs)

Petits appareils Tablettes (≥768px) (Class names : .visible-sm, hidden-sm)

Appareils de taille moyenne Ordinateurs de bureau (≥992px) (Class names : .visible-md, hidden-md)

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

Beaucoup plus vieux Bootstrap 

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

METTRE À JOUR:

Dans Bootstrap 4, il existe 2 types de classes:

  • Le hidden-*-up qui masque l'élément lorsque la fenêtre est au point d'arrêt donné ou plus large.
  • hidden-*-down qui masque l'élément lorsque la fenêtre est au point d'arrêt donné ou plus petit.

De plus, la nouvelle fenêtre xl est ajoutée pour les périphériques d’une largeur supérieure à 1200px. Pour plus d'informations, cliquez ici .

623
Marc Uberstein

Réponse de Bootstrap 4 bêta:

d-block d-md-none à masquer sur les périphériques moyens, grands et très grands.

d-none d-md-block à masquer sur les petits et très petits périphériques.

 enter image description here

Notez que vous pouvez également vous connecter en remplaçant d-*-block par d-*-inline-block

Réponse ancienne: Bootstrap 4 Alpha

  • Vous pouvez utiliser les classes .hidden-*-up pour masquer une taille donnée et des périphériques plus grands.

    .hidden-md-up à masquer sur les périphériques moyens, grands et très grands.

  • Il en va de même avec .hidden-*-down pour masquer une taille donnée et des périphériques plus petits

    .hidden-md-down à masquer sur les périphériques moyens, petits et très petits

  • visible- * n'est plus une option avec bootstrap 4

  • Pour afficher uniquement sur des périphériques de taille moyenne, vous pouvez combiner les deux éléments suivants:

    hidden-sm-down et hidden-xl-up

Les tailles valides sont:

  • xs pour les téléphones en mode portrait (<34em)
  • sm pour les téléphones en mode paysage (≥34em)
  • md pour les comprimés (≥48em)
  • lg pour les ordinateurs de bureau (≥62em)
  • xl pour les ordinateurs de bureau (≥75em)

C'était à partir de Bootstrap 4, alpha 5 (janvier 2017) . Plus de détails ici: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

98
Julien

Vous pouvez entrer ces suffixes de classe de module pour n’importe quel module afin de mieux contrôler où il sera affiché ou caché.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop

http://Twitter.github.com/bootstrap/scaffolding.html faire défiler vers le bas 

21
john taylor

J'ai quelques précisions à ajouter ici:

1) La liste affichée (visible-phone, visible-tablet, etc.) est obsolète dans Bootstrap 3. Les nouvelles valeurs sont les suivantes:

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

L'astérisque se traduit par ce qui suit pour chacun (je montre seulement visible-xs- * ci-dessous):

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

2) Lorsque vous utilisez ces classes, vous n’ajoutez pas de point devant (comme le montre la confusion dans une partie 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 hidden- * (par exemple, visible-xs et hidden-xs), mais ceux-ci sont obsolètes dans Bootstrap 3.2.0.

Pour plus de détails et les dernières spécifications, allez ici et cherchez "visible": http://getbootstrap.com/css/

18
Jazimov

Les classes hidden-* sont supprimées de Bootstrap 4 beta.

Si vous souhaitez afficher sur le moyen et plus haut utilisez les classes d-*, par exemple:

<div class="d-none d-md-block">This will show in medium and up</div>

Si vous voulez montrer seulement en petit et en dessous utilisez ceci:

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

Taille de l'écran et tableau de classe

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

Plutôt que d'utiliser des classes explicites .visible-*, vous créez un élément visible simplement en ne le cachant pas à cette taille d'écran. Vous pouvez combiner une classe .d-*-none avec une classe .d-*-block pour afficher un élément uniquement sur un intervalle donné de tailles d'écran (par exemple, .d-none.d-md-block.d-xl-none ne montre l'élément que sur des périphériques de moyenne et grande taille).

Documentation

14
kiranvj

Pour la version bêta de Bootstrap 4.0 (et je suppose que cela restera pour la finale), il y a un changement - sachez que les classes cachées ont été supprimées.

Voir la documentation: https://getbootstrap.com/docs/4.0/utilities/display/

Pour masquer le contenu sur mobile et afficher sur les plus gros appareils, vous devez utiliser les classes suivantes:

d-none d-sm-block

Le premier ensemble de classes affiche none pour tous les périphériques et le second pour les périphériques "sm" up (vous pouvez utiliser md, lg, etc. au lieu de sm si vous souhaitez afficher sur différents périphériques.

Je suggère de lire à ce sujet avant la migration:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

2
Przemek Nowak

Toutes les classes hidden-*-up, hidden-* ne fonctionnent pas, j'ajoute donc la classe hidden fabriquée par l'utilisateur avant visible-* (qui fonctionne pour la version d'amorçage actuelle). C'est très utile si vous ne devez afficher div que pour un seul écran et masquer pour tous les autres.

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>
2
Gediminas

Dans boostrap 4.1 (exécutez snippet car j'ai copié le code de la table entière à partir de la documentation Bootstrap):

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}
<table class="fixed_headers">
  <thead>
    <tr>
      <th>Screen Size</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hidden on all</td>
      <td><code class="highlighter-rouge">.d-none</code></td>
    </tr>
    <tr>
      <td>Hidden only on xs</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on sm</td>
      <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on md</td>
      <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on lg</td>
      <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on xl</td>
      <td><code class="highlighter-rouge">.d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible on all</td>
      <td><code class="highlighter-rouge">.d-block</code></td>
    </tr>
    <tr>
      <td>Visible only on xs</td>
      <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
    </tr>
    <tr>
      <td>Visible only on sm</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
    </tr>
    <tr>
      <td>Visible only on md</td>
      <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
    </tr>
    <tr>
      <td>Visible only on lg</td>
      <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible only on xl</td>
      <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
    </tr>
  </tbody>
</table>

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

0
Tai Ly