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}persm,md,lg, exl.
Dove il valore è uno di:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-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-noneset display: none;su entrambi gli schermi lge .xl
Esempi
<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><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}-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 |
<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-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.
<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>