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 travaglia
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
à xl
, ù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
.
Induve u valore hè unu di:
none
inline
inline-block
block
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
setti display: none;
nantu à dui lg
è xl
schermi.
Esempii
Elementi nascosti
Per un sviluppu più veloce amichevule mobile, 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}-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
, ammuccià l'elementu per tutte e dimensioni di schermu eccettu in i dispositi mediu è grande.
Size Screen | 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 |
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 |
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'è i nostri .d-*
utilità responsive.
.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
E classi di stampa è di visualizazione ponu esse cumminate.