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.
Cambia o valor da display
propiedade 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.
Mostrar as clases de utilidade que se aplican a todos os puntos de interrupción , de xs
a 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}
parasm
,md
,lg
exl
.
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-none
conxuntos display: none;
en ambos lg
e xl
pantallas.
<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>
<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>
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-none
clase ou unha das .d-{sm,md,lg,xl}-none
clases para calquera variación de pantalla sensible.
Para mostrar un elemento só nun intervalo determinado de tamaños de pantalla, pode combinar unha .d-*-none
clase 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 |
<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>
Cambia o display
valor 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 display
sensibles ..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.
<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>