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 displaypropriedade 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 xsa 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,lgexl.
Onde valor é um dos seguintes:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
As consultas de mídia afetam as larguras de tela com o ponto de interrupção fornecido ou maior . Por exemplo, .d-lg-nonedefine display: none;em ambas as telas lge .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-noneclasse ou uma das .d-{sm,md,lg,xl}-noneclasses 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-*-noneclasse 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 displayvalor dos elementos ao imprimir com nossas classes de utilitário de exibição de impressão. Inclui suporte para os mesmos displayvalores 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>