Mostrar propiedad
Alterne de manera rápida y receptiva el valor de visualización de los componentes y más con nuestras utilidades de visualización. Incluye soporte para algunos de los valores más comunes, así como algunos extras para controlar la visualización al imprimir.
Cómo funciona
Cambie el valor de la display
propiedad con nuestras clases de utilidad de visualización receptiva. Admitimos deliberadamente solo un subconjunto de todos los valores posibles para display
. Las clases se pueden combinar para varios efectos según lo necesite.
Notación
Las clases de utilidad de visualización que se aplican a todos los puntos de interrupción , de xs
a xxl
, no tienen abreviatura de punto de interrupción en ellas. Esto se debe a que esas clases se aplican desde min-width: 0;
y hacia arriba y, por lo tanto, no están vinculadas a una consulta de medios. Sin embargo, los puntos de interrupción restantes sí incluyen una abreviatura de punto de interrupción.
Como tal, las clases se nombran usando el formato:
.d-{value}
porxs
.d-{breakpoint}-{value}
parasm
,md
,lg
,xl
yxxl
.
Donde el valor es uno de:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Los valores de visualización se pueden modificar cambiando la $displays
variable y recompilando el SCSS.
Las consultas de medios afectan los anchos de pantalla con el punto de interrupción dado o más grande . Por ejemplo, .d-lg-none
conjuntos display: none;
en lg
, xl
y xxl
pantallas.
Ejemplos
<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 desarrollo optimizado para dispositivos móviles más rápido, use clases de visualización receptivas para mostrar y ocultar elementos por dispositivo. Evite crear versiones completamente diferentes del mismo sitio; en su lugar, oculte los elementos de forma que respondan a cada tamaño de pantalla.
Para ocultar elementos, simplemente use la .d-none
clase o una de las .d-{sm,md,lg,xl,xxl}-none
clases para cualquier variación de pantalla receptiva.
Para mostrar un elemento solo en un intervalo dado de tamaños de pantalla, puede combinar una .d-*-none
clase con una .d-*-*
clase, por ejemplo .d-none .d-md-block .d-xl-none .d-xxl-none
, ocultará el elemento para todos los tamaños de pantalla, excepto en dispositivos medianos y grandes.
Tamaño de pantalla | Clase |
---|---|
Oculto en todo | .d-none |
Oculto solo en xs | .d-none .d-sm-block |
Oculto solo en sm | .d-sm-none .d-md-block |
Oculto solo en md | .d-md-none .d-lg-block |
Oculto solo en lg | .d-lg-none .d-xl-block |
Oculto solo en xl | .d-xl-none .d-xxl-block |
Oculto solo en xxl | .d-xxl-none |
Visible en todos | .d-block |
Visible solo en xs | .d-block .d-sm-none |
Visible solo en sm | .d-none .d-sm-block .d-md-none |
Visible solo en md | .d-none .d-md-block .d-lg-none |
Visible solo en lg | .d-none .d-lg-block .d-xl-none |
Visible solo en xl | .d-none .d-xl-block .d-xxl-none |
Visible solo 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>
Mostrar en la impresión
Cambie el display
valor de los elementos al imprimir con nuestras clases de utilidad de visualización de impresión. Incluye soporte para los mismos display
valores que nuestras .d-*
utilidades receptivas.
.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
Las clases de impresión y visualización se pueden 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>
Hablar con descaro a
API de utilidades
Las utilidades de visualización se declaran en nuestra API de utilidades en formato scss/_utilities.scss
. Aprenda a usar la 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
),