Propriedade de exibição
Alterne de forma rápida e responsiva o valor de exibição dos componentes e muito mais com nossos utilitários de exibição. Inclui suporte para alguns dos valores mais comuns, bem como alguns extras para controlar a exibição durante a impressão.
Altere o valor da display
propriedade com nossas classes de utilitário de exibição responsivo. Propositadamente suportamos apenas um subconjunto de todos os valores possíveis para display
. As classes podem ser combinadas para vários efeitos, conforme necessário.
As classes de utilitário de exibição que se aplicam a todos os pontos de interrupção , de xs
a xl
, não possuem abreviação de ponto de interrupção. Isso ocorre porque essas classes são aplicadas de min-width: 0;
e para cima e, portanto, não são vinculadas a uma consulta de mídia. Os pontos de interrupção restantes, no entanto, incluem uma abreviação de ponto de interrupção.
Como tal, as classes são nomeadas usando o formato:
.d-{value}
porxs
.d-{breakpoint}-{value}
parasm
,md
,lg
exl
.
Onde valor é um dos seguintes:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
As consultas de mídia afetam as larguras de tela com o ponto de interrupção fornecido ou maior . Por exemplo, .d-lg-none
define display: none;
em ambas as telas lg
e .xl
<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 um desenvolvimento mais rápido e otimizado para dispositivos móveis, use classes de exibição responsivas para mostrar e ocultar elementos por dispositivo. Evite criar versões totalmente diferentes do mesmo site, em vez disso, oculte o elemento de forma responsiva para cada tamanho de tela.
Para ocultar elementos, basta usar a .d-none
classe ou uma das .d-{sm,md,lg,xl}-none
classes para qualquer variação de tela responsiva.
Para mostrar um elemento apenas em um determinado intervalo de tamanhos de tela, você pode combinar uma .d-*-none
classe com uma .d-*-*
classe, por exemplo .d-none .d-md-block .d-xl-none
, ocultará o elemento para todos os tamanhos de tela, exceto em dispositivos médios e grandes.
Tamanho da tela | Classe |
---|---|
Escondido em todos | .d-none |
Oculto apenas em xs | .d-none .d-sm-block |
Escondido apenas em sm | .d-sm-none .d-md-block |
Escondido apenas em md | .d-md-none .d-lg-block |
Escondido apenas na lg | .d-lg-none .d-xl-block |
Escondido apenas em xl | .d-xl-none |
Visível em todos | .d-block |
Visível apenas em xs | .d-block .d-sm-none |
Visível apenas em sm | .d-none .d-sm-block .d-md-none |
Visível apenas em md | .d-none .d-md-block .d-lg-none |
Visível apenas em lg | .d-none .d-lg-block .d-xl-none |
Visível apenas em 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>
Altere o display
valor dos elementos ao imprimir com nossas classes de utilitário de exibição de impressão. Inclui suporte para os mesmos display
valores que nossos .d-*
utilitários responsivos.
.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 classes de impressão e exibição podem ser combinadas.
<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>