Masquer des éléments dans une mise en page réactive?

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

Par exemple, j'ai un long avec des nav-pills flotté à droite. Sur un petit écran, cela cause des problèmes. J'aimerais au moins le mettre dans une liste déroulante similaire click-to-show-more.

Est-ce possible dans le cadre Bootstrap existant?

Nouvelles classes visibles ajoutées à Bootstrap

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

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

Ordinateurs de bureau pour appareils moyens (≥992 pixels)(Class names : .visible-md-block, hidden-md)

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

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

Ci-dessous est déconseillé à partir de la v3.2.0

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

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

Ordinateurs de bureau pour appareils moyens (≥992 pixels) (Class names : .visible-md, hidden-md)

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

Bootstrap beaucoup plus ancien

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

METTRE À JOUR:

Dans Bootstrap 4, il existe 2 types de classes:

• Les éléments hidden-*-upqui masquent l'élément lorsque la fenêtre est au point d'arrêt donné ou plus large.
• hidden-*-down qui masquent l'élément lorsque la fenêtre est au point d'arrêt donné ou plus petit.

En outre, la nouvelle xlfenêtre d'affichage est ajoutée pour les périphériques d'une largeur supérieure à 1 200 pixels. Pour plus d'informations, cliquez ici .

Bootstrap 4 Beta Answer:

d-block d-md-nonepour se cacher sur des appareils moyens, grands et très grands .

d-none d-md-blockpour se cacher sur les petits et très petits appareils.

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

Ancienne réponse: Bootstrap 4 Alpha

• Vous pouvez utiliser les classes .hidden-*-uppour vous cacher sur une taille donnée et des appareils plus grands

  .hidden-md-uppour se cacher sur des appareils moyens, grands et très grands .

• Il en va de même .hidden-*-downpour se cacher sur une taille donnée et des appareils plus petits

  .hidden-md-downà cacher sur des petites, moyennes et extra-petits appareils

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

• Pour afficher uniquement sur les appareils de taille moyenne , vous pouvez combiner les deux:

  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 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/

Sur Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/

Réponse Bootstrap 4.x

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

Si vous voulez montrer sur moyen et haut, utilisez les d-*classes, par exemple:

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

Si vous souhaitez afficher uniquement 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 des classes

| 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 .visible-*classes explicites , vous rendez un élément visible en ne le cachant simplement pas à cette taille d'écran. Vous pouvez combiner une .d-*-noneclasse avec une .d-*-blockclasse pour afficher un élément uniquement sur un intervalle donné de tailles d'écran (par exemple, ne .d-none.d-md-block.d-xl-none montre l'élément que sur des appareils moyens et grands).

Documentation

Vous pouvez entrer ces suffixes de classe de module pour n'importe quel module afin de mieux contrôler 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 défiler vers le bas

J'ai quelques clarifications à ajouter ici:

1) La liste affichée (téléphone visible, tablette visible, etc.) est déconseillée dans Bootstrap 3. Les nouvelles valeurs sont:

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

L'astérisque se traduit comme suit pour chacun (je montre uniquement visible-xs- * ci-dessous):

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

2) Lorsque vous utilisez ces classes, vous n'ajoutez pas de point avant (comme le montre de façon confuse 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 ont été dépréciés dans Bootstrap 3.2.0.

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

Tout hidden-*-up, les hidden-*classes ne fonctionnent pas pour moi, donc j'ajoute une hiddenclasse self-made avant visible-*(qui fonctionne pour la version de bootstrap actuelle). Il est très utile si vous devez afficher div uniquement pour un écran et le 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>

Pour Bootstrap 4.0 beta (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 les documents: https://getbootstrap.com/docs/4.0/utilities/display/

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

d-none d-sm-block

Le jeu de première classe n'en affiche aucun sur tous les appareils et le second l'affiche pour les appareils "sm" (vous pouvez utiliser md, lg, etc. au lieu de sm si vous souhaitez afficher sur différents appareils.

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

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

Dans boostrap 4.1 (exécutez l'extrait parce que j'ai copié le code de la table entière 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