Display
Organizzare gli spazi all'interno di una pagina significa anche gestire la proprietà display di ogni elemento, anche in ottica responsive.
Qui potrai reperire una vasta gamma di classi per poter modificare la visualizzazione degli elementi all'interno delle pagine nell'Ecosistema digitale Turismo Cultura.
Utilizzo
E' possibile modificare il valore della proprietà display di ogni elemento con delle classi ad hoc, le quali possono essere combinate tra di loro per ottenere l'effetto desiderato. Le classi display che si applicano a tutte le dimensioni dello schermo, da xs fino a xl, non hanno bisogno di alcuna indicazione di breakpoints, per cui ad esempio basterà utilizzare la classe .d-none per nascondere un elemento ad ogni risoluzione. In caso contrario, è sufficiente utilizzare i classici breakpoints utilizzando il seguente formato:
- d-{valore} per xs
- d-{breakpoints}-{valore} per sm, md, lg, xl
Dove il valore è uno tra:
- none
- inline
- inline-block
- block
- table
- table-cell
- table-row
- flex
- inline-flex
Di default, l'utilizzo delle classi d- con breakpoint ha effetto su dispositivi dal breakpoint indicato fino a xl. Ad esempio, .d-lg-none imposta display: none; sia nella visualizzazione in lg che in xl.
Elementi nascosti
Utilizza le classi responsive per mostrare e nascondere un elemento a seconda dei vari dispositivi. Si suggerisce di evitare la creazine di versioni completamente diverse dello stesso sito, bensì di nascondere l'elemento per dimensioni dello schermo di non interesse. Per nascondere elementi puoi usare semplicemente la classe .d-none oppure una delle classi .d-{sm,md,lg,xl}-none per qualsiasi risoluzione. Inoltre, per mostrare un elemento solo su un dato intervallo di dimensioni dello schermo, puoi combinare una classe .d-*-none con una classe .d-*-*. Ad esempio .d-none .d-md-block .d-xl-none nasconderà l'elemento per tutti gli schermi eccetto che per i dispositivi di medie e grandi dimensioni (fino alla dimensione xl, oltre la quale tornerà ad essere nascosto).
| 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 |
Visibilità
Imposta la classe visibility degli elementi con le nostre utilità di visibilità. Queste non modificano il valore display e sono utili per nascondere i contenuti alla maggior parte degli utenti, ma conservandoli per gli screen reader. Applica .visible oppure .invisible al bisogno.
Screen reader
Nascondi un elemento su tutti i dispositivi eccetto screen readers con la classe .sr-only.
Ulteriori informazioni sull'utilizzo degli spazi
Per approfondire l'uso della proprietà display visita la pagina Display di Bootstrap.