Propiedade de visualización

Cambia de forma rápida e sensible o valor de visualización dos compoñentes e moito máis coas nosas utilidades de visualización. Inclúe soporte para algúns dos valores máis comúns, así como algúns extras para controlar a visualización ao imprimir.

Cómo funciona

Cambia o valor da displaypropiedade coas nosas clases de utilidade de visualización sensible. Admitimos a propósito só un subconxunto de todos os valores posibles para display. As clases pódense combinar para varios efectos segundo o necesites.

Cualificación

Mostrar as clases de utilidade que se aplican a todos os puntos de interrupción , de xsa xl, non teñen ningunha abreviatura de punto de interrupción. Isto débese a que esas clases aplícanse desde min-width: 0;e cara arriba e, polo tanto, non están vinculadas a unha consulta de medios. Os puntos de interrupción restantes, con todo, inclúen unha abreviatura de punto de interrupción.

Polo tanto, as clases son nomeadas co formato:

.d-{value}paraxs
.d-{breakpoint}-{value}para sm, md, lge xl.

Onde o valor é un de:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

As consultas multimedia afectan ao ancho da pantalla co punto de interrupción indicado ou superior . Por exemplo, .d-lg-noneconxuntos display: none;en ambos lge xlpantallas.

Exemplos

d-en liña

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

bloque d bloque d

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

Ocultar elementos

Para un desenvolvemento máis rápido para móbiles, usa clases de visualización sensibles para mostrar e ocultar elementos por dispositivo. Evite crear versións completamente diferentes do mesmo sitio, en lugar de ocultar o elemento de forma sensible para cada tamaño de pantalla.

Para ocultar elementos simplemente use a .d-noneclase ou unha das .d-{sm,md,lg,xl}-noneclases para calquera variación de pantalla sensible.

Para mostrar un elemento só nun intervalo determinado de tamaños de pantalla, pode combinar unha .d-*-noneclase cunha .d-*-*clase, por exemplo .d-none .d-md-block .d-xl-none, ocultará o elemento para todos os tamaños de pantalla excepto en dispositivos medianos e grandes.

Tamaño da pantalla	Clase
Oculto en todo	`.d-none`
Oculto só en xs	`.d-none .d-sm-block`
Oculto só en sm	`.d-sm-none .d-md-block`
Oculto só en md	`.d-md-none .d-lg-block`
Oculto só en lg	`.d-lg-none .d-xl-block`
Oculto só en xl	`.d-xl-none`
Visible en todos	`.d-block`
Visible só en xs	`.d-block .d-sm-none`
Visible só en sm	`.d-none .d-sm-block .d-md-none`
Visible só en md	`.d-none .d-md-block .d-lg-none`
Visible só en lg	`.d-none .d-lg-block .d-xl-none`
Visible só en xl	`.d-none .d-xl-block`

hide on screens wider than lg

ocultar en pantallas máis pequenas que lg

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

Visualización impresa

Cambia o displayvalor dos elementos ao imprimir coas nosas clases de utilidade de visualización de impresión. Inclúe compatibilidade cos mesmos valores que as nosas utilidades displaysensibles ..d-*

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

As clases de impresión e exhibición pódense combinar.

Só pantalla (Ocultar só na impresión)

Print Only (Hide on screen only)

Oculta ata grande na pantalla, pero móstrase sempre na impresión

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>