Propiedad display
Alterna de manera rápida y responsive 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.
Cambiar el valor de display
(propiedad) con nuestras clases de utilidad de visualización responsive. Admitimos deliberadamente solo
un subconjunto de todos los valores posibles para display
. Las clases se pueden combinar para
obtener varios efectos según sea necesario.
Notación
Mostrar clases de utilidad que se aplican a todos los puntos de
interrupción, desde xs
a xxl
, no tienen abreviaturas de punto de interrupción.
Esto se debe a que esas clases se aplican desde min-width: 0;
en adelante y, por lo tanto, no
están vinculadas a una media query. Los puntos de interrupción restantes, sin embargo, incluyen una
abreviatura de punto de interrupción.
Como tal, las clases se nombran usando el formato:
.d-{value}
paraxs
.d-{breakpoint}-{value}
parasm
,md
,lg
,xl
yxxl
.
Donde valor es uno de:
none
inline
inline-block
block
grid
inline-grid
table
table-cell
table-row
flex
inline-flex
Los valores de visualización se pueden modificar cambiando los valores de display
definidos en
$utilities
y recompilando el SCSS.
Las media queries afectan los anchos de pantalla con el punto de interrupción dado o mayor. Por
ejemplo, .d-lg-none
establece display: none;
en pantallas lg
,
xl
y xxl
.
Ejemplos
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>
Ocultar elementos
Para un desarrollo más rápido y compatible con dispositivos móviles, usa clases de visualización responsive para mostrar y ocultar elementos por dispositivo. Evita crear versiones completamente diferentes del mismo sitio; en su lugar, oculta elementos de manera responsive para cada tamaño de pantalla.
Para ocultar elementos simplemente usa la clase .d-none
o una de las clases
.d-{sm,md,lg,xl,xxl}-none
para cualquier variación de pantalla responsive.
Para mostrar un elemento solo en un intervalo determinado de tamaños de pantalla, puedes combinar una clase
.d-*-none
con una clase clase .d-*-*
, 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 todos | .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 forma impresa
Cambia el valor display
de los elementos al imprimir con nuestras clases de utilidad de
visualización de impresión. Incluye soporte para los mismos valores display
que nuestras
utilidades responsive .d-*
.
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-inline-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
Las clases print y display 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>
CSS
API de utilidades de Sass
Las utilidades de visualización se declaran en nuestra API de utilidades en
scss/_utilities.scss
. Aprende a utilizar la API
de utilidades.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),