¿Ocultar elementos en un diseño receptivo?

298

Mirando a través de bootstrap, parece que admiten el colapso de los elementos de la barra de menú para pantallas más pequeñas. ¿Hay algo similar para otros elementos en la página?

Por ejemplo, tengo junto con las píldoras de navegación flotando a la derecha. En una pantalla pequeña esto causa problemas. Al menos me encantaría ponerlo en un menú desplegable similar para hacer clic para mostrar más.

¿Es esto posible dentro del marco Bootstrap existente?

Kaitlyn2004
fuente

Respuestas:

649

Nuevas clases visibles agregadas a Bootstrap

Dispositivos extra pequeños Teléfonos (<768px)(Class names : .visible-xs-block, hidden-xs)

Tabletas de dispositivos pequeños (≥768px)(Class names : .visible-sm-block, hidden-sm)

Dispositivos medianos Computadoras de escritorio (≥992px)(Class names : .visible-md-block, hidden-md)

Dispositivos grandes Escritorios de escritorio (≥1200px)(Class names : .visible-lg-block, hidden-lg)

Para más información: http://getbootstrap.com/css/#responsive-utilities


A continuación está en desuso a partir de v3.2.0


Dispositivos extra pequeños Teléfonos (<768px) (Class names : .visible-xs, hidden-xs)

Tabletas de dispositivos pequeños (≥768px) (Class names : .visible-sm, hidden-sm)

Dispositivos medianos Computadoras de escritorio (≥992px) (Class names : .visible-md, hidden-md)

Dispositivos grandes Escritorios de escritorio (≥1200px) (Class names : .visible-lg, hidden-lg)


Bootstrap mucho más viejo


.hidden-phone, .hidden-tablet etc. no son compatibles / obsoletos.

ACTUALIZAR:

En Bootstrap 4 hay 2 tipos de clases:

  • El hidden-*-upcual oculta el elemento cuando la ventana está en el punto de interrupción dado o más ancho.
  • hidden-*-down que ocultan el elemento cuando la ventana está en el punto de interrupción dado o más pequeño.

Además, la nueva xlventana gráfica se agrega para dispositivos que tienen más de 1200px de ancho. Para más información haga clic aquí .

Marc Uberstein
fuente
2
No creo .hidden-phoney .hidden-tabletestán DEPRECATED ** - ** están sin apoyo . Desaprobado tiende a significar "ha sido reemplazado por otros enfoques, aunque todavía se admite que se eliminen pronto" . Este parece ser el caso con Bootstrap 3.2.0, .visible-xsy similares siguen funcionando por ahora, mientras que los .hidden-phoneamigos están completamente ausentes de la funcionalidad de Bootstrap.
Slipp D. Thompson
2
Gracias. He actualizado la respuesta a la redacción correcta. Debería ser un poco más claro para otros usuarios ahora.
Marc Uberstein el
2
Para su información, investigé un poco más; parece que "obsoleto" se usa comúnmente en contextos formales ya que el estado de falta de apoyo sigue a la depreciación. Creo que "sin soporte" funciona igual de bien, pero lo que sea. Gracias por considerar mi sugerencia anterior.
Slipp D. Thompson
1
:) He agregado ambos ... por el bien de los laicos. Gracias por investigar un poco más sobre la redacción correcta, definitivamente lo tendré en cuenta para futuras publicaciones. aplausos
Marc Uberstein
2
Tenga en cuenta que la actualización de Bootstrap 4 es para bootstrap 4 alpha. En la versión de lanzamiento, debe usar las clases .d- -one y d- -block. getbootstrap.com/docs/4.0/migration/#responsive-utilities
Pieter De Bie
138

Bootstrap 4 Beta Respuesta:

d-block d-md-nonepara esconderse en dispositivos medianos, grandes y extra grandes .

d-none d-md-blockpara esconderse en dispositivos pequeños y extra pequeños .

ingrese la descripción de la imagen aquí

Tenga en cuenta que también puede alinearse reemplazando d-*-blockcond-*-inline-block


Respuesta anterior: Bootstrap 4 Alpha

  • Puedes usar las clases .hidden-*-uppara esconderte en un tamaño dado y en dispositivos más grandes

    .hidden-md-uppara esconderse en dispositivos medianos, grandes y extra grandes .

  • Lo mismo ocurre con .hidden-*-downocultar en un tamaño determinado y dispositivos más pequeños

    .hidden-md-downpara esconderse en dispositivos medianos, pequeños y extra pequeños

  • visible- * ya no es una opción con bootstrap 4

  • Para mostrar solo en dispositivos medianos , puede combinar los dos:

    hidden-sm-down y hidden-xl-up

Los tamaños válidos son:

  • xs para teléfonos en modo vertical (<34em)
  • sm para teléfonos en modo horizontal (≥34em)
  • md para tabletas (≥48em)
  • lg para escritorios (≥62em)
  • xl para escritorios (≥75em)

Esto fue a partir de Bootstrap 4, alpha 5 (enero de 2017). Más detalles aquí: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

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

Julien
fuente
8
Estos fueron eliminados de v4 beta. Ahora usa las .d-clases para esconderse o mostrar en diferentes tamaños. getbootstrap.com/docs/4.0/utilities/display
DriverDan
1
Lo vi, pero todavía estoy tratando de resolver esto ... ¿Cómo puedo ocultar algo en una pantalla pequeña solo ahora? Necesito lo contrario de d-md-none, ya que cambio a div dependiendo de la pantalla grande frente a la pequeña.
Leo Muller
@LeoMuller Si desea que un elemento se oculte en tamaño sm e inferior, pero visible en md, lg y xl, use d-none d-md-block. code.luasoftware.com/tutorials/bootstrap/…
Desmond Lua
@DesmondLua Pienso lo mismo que LeoMuller ... en BS4 algunos elementos se comportan como bloques y otros como flexibles ... ¿por qué debo saber previamente sobre la naturaleza BS4 de un elemento solo si deseo ocultarlo en los teléfonos pero yo desea mostrarlo como estándar BS4 en tabletas y computadoras portátiles? Es contrario a lo que normalmente piensas ... Espero que BS4 Team arregle esto antes del lanzamiento final
JavierFuentes
No puedo encontrar la documentación sobre d-block en la documentación actual de Bootstrap 4, ¿eliminaron esto?
Mojimi
32

Bootstrap 4.x respuesta

hidden-* las clases se eliminan de Bootstrap 4 beta en adelante.

Si desea mostrar en medios y superiores, use las d-*clases, por ejemplo:

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

Si desea mostrar solo en pequeño y debajo, use esto:

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

Tamaño de pantalla y gráfico de clase

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

En lugar de usar .visible-*clases explícitas , hace que un elemento sea visible simplemente no ocultándolo en ese tamaño de pantalla. Puede combinar una .d-*-noneclase con una .d-*-blockclase para mostrar un elemento solo en un intervalo dado de tamaños de pantalla (por ejemplo, .d-none.d-md-block.d-xl-none muestra el elemento solo en dispositivos medianos y grandes).

Documentación

kiranvj
fuente
23

Puede ingresar estos sufijos de clase de módulo para cualquier módulo para controlar mejor dónde se mostrará u ocultará.

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

http://twitter.github.com/bootstrap/scaffolding.html desplazarse hacia abajo

John Taylor
fuente
Gracias. De hecho, quiero que sean visibles ... solo en una forma condensada / colapsada como el colapso de la barra de navegación que es exclusivamente para la barra de navegación y no veo otro soporte para otros elementos ...
Kaitlyn2004
Son plegables en función de sus nombres de clase y / o id. Si localiza el CSS / JS, entonces podría agregar clases / identificadores adicionales que hagan lo mismo.
justinavery
¿Alguna posibilidad de que puedas dar un ejemplo? Veo el complemento colapsar, pero no estoy seguro acerca de la implementación. al menos dentro de la barra de navegación parece que se maneja de manera muy automática, o al menos integrado en el núcleo de bootstrap
Kaitlyn2004
77
En desuso desde Bootstrap 3.
Gereltod
1
Informe que es solo para #Bootstrap 2
Lucas Bustamante el
19

Tengo un par de aclaraciones para agregar aquí:

1) La lista que se muestra (teléfono visible, tableta visible, etc.) está en desuso en Bootstrap 3. Los nuevos valores son:

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

El asterisco se traduce en lo siguiente para cada uno (solo muestro visible-xs- * a continuación):

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

2) Cuando usa estas clases, no agrega un punto al frente (como se muestra confusamente en parte de la respuesta anterior).

Por ejemplo:

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

3) Puede usar visible- * y hidden- * (por ejemplo, visible-xs y hidden-xs) pero estos han quedado en desuso en Bootstrap 3.2.0.

Para obtener más detalles y las últimas especificaciones, vaya aquí y busque "visible": http://getbootstrap.com/css/

Jazimov
fuente
Incorrecto hidden-xs-blockno es válido, pero lo visible-xs-blockes
Hammad Khan
@hmd: ¿Puede proporcionar una fuente / cita para su comentario, que ni siquiera entiendo completamente porque ni siquiera es una oración completa? ¿Qué es exactamente lo que intentas compartir? ¿Estás diciendo que solo el bloque hidden-xs no es válido o estás diciendo que hidden-xs- * no es válido? ¿Estás diciendo que hidden-md-block es válido mientras que hidden-xs-block no lo es? Por favor, explique especialmente porque parece que rechazó mi comentario cuando, de hecho, había copiado el verborrea directamente de la documentación en línea de bootstrap. ¿A qué versión de bootstrap se refiere en su comentario?
Jazimov
2
ok, puede haber algunos cambios en bootstrap. Solo mire la respuesta más votada que proporciona la solución correcta. Con el elemento oculto, NO puede usar bloque, en línea y bloque en línea. Con visible, tienes que usarlo. Creo que estoy usando Bootstrap 3.x. Simplemente pruebe su solución para un elemento que se oculta en el teléfono :)
Hammad Khan
2

Todo hidden-*-up, las hidden-*clases no funcionan para mí, por lo que estoy agregando una hiddenclase hecha a sí misma antes visible-*(que funciona para la versión de arranque actual). Es muy útil si necesita mostrar div solo para una pantalla y ocultar para todas las demás.

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>
Gediminas
fuente
1
hidden- * las clases se eliminaron en bootstrap 4 beta, ahora usa d- {sm, md, lg, xl} -none
Chris M
¡Gracias! Por si acaso, mi respuesta sigue siendo válida para los no-betas
Gediminas
2

Para Bootstrap 4.0 beta (y supongo que esto se mantendrá para el final) hay un cambio: tenga en cuenta que se eliminaron las clases ocultas.

Ver los documentos: https://getbootstrap.com/docs/4.0/utilities/display/

Para ocultar el contenido en el dispositivo móvil y mostrarlo en los dispositivos más grandes, debe usar las siguientes clases:

d-none d-sm-block

El conjunto de primera clase no muestra ninguno en todos los dispositivos y el segundo lo muestra para dispositivos "sm" (puede usar md, lg, etc. en lugar de sm si desea mostrar en diferentes dispositivos).

Sugiero leer sobre eso antes de la migración:

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

Przemek Nowak
fuente
es triste, aunque no funciona normalmente con el alternador de colapso
David Constantine
0

En boostrap 4.1 (ejecute el fragmento porque copié el código de la tabla completa de la documentación de 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

Tai Ly
fuente