Pruprietà di visualizazione

Cambia rapidamente è responsively u valore di visualizazione di cumpunenti è più cù i nostri utilità di visualizazione. Include supportu per alcuni di i valori più cumuni, è ancu alcuni extra per cuntrullà a visualizazione durante a stampa.

In sta pagina

Cumu travaglia

Cambia u valore di a displaypruprietà cù e nostre classi di utilità di visualizazione rispunsevuli. Sustenemu apposta solu un subset di tutti i valori pussibuli per display. E classi ponu esse cumminati per parechji effetti cum'è avete bisognu.

Notazione

Mostra e classi di utilità chì si applicanu à tutti i punti di rottura , da xsà xxl, ùn anu micca abbreviazione di breakpoint in elli. Questu hè perchè queste classi sò applicate da min-width: 0;è in su, è cusì ùn sò micca ligati da una media query. I punti di breakpoint restanti, però, includenu un'abbreviazione di breakpoint.

Comu tali, e classi sò chjamati cù u formatu:

.d-{value}perxs
.d-{breakpoint}-{value}per sm, md, lg, xl, è xxl.

Induve u valore hè unu di:

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

I valori di visualizazione ponu esse alterati cambiendu i displayvalori definiti $utilitiesè recompilendu u SCSS.

E dumande di media affettanu a larghezza di u screnu cù u puntu d'interruzzione datu o più grande . Per esempiu, .d-lg-nonemette display: none;nantu à lg, xl, è xxlschermi.

Esempii

d-in linea

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-bloccu d-bloccu

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Elementi nascosti

Per un sviluppu più veloce per u telefuninu, aduprate classi di visualizazione responsive per mostrà è nasconde elementi per u dispositivu. Evitate di creà versioni completamente diverse di u stessu situ, invece oculte elementi rispunsevuli per ogni dimensione di u screnu.

Per ammuccià elementi simpricimenti utilizate a .d-noneclassa o una di e .d-{sm,md,lg,xl,xxl}-noneclassi per ogni variazione di schermu responsive.

Per mostrà un elementu solu nantu à un intervallu determinatu di dimensioni di schermu pudete cumminà una .d-*-noneclassa cù una .d-*-*classa, per esempiu .d-none .d-md-block .d-xl-none .d-xxl-none, ammuccià l'elementu per tutte e dimensioni di schermu eccettu in i dispositi mediu è grande.

Dimensione di u screnu	Classe
Ammucciatu nantu à tuttu	`.d-none`
Ammucciatu solu nantu à xs	`.d-none .d-sm-block`
Ammucciatu solu nantu à sm	`.d-sm-none .d-md-block`
Ammucciatu solu nantu à md	`.d-md-none .d-lg-block`
Ammucciatu solu nantu à lg	`.d-lg-none .d-xl-block`
Ammucciatu solu nantu à xl	`.d-xl-none`
Oculatu solu nantu à xxl	`.d-xxl-none .d-xxl-block`
Visibile nantu à tutti	`.d-block`
Visibile solu nantu à xs	`.d-block .d-sm-none`
Visibile solu nantu à sm	`.d-none .d-sm-block .d-md-none`
Visibile solu nantu à md	`.d-none .d-md-block .d-lg-none`
Visibile solu nantu à lg	`.d-none .d-lg-block .d-xl-none`
Visibile solu nantu à xl	`.d-none .d-xl-block .d-xxl-none`
Visibile solu nantu à xxl	`.d-none .d-xxl-block`

ammuccià nantu à schermi lg è più largu

ammuccià nantu à schermi più chjuchi di lg

html

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

Mostra in stampa

Cambia u displayvalore di l'elementi quandu stampate cù e nostre classi di utilità di visualizazione di stampa. Include supportu per i stessi displayvalori cum'è e nostre .d-*utilità responsive.

.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

E classi di stampa è di visualizazione ponu esse cumminate.

Solu schermu (Oculta solu nantu à stampa)

Stampa solu (Oculta solu nantu à u screnu)

Oculta finu à grande nantu à u screnu, ma sempre mostra in stampa

html

<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

Utilities API

L'utilità di visualizazione sò dichjarate in a nostra API d'utilità in scss/_utilities.scss. Amparate cumu utilizà l'API utilities.

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