Este artículo es un artículo espejo de traducción automática, por favor haga clic aquí para saltar al artículo original.

Architect_Programmer_Code Red Agrícola»Arquitecto › Diseño front-end y web › Bastidor frontal › Cómo mostrar y ocultar elementos usando Bootstrap4
Vista: 12583|Respuesta: 0

[Bootstrap] Cómo mostrar y ocultar elementos usando Bootstrap4

[Copiar enlace]
Publicado en 4/4/2019 10:46:25 | | | |
Cómo mostrar y ocultar elementos usando Bootstrap4

Para un desarrollo más rápido de dispositivos móviles, utiliza clases de pantalla responsivas para mostrar y ocultar elementos por dispositivo. Evita crear versiones completamente diferentes del mismo sitio, pero oculta los elementos para cada tamaño de pantalla en consecuencia.

Para ocultar elementos, simplemente usa.d-ningunaClase o alguna de ellas.d-{sm,md,lg,xl}-ningunapara hacer cualquier cambio de pantalla sensible.

Para mostrar elementos solo en un intervalo de tamaño de pantalla determinado, puedes establecer uno.d-*-noneClase y uno.d-*-*las clases se agrupan, por ejemplo,.d-ninguno .d-md-bloque .d-xl-ningunoElementos de todos los tamaños de pantalla estarán ocultos, excepto para dispositivos medianos y grandes.

Representaciones:



Muestra/esconde para breakpoint y down:

  • Hidden-xs-down (hidden-xs) = d-ninguno d-sm-block
  • Hidden-sm-down (Hidden-SM-hidden-xs) = d-ninguno d-md-bloque
  • Hidden-MD-Down (Hidden-MD Hidden-SM Hidden-Xs) = D-Ninguno D-Lg-Block
  • Hidden-LG-down = d-ninguno d-xl-bloque
  • hidden-xl-down (n/a 3.x) = d-ninguno (igual que oculto)


Muestra/escóndete para puntos de ruptura en adelante:

  • Hidden-xs-up = D-None (igual que Hidden)
  • Hidden-sm-up = d-sm-ninguna
  • Hidden-md-up = d-md-ninguna
  • Hidden-lg-up = d-lg-ninguno
  • Hidden-XL-Up (N/D 3.x) = D-XL-Ninguno


Muéstra/oculta solo un punto de ruptura:

  • Hidden-xs (solo) = d-ninguno d-sm-block (igual que hidden-xs-down)
  • Oculto-SM (solo) = bloque D D-SM-ninguno D-bloque MD
  • Hidden-MD (solo) = bloque d-md-ninguno d-lg-bloque
  • Hidden-LG (solo) = bloque D d-lg-ninguno bloque D-XL
  • hidden-xl (n/a 3.x) = bloque d-d-xl-ninguno
  • visible-xs (solo) = bloque d-sm-ninguno
  • visible-SM (solo) = d-ninguno bloque d-sm d-md-ninguno
  • visible-md (solo) = d-ninguno d-md-bloque d-lg-none
  • visible-LG (solo) = d-ninguno d-lg-bloque d-xl-ninguno
  • visible-xl (n/a 3.x) = d-ninguno d-bloque xl


Visualización:



Enlaces de referencia:https://getbootstrap.com/docs/4.0/utilities/display/





Anterior:¿Qué cualidades debería tener un arquitecto de software?
Próximo:No se puede inyectar @Autowired en Listener

Publicaciones relacionadas
Renuncia:
Todo el software, materiales de programación o artículos publicados por Code Farmer Network son únicamente para fines de aprendizaje e investigación; El contenido anterior no se utilizará con fines comerciales o ilegales; de lo contrario, los usuarios asumirán todas las consecuencias. La información de este sitio proviene de Internet, y las disputas de derechos de autor no tienen nada que ver con este sitio. Debes eliminar completamente el contenido anterior de tu ordenador en un plazo de 24 horas desde la descarga. Si te gusta el programa, por favor apoya el software genuino, compra el registro y obtén mejores servicios genuinos. Si hay alguna infracción, por favor contáctanos por correo electrónico.
Mail To:help@itsvse.com