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 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.
Cualificación
Mostrar as clases de utilidade que se aplican a todos os puntos de interrupción , de xs
a 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}
parasm
,md
,lg
,xl
exxl
.
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 $displays
variable e recompilando o SCSS.
As consultas multimedia afectan ao ancho da pantalla co punto de interrupción indicado ou superior . Por exemplo, .d-lg-none
configura display: none;
as pantallas lg
, xl
, e xxl
.
Exemplos
<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>
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-none
clase ou unha das .d-{sm,md,lg,xl,xxl}-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 .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 |
<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 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-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.
<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
),