in English

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

Os valores de visualización pódense modificar cambiando a $displaysvariable e recompilando o SCSS.

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 os elementos 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
ocultar en pantallas lg e máis anchas
ocultar en pantallas máis pequenas que lg
<div class="d-lg-none">hide on lg and wider screens</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)
Só imprimir (Ocultar só na pantalla)
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>