Mostra proprietà

Attiva o disattiva in modo rapido e reattivo il valore di visualizzazione dei componenti e altro ancora con le nostre utility di visualizzazione. Include il supporto per alcuni dei valori più comuni, nonché alcuni extra per il controllo della visualizzazione durante la stampa.

Su questa pagina

Come funziona

Modifica il valore della displayproprietà con le nostre classi di utilità di visualizzazione reattiva. Supportiamo di proposito solo un sottoinsieme di tutti i valori possibili per display. Le classi possono essere combinate per vari effetti di cui hai bisogno.

Notazione

Visualizza le classi di utilità che si applicano a tutti i punti di interruzione , da xsa xxl, non contengono abbreviazioni di punti di interruzione. Questo perché quelle classi vengono applicate da min-width: 0;e verso l'alto e quindi non sono vincolate da una query multimediale. I restanti punti di interruzione, tuttavia, includono un'abbreviazione di punto di interruzione.

Pertanto, le classi sono denominate utilizzando il formato:

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

Dove il valore è uno di:

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

I valori visualizzati possono essere modificati modificando la $displaysvariabile e ricompilando l'SCSS.

Le media query influiscono sulla larghezza dello schermo con il punto di interruzione specificato o maggiore . Ad esempio, .d-lg-noneimposta display: none;su lg, xl, e xxlschermate.

Esempi

d-in linea

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

blocco D blocco D

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

Nascondere gli elementi

Per uno sviluppo più rapido e ottimizzato per i dispositivi mobili, utilizza classi di visualizzazione reattive per mostrare e nascondere elementi in base al dispositivo. Evita di creare versioni completamente diverse dello stesso sito, invece nascondi gli elementi in modo reattivo per ogni dimensione dello schermo.

Per nascondere gli elementi, usa semplicemente la .d-noneclasse o una delle .d-{sm,md,lg,xl,xxl}-noneclassi per qualsiasi variazione dello schermo reattivo.

Per mostrare un elemento solo su un determinato intervallo di dimensioni dello schermo puoi combinare una .d-*-noneclasse con una .d-*-*classe, ad esempio .d-none .d-md-block .d-xl-none .d-xxl-nonenasconderà l'elemento per tutte le dimensioni dello schermo tranne che su dispositivi di medie e grandi dimensioni.

Dimensione dello schermo	Classe
Nascosto a tutti	`.d-none`
Nascosto solo su xs	`.d-none .d-sm-block`
Nascosto solo su sm	`.d-sm-none .d-md-block`
Nascosto solo su md	`.d-md-none .d-lg-block`
Nascosto solo su lg	`.d-lg-none .d-xl-block`
Nascosto solo su xl	`.d-xl-none .d-xxl-block`
Nascosto solo su xxl	`.d-xxl-none`
Visibile a tutti	`.d-block`
Visibile solo su xs	`.d-block .d-sm-none`
Visibile solo su sm	`.d-none .d-sm-block .d-md-none`
Visibile solo su md	`.d-none .d-md-block .d-lg-none`
Visibile solo su lg	`.d-none .d-lg-block .d-xl-none`
Visibile solo su XL	`.d-none .d-xl-block .d-xxl-none`
Visibile solo su xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

nascondi su schermi più piccoli di 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>

Visualizza in stampa

Modifica il displayvalore degli elementi durante la stampa con le nostre classi di utilità di visualizzazione della stampa. Include il supporto per gli stessi displayvalori delle nostre .d-*utility reattive.

.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

Le classi di stampa e visualizzazione possono essere combinate.

Solo schermo (Nascondi solo su stampa)

Print Only (Hide on screen only)

Nascondi fino al massimo sullo schermo, ma mostra sempre sulla stampa

<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 di utilità

Le utilità di visualizzazione sono dichiarate nella nostra API delle utilità in scss/_utilities.scss. Scopri come utilizzare l'API delle utilità.

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