in English

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.

Nesta página

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 a $displaysvariável e 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

d-inline

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

d-bloco d-bloco

<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 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 uma das .d-{sm,md,lg,xl,xxl}-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 .d-xxl-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 .d-xxl-block`
Oculto apenas em xxl	`.d-xxl-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 .d-xxl-none`
Visível apenas em xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

esconder em telas menores que lg

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

Somente tela (ocultar somente na impressão)

Print Only (Hide on screen only)

Ocultar até grande na tela, mas sempre mostrar na impressão

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