Source

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