Source

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.

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 xl, 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, e xl.

Dove il valore è uno di:

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

Le query multimediali influiscono sulla larghezza dello schermo con il punto di interruzione specificato o maggiore . Ad esempio, .d-lg-noneimposta display: none;su entrambi gli schermi lge .xl

Esempi

d-in linea
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 l'elemento 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}-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-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
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
hide on screens wider than lg
nascondi su schermi più piccoli di lg
<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>

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