Bootstrap CSS Clase D-*-Ninguno

Bootstrap proporciona una amplia variedad de elementos y clases prediseñados. Los desarrolladores los usan para crear sitios web visualmente atractivos y receptivos rápidamente. Los sitios web receptivos hacen su diseño de acuerdo con el tamaño de la pantalla del dispositivo. Uno de ellos es el "D-*-ninguno"Clase, que se utiliza para ocultar elementos basados ​​en el tamaño de la pantalla.

Este artículo describirá la clase Bootstrap CSS "D-*-ninguno".

• ¿Qué es la clase Bootstrap CSS? "D-*-Ninguno"?
• Cómo ocultar elementos en una pantalla extra grande?
• Cómo ocultar elementos en una pantalla grande?
• Cómo ocultar elementos en la pantalla de tamaño mediano?
• Cómo ocultar elementos en una pantalla pequeña?

¿Qué es la clase Bootstrap CSS? "D-*-Ninguno"?

El "D-*-ninguno"La clase es una de las clases de utilidad receptivas de Bootstrap utilizadas para controlar la visibilidad del elemento en función del tamaño de la pantalla. El CSS "mostrar"La propiedad para estas clases de utilidad se establece en"ninguno.". El "d"Indica la propiedad" Pantalla "y"*"Simboliza los puntos de interrupción del tamaño de la pantalla, yo.mi., "XS","SG","Maryland", y "lg". El "ningunoAl final denota que el elemento se ocultará cuando se aplique esta clase.

Para ocultar el elemento en todas las pantallas, el "D-NONELa clase se utilizará. Implementemos las clases en las secciones a continuación para ver cómo funcionan.

Cómo ocultar elementos en una pantalla extra grande?

El "D-XL-NONELa clase se utiliza para ocultar los elementos en una pantalla extra grande. Esta clase tiene un CSS de consulta de medios predefinido "@Media (Min-Width: 1200px)", Lo que significa que esta clase se aplica a las pantallas que tienen un ancho mayor de 1200px.

Ejemplo

Consulte el ejemplo implementando las siguientes instrucciones:

• Primero, agregue un ""Elemento tiene"P-4" y "BG-Light"Clases.
• Dentro de esta etiqueta "", incluya el "

  "Y" "elementos para el encabezado y algún texto.

• Asigne el elemento ""tarjeta","blanco de texto","P-2","BG-Primary", y "D-XL-NONE"Clases.

Html

este es el principal divio

Muéstrame en el ancho de la pantalla menos de 1200px

Producción

Cómo ocultar elementos HTML en una pantalla grande?

El "D-LG-NONE"La clase oculta los componentes en la pantalla grande. Esta clase tiene un CSS de consulta de medios predefinido "@Media (Min-Width: 992px)", Lo que significa que esta clase se aplica a las pantallas que tienen un ancho mayor que 992px.

Ejemplo

En el ejemplo en curso, agregue el "D-LG-NONE"Clase al elemento" ".

Html

Muéstrame en el ancho de la pantalla menos de 992px

Ver, la propiedad "Pantalla: Ninguno" se ha aplicado correctamente hasta la pantalla en 992px:

Cómo ocultar elementos en la pantalla de tamaño mediano?

El "D-MD-NONE"La clase se puede usar para ocultar la visibilidad del elemento en la pantalla de tamaño mediano. Esta clase tiene un CSS de consulta de medios predefinido "@Media (Min-Width: 768px)"Lo que significa que esta clase se aplica a las pantallas que tienen un ancho superior a 768px.

Ejemplo

Agregue la clase "D-MD-None" al elemento "".

Html

Muéstrame en el ancho de la pantalla menos de 768px

Producción

Cómo ocultar elementos en una pantalla pequeña?

El "D-SM-NONE"La clase oculta la visibilidad del elemento en una pantalla pequeña. Esta clase tiene un CSS de consulta de medios predefinido "@Media (Min-Width: 576px)"Lo que significa que esta clase se aplica a las pantallas que tienen un ancho mayor que 576px.

Ejemplo

En el ejemplo en curso, agregue la clase "D-SM-None" al elemento "".

Html

Muéstrame en el ancho de la pantalla menos de 576px

Producción

Nota IMPORTANTE

El "D-*-ninguno"La clase se utiliza para ocultar solo los elementos. Otros elementos o diseños no se ven afectados. El elemento se elimina por completo del diseño cuando el CSS "mostrar" se establece en "ninguno".

Conclusión

El "D-*-ningunoLa clase se utiliza para ocultar la visibilidad del elemento en varios tamaños de pantalla. El asterisco "*"Denota el"lg","SG","sm", y "Maryland"Que indica las pantallas grandes, extra grandes, pequeñas y medianas. Más específicamente, el CSS "mostrar"Propiedad con el valor"ninguno"Se utiliza para eliminar el elemento del diseño. Este artículo ha descrito la clase Bootstrap "D-*-Ninguno" con ejemplos.