Pruprietà di visualizazione
Cambia rapidamente è responsively u valore di visualizazione di cumpunenti è più cù i nostri utilità di visualizazione. Include u supportu per alcuni di i valori più cumuni, è ancu alcuni extra per cuntrullà a visualizazione durante a stampa.
Cumu funziona
Cambia u valore di a display
pruprietà 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}
persm
,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 a $displays
variàbile è 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-none
mette display: none;
nantu à lg
, xl
, è xxl
schermi.
Esempii
<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>
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-none
classa o una di e .d-{sm,md,lg,xl,xxl}-none
classi per ogni variazione di schermu responsive.
Per mostrà un elementu solu nantu à un intervallu determinatu di dimensioni di schermu pudete cumminà una .d-*-none
classa 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 .d-xxl-block |
Oculatu solu nantu à xxl | .d-xxl-none |
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 |
<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 display
valore di l'elementi quandu stampate cù e nostre classi di utilità di visualizazione di stampa. Include supportu per i stessi display
valori 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.
<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
),