Propriedade de exibição

Como funciona

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.

Notação

As classes de utilitário de exibição que se aplicam a todos os pontos de interrupção , de xsa xxl, 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}para sm, md, lg, xle xxl.

Onde valor é um dos seguintes:

• none
• inline
• inline-block
• block
• grid
• table
• table-cell
• table-row
• flex
• inline-flex

Os valores de exibição podem ser alterados alterando os displayvalores definidos $utilitiese recompilando o SCSS.

As consultas de mídia afetam as larguras de tela com o ponto de interrupção determinado ou maior . Por exemplo, .d-lg-nonedefine display: none;em lg, xl, e xxltelas.

Exemplos

<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 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 elementos de forma responsiva para cada tamanho de tela.

Para ocultar elementos basta usar a .d-noneclasse ou um dos.d-{sm,md,lg,xl,xxl}-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-*-noneclasse com uma .d-*-*classe, por exemplo .d-none .d-md-block .d-xl-none .d-xxl-none, ocultará o elemento para todos os tamanhos de tela, exceto em dispositivos médios e grandes.

<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>

Exibir na impressão

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-grid
• .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>

Sass

API de utilitários

Os utilitários de exibição são declarados em nossa API de utilitários em scss/_utilities.scss. Saiba como usar a API de utilitários.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),