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


298

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?

Réponses:


649

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 .


2
Je ne crois pas .hidden-phoneet .hidden-tabletsont déconseille ** - ils sont ** non pris en charge . Obsolète a tendance à signifier "a été remplacé par d'autres approches, bien qu'il soit encore soutenu qu'il devrait être supprimé progressivement" . Cela semble être le cas avec Bootstrap 3.2.0 - .visible-xset similaires fonctionnent toujours pour l'instant, tandis que .hidden-phoneet les amis sont complètement absents de la fonctionnalité de Bootstrap.
Slipp D. Thompson,

2
Merci - j'ai mis à jour la réponse au bon libellé. Devrait être un peu plus clair pour les autres utilisateurs maintenant.
Marc Uberstein

2
FYI A fait un peu plus de recherche - il semble que «obsolète» soit couramment utilisé dans des contextes formels car l'état de non-soutien suit la dépréciation. Je pense que «non pris en charge» fonctionne tout aussi bien, mais peu importe. Merci d'avoir pris en compte ma suggestion précédente.
Slipp D. Thompson,

1
:) J'ai ajouté les deux ... pour l'amour du profane. Merci d'avoir fait un peu plus de recherche sur la formulation correcte, gardez certainement cela à l'esprit pour les prochains messages. cheers
Marc Uberstein

2
Notez que la mise à jour de Bootstrap 4 concerne le bootstrap 4 alpha. Dans la version finale, vous devez utiliser les classes .d- -none et d- -block. getbootstrap.com/docs/4.0/migration/#responsive-utilities
Pieter De Bie

138

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.

entrez la description de l'image ici

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/


8
Ceux-ci ont été supprimés de la version bêta v4. Vous utilisez maintenant les .d-classes pour masquer ou afficher des tailles différentes. getbootstrap.com/docs/4.0/utilities/display
DriverDan

1
J'ai vu, mais j'essaie toujours de régler ça ... Comment masquer quelque chose sur un petit écran seulement maintenant? J'ai besoin de l'opposé de d-md-none, car je bascule sur div en fonction du grand ou du petit écran.
Leo Muller

@LeoMuller Si vous voulez qu'un élément se cache à la taille sm et en dessous, mais visible sur md, lg et xl, utilisez d-none d-md-block. code.luasoftware.com/tutorials/bootstrap/…
Desmond Lua

@DesmondLua Je pense la même chose que LeoMuller ... dans BS4, certains éléments se comportent comme des blocs et d'autres comme flex ... ¿pourquoi dois-je connaître la nature BS4 d'un élément uniquement si je souhaite le cacher dans les téléphones mais je voulez-vous l'afficher en tant que norme BS4 sur les tablettes et les ordinateurs portables? C'est contraire à ce que vous pensez normalement ... J'espère que l'équipe BS4 corrigera cela avant la version finale
JavierFuentes

Je ne trouve pas la documentation sur d-block dans la documentation Bootstrap 4 actuelle, ont-ils supprimé cela?
Mojimi

32

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


23

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


Merci - je veux vraiment qu'ils soient visibles ... juste sous une forme condensée / effondrée comme le navbar-collapse qui est exclusivement pour la navbar et je ne vois aucun autre support pour d'autres éléments ...
Kaitlyn2004

Ils sont réductibles en fonction de leurs noms de classe et / ou id. Si vous localisez le CSS / JS, vous pouvez ajouter des ID / classe supplémentaires qui font la même chose.
justinavery du

Avez-vous une chance de donner un exemple? Je vois le plugin d'effondrement, mais je ne suis pas sûr de la mise en œuvre. au moins dans la barre de navigation, il semble être géré très automatiquement - ou du moins intégré au noyau du bootstrap
Kaitlyn2004

7
Déconseillé depuis Bootstrap 3.
Gereltod

1
Veuillez informer que c'est uniquement pour #Bootstrap 2
Lucas Bustamante

19

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/


Incorrect hidden-xs-blockn'est pas valide, mais l' visible-xs-blockest
Hammad Khan

@hmd: Pouvez-vous fournir une source / citation pour votre commentaire, que je ne comprends même pas complètement car ce n'est même pas une phrase complète. Qu'essayez-vous exactement de partager? Êtes-vous en train de dire que seul hidden-xs-block n'est pas valide ou dites-vous que hidden-xs- * n'est pas valide? Êtes-vous en train de dire que hidden-md-block est valide alors que hidden-xs-block ne l'est pas? Veuillez développer en particulier car il semble que vous ayez rétrogradé mon commentaire alors que j'avais en fait copié le verbiage directement à partir de la documentation en ligne de bootstrap. À quelle version de bootstrap vous référez-vous dans votre commentaire?
Jazimov

2
ok, il peut y avoir des changements dans le bootstrap. Regardez simplement la réponse la plus votée qui fournit la solution correcte. Avec l'élément caché, vous ne pouvez PAS utiliser bloc, en ligne et bloc en ligne. Avec visible, vous DEVEZ l'utiliser. Je pense que j'utilise bootstrap 3.x. Essayez simplement votre solution pour un élément qui se cache sur le téléphone :)
Hammad Khan

2

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>

1
classes cachées- * ont été abandonnées dans la bêta de bootstrap 4, vous utilisez maintenant d- {sm, md, lg, xl} -none
Chris M

Merci! Juste au cas où, ma réponse est toujours valable pour les non-bêtas
Gediminas

2

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


il est triste même si cela ne fonctionne pas normalement avec basculeur d'effondrement
David Constantine

0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.