twitter bootstrap - dinamicas - Falta visible-** y oculto-** en Bootstrap v4
bootstrap modal (8)
En Bootstrap v3, a menudo uso las clases ocultas ** combinadas con clearfix para controlar diseños de múltiples columnas en diferentes anchos de pantalla. Por ejemplo,
Podría combinar múltiples ocultos - ** en un DIV para hacer que mis múltiples columnas aparezcan correctamente en diferentes anchos de pantalla.
Como ejemplo, si quisiera mostrar filas de fotos de productos, 4 por fila en tamaños de pantalla más grandes, 3 en pantallas más pequeñas y luego 2 en pantallas muy pequeñas. Las fotos del producto pueden tener diferentes alturas, por lo que necesito el clearfix para asegurar que la fila se rompa correctamente.
Aquí hay un ejemplo en v3 ...
http://jsbin.com/tosebayode/edit?html,css,output
Ahora que v4 ha eliminado estas clases y las ha reemplazado con las clases visibles / ocultas - ** - arriba / abajo, parece que tengo que hacer lo mismo con múltiples DIV.
Aquí hay un ejemplo similar en v4 ...
http://jsbin.com/sagowihowa/edit?html,css,output
Así que pasé de DIV individuales a tener que agregar múltiples DIV con muchas clases arriba / abajo para lograr lo mismo.
De...
<div class="clearfix visible-xs-block visible-sm-block"></div>
a...
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>
¿Hay una mejor manera de hacer esto en v4 que he pasado por alto?
Bootstrap 4 para ocultar todo el contenido utiliza esta clase ''.d-none'' , se ocultará todo, independientemente de los puntos de interrupción, igual que la clase de versión de bootstrap anterior ''.hidden''
Bootstrap v4.1 usa nuevos nombres de clase para ocultar columnas en su sistema de cuadrícula.
Para ocultar columnas dependiendo del ancho de la pantalla, use la clase
d-none
o cualquiera de las clases
d-{sm,md,lg,xl}-none
.
Para mostrar columnas en ciertos tamaños de pantalla, combine las clases mencionadas anteriormente con las clases
d-block
o
d-{sm,md,lg,xl}-block
.
Ejemplos son:
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Más de estos here .
Desafortunadamente, estas nuevas clases de bootstrap 4 no funcionan como las antiguas en un div usando
collapse
ya que configuran el div visible para
block
que comienza visible en lugar de oculto y si agrega un div extra alrededor de la funcionalidad de
collapse
ya no funciona.
Desafortunadamente, todas las clases
hidden-*-up
y
hidden-*-down
se eliminaron de Bootstrap (a partir de Bootstrap Versión
4 Beta
, en la Versión
4 Alfa
y la Versión
3
estas clases todavía existían).
En su lugar, se deben usar nuevas clases
d-*
, como se menciona aquí:
https://getbootstrap.com/docs/4.0/migration/#utilities
Descubrí que el nuevo enfoque es menos útil en algunas circunstancias. El antiguo enfoque era OCULTAR elementos, mientras que el nuevo enfoque es MOSTRAR elementos. Mostrar elementos no es tan fácil con CSS, ya que necesita saber si el elemento se muestra como bloque, en línea, bloque en línea, tabla, etc.
Es posible que desee restaurar los antiguos estilos "hidden- *" conocidos de Bootstrap 3 con este CSS:
/*/
* Restore Bootstrap 3 "hidden" utility classes.
/*/
/* Breakpoint XS */
@media (max-width: 575px)
{
.hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up,
.hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
{
display: none !important;
}
}
/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
.hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up,
.hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
{
display: none !important;
}
}
/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
.hidden-md-down, .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up, .hidden-md-up,
.hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
{
display: none !important;
}
}
/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
.hidden-lg-down, .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up,
.hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
{
display: none !important;
}
}
/* Breakpoint XL */
@media (min-width: 1200px)
{
.hidden-xl-down,
.hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up,
.hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
{
display: none !important;
}
}
Las clases
hidden-unless-*
no se incluyeron en Bootstrap 3, pero también son útiles y deberían explicarse por sí mismas.
El usuario Klaro sugirió restaurar las antiguas clases de visibilidad, lo cual es una buena idea. Desafortunadamente, su solución no funcionó en mi proyecto.
Creo que es una mejor idea restaurar el antiguo mixin de bootstrap, ya que cubre todos los puntos de interrupción que el usuario puede definir individualmente.
Aquí está el código:
// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
.hidden-#{$bp}-up {
@include media-breakpoint-up($bp) {
display: none !important;
}
}
.hidden-#{$bp}-down {
@include media-breakpoint-down($bp) {
display: none !important;
}
}
.hidden-#{$bp}-only{
@include media-breakpoint-only($bp){
display:none !important;
}
}
}
En mi caso, he insertado esta parte en un archivo
_custom.scss
que se incluye en este punto en
bootstrap.scss
:
/*!
* Bootstrap v4.0.0-beta (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]
No espero que múltiples div''s sean una buena solución.
También creo que puede reemplazar
.visible-sm-block
con
.hidden-xs-down
y
.hidden-md-up
(o
.hidden-sm-down
y
.hidden-lg-up
para actuar en las mismas consultas de medios).
hidden-sm-up
compila en:
.visible-sm-block {
display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
.hidden-sm-down
y
.hidden-lg-up
compilan en:
@media (max-width: 768px) {
.hidden-xs-down {
display: none !important;
}
}
@media (min-width: 991px) {
.hidden-lg-up {
display: none !important;
}
}
Ambas situaciones deberían actuar igual.
Su situación se vuelve diferente cuando intenta reemplazar
.visible-sm-block
y
.visible-lg-block
.
Los documentos de Bootstrap v4 te dicen:
Estas clases no intentan acomodar casos menos comunes en los que la visibilidad de un elemento no puede expresarse como un único rango contiguo de tamaños de punto de corte de la vista; en su lugar, necesitará usar CSS personalizado en tales casos.
.visible-sm-and-lg {
display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-and-lg {
display: block !important;
}
}
@media (min-width: 1200px) {
.visible-sm-and-lg {
display: block !important;
}
}
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Ahora tiene que definir el tamaño de lo que se oculta como tal
.hidden-xs-down
Ocultará cualquier cosa de xs y más pequeñas, solo xs
.hidden-xs-up
Ocultará todo
Actualización para Bootstrap 4 (2018)
Las
hidden-*
y
hidden-*
ya no existen
en Bootstrap 4. Si desea ocultar un elemento en niveles o puntos de interrupción específicos en Bootstrap 4, use las
clases de visualización
d-*
consecuencia.
Recuerde que extra-small / mobile (anteriormente
xs
) es el punto de interrupción predeterminado (implícito), a menos que sea anulado por un punto de interrupción
más grande
.
Por lo tanto,
el infijo
-xs
ya no existe en Bootstrap 4
.
Mostrar / ocultar para punto de interrupción y abajo :
-
hidden-xs-down (hidden-xs)=d-none d-sm-block -
hidden-sm-down (hidden-sm hidden-xs)=d-none d-md-block -
hidden-md-down (hidden-md hidden-sm hidden-xs)=d-none d-lg-block -
hidden-lg-down=d-none d-xl-block -
hidden-xl-down(n / a 3.x) =d-none(igual quehidden)
Mostrar / ocultar para punto de interrupción y arriba :
-
hidden-xs-up=d-none(igual quehidden) -
hidden-sm-up=d-sm-none -
hidden-md-up=d-md-none -
hidden-lg-up=d-lg-none -
hidden-xl-up(n / a 3.x) =d-xl-none
Mostrar / ocultar solo para un único punto de interrupción :
-
hidden-xs(solo) =d-none d-sm-block(igual quehidden-xs-down) -
hidden-sm(solo) =d-block d-sm-none d-md-block -
hidden-md(solo) =d-block d-md-none d-lg-block -
hidden-lg(solo) =d-block d-lg-none d-xl-block -
hidden-xl(n / a 3.x) =d-block d-xl-none -
visible-xs(solo) =d-block d-sm-none -
visible-sm(solo) =d-none d-sm-block d-md-none -
visible-md(solo) =d-none d-md-block d-lg-none -
visible-lg(solo) =d-none d-lg-block d-xl-none -
visible-xl(n / a 3.x) =d-none d-xl-block
Demostración de las clases de visualización receptiva en Bootstrap 4
Además,
tenga en cuenta que el
d-*-block
se puede reemplazar con
d-*-inline
,
d-*-flex
,
d-*-table-cell
,
d-*-table
etc., según el tipo de visualización del elemento.
Lea más sobre las
clases de visualización