Nelle lezioni precedenti abbiamo sempre creato le colonne utilizzando la classe .col-md-N., dove N è il numero delle colonne strutturali della griglia (che come sappiamo sono 12) su cui si deve espandere la colonna del layout. Questa situazione è la più comune e la più usata. In realtà, tuttavia, è bene sapere che Bootstrap 3 dispone di 4 tipi classi per le colonne:
- col-xs-N
- col-sm-N
- col-md-N
- col-lg-N
dove la sigla centrale indica la larghezza secondo questo schema:
- xs = extra small
- sm = small
- md = medium
- lg = large
Nella maggior parte dei casi, qualsiasi tipo di classe si scelga, si ottiene una buona visualizzazione, soprattutto sui dispositivi come i tablet e i computer con monitor di ampie dimensioni.
L’idea di base è che la griglia viene definita in base alla dimensione della viewport mediante media query e che man mano che la dimensione della finestra del browser aumenta, la classe della griglia di dimensione maggiore sostituisce quella di dimensione minore. Il che significa che, se si usa la classe xs, questa viene utilizzata per la visualizzazione della pagina su un telefono, ma si passa alla classe sm o md su un dispositivo con un display più grande.
Ma allora come scegliere quale tipo di classe usare? Tutto dipende dalla dimensione del dispositivo al di sotto della quale le colonne non devono più essere mostrate una accanto all’altra, ma impilate (cioè mostrate l’una sotto all’altra).
Per chiarire facciamo un esempio. Vogliamo tre colonne di dimensione uguale: esse devono apparire affiancate sui dispositivi di medie dimensioni, come i più comuni monitor per pc, ma impilate su dispositivi più piccoli come tablet e telefoni. Bisognerà allora definirle usando la classe md (semplificando al massimo, quella che corrisponde al monitor del pc a schermo intero).
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>In questo modo diciamo al browser che quella èla disposizione minima della area di visualizzazione perché le colonne siano mostrate affiancate. Al di sotto di quella dimensione le colonne si impileranno.
Se si desidera che le colonne siamo affiancate sempre, anche sul display di uno smartphone, allora bisognerà definirle con la classe xs.
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>In questo modo avremo un layout a colonne anche visualizzando la pagina web sul display di uno smartphonbe.
Soluzioni miste
Una volta che il concetto base è chiarito, possiamo creare soluzioni miste per cui specifichiamo diversi classi per le colonne.
Volendo chiarire il concetti mediante un esempio, immaginiamo ancora le nostre tre colonne di dimensioni uguali con una viewport di dimensione media.
<div class="container">
<div class="row">
<div class="col-md-4"><h1>Colonna 1</h1>"Lorem ipsum dolor sit amet, ..."</div>
<div class="col-md-4"><h1>Colonna 2</h1>"Lorem ipsum dolor sit amet, ..."</div>
<div class="col-md-4"><h1>Colonna 3</h1>"Lorem ipsum dolor sit amet, ..."</div>
</div>
</div>
Ora supponiamo di volere fare in modo che, se la viewport ha dimensioni minori, le colonne non si impilino ma restino affiancate suddividendo, tuttavia, lo spazio in modo differente: non più tre colonne uguali, ma le prime due più piccole (ciascuna di queste occuperà 2 colonne strutturali della griglia invece di 4) e la terza più grande (che si estenderà su 8 colonne strutturali della nostra viewport). Per farlo aggiungeremo la classe col-xs-* in questo modo:
<div class="container">
<div class="row">
<div class="col-xs-2 col-md-4">
<h1>Colonna 1</h1>
"Lorem ipsum dolor sit amet, ..."
</div>
<div class="col-xs-2 col-md-4">
<h1>Colonna 2</h1>
"Lorem ipsum dolor sit amet, ..."
</div>
<div class="col-xs-8 col-md-4">
<h1>Colonna 3</h1>
"Lorem ipsum dolor sit amet, ..."
</div>
</div>
</div>
TIP: per vedere l’effetto alle varie risoluzioni, basta rimpiccilire la dimensione della finestra del browser.
