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.

Nesta páxina

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 xxl, 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, lg, xle xxl.

Onde o valor é un de:

none
inline
inline-block
block
grid
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-noneconfigura display: none;as pantallas lg, xl, e xxl.

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 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,xxl}-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 .d-xxl-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 .d-xxl-block`
Oculto só en xxl	`.d-xxl-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 .d-xxl-none`
Visible só en xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

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

Sass

API de utilidades

As utilidades de visualización decláranse na nosa API de utilidades en scss/_utilities.scss. Aprende a usar a API de utilidades.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),