Bootstrap Grid System – righe e colonne
Continuiamo a parlare del Grid System di Bootstrap e vediamo come usarlo per realizzare layout responsive. In particolare, vedremo come usare le classi row e col per realizzare contenuti che si adattano alle dimensioni della finestra del browser o allo schermo del dispositivo.
Nell’articolo precedente abbiamo visto i container (contenitori), uno degli elementi fondamentali di Bootstrap. Oggi vedremo come inserire al suo interno righe e colonne per creare una nostra griglia personalizzata.
Per creare una griglia devi inserire all’interno di un contenitore prima le righe usando un tag div con classe row e, a sua volta, all’interno delle righe devi inserire le colonne usando tag div con classe col-.
Come funziona Bootstrap Grid System
Il grid system di Bootstrap divide il contenuto di ciascuna riga in 12 parti e di conseguenza la larghezza di ciascuna colonna dovrà essere espressa in dodicesimi.
Le 12 parti in cui é divisa una riga servono per indicare la larghezza delle colonne. In pratica, 1 indica che la larghezza della colonna sarà 1/12 di quello della riga, 2 sarà 2/12, 6 sarà 6/12(cioè il 50%) e cosi via.
Inoltre, usando i breakpoint visti nell’articolo precedente, potremmo influenzare il comportamento delle colonne e decidere per quali dispositivi devono essere affiancate e per quali impilate.
Anche se all’apparenza il funzionamento del grid systme può sembrare complesso, vedrai che una volta che avrai capito il meccanismo ti sarà tutto molto più semplice.
Per esempio, se vogliamo creare una pagina web divisa in tre colonne, una larga il 50% della finestra e le altre due il 25%, e vogliamo che queste tre colonne siano impilate per dispositivi più piccoli di un tablet, cioè con viewport inferiore a 768 pixel, dovremmo scrivere il nostro codice HTML in questo modo:
<div class="container">
<div class="row">
<div class="col-md-6">
Colonna uno
</div>
<div class="col-md-3">
Colonna due
</div>
<div class="col-md-3">
Colonna tre
</div>
</div>
</div>Analizziamo le classi col-md-6 e col-md-3, usate per creare le colonne:
- col- indica che il tag div rappresenta una colonna;
- md è il breakpoint e serve per fare in modo che su dispositivi inferiori a 768px (cioè medium) le colonne non siano affiancate ma impilate;
- i numeri 6 e 3 servono per indicare la larghezza di ogni colonna, che in questo caso sono rispettivamente 6/12 (50%) e 3/12 (25%);
Se vuoi creare tre colonne con la stessa larghezza, puoi omettere la dimensione e scrivere semplicemente:
<div class="container">
<div class="row">
<div class="col-md">
Colonna uno
</div>
<div class="col-md">
Colonna due
</div>
<div class="col-md">
Colonna tre
</div>
</div>
</div>In questo esempio Bootstrap creerà tre colonne della stessa larghezza.
Puoi anche omettere di indicare il breakpoint. In questo caso le colonne saranno impilate solo se il loro contenuto non consente una corretta visualizzazione su schermi piccoli.
<div class="container">
<div class="row">
<div class="col-6">
Colonna uno
</div>
<div class="col-3">
Colonna due
</div>
<div class="col-3">
Colonna tre
</div>
</div>
</div>Ti consiglio di fare delle prove scrivendo i codici appena visti in una pagina di esempio e modificare le dimensioni della finestra del browser per vedere il comportamento delle colonne. Ripeti le stesse prove modificando i breakpoint e le dimensioni.
Mescolare le classi delle colonne
Ti ricordo che per creare una colonna devi usare un tag div con classe col-<breakpoint>–<dimensione colonna> all’interno di un altro tag div con classe row.
Il grid system di Bootstrap ti consente di usare anche diverse classi con prefisso col- su un ogni tag div e di ottenere un differente layout su dispositivi di diverse dimensioni.
Per esempio proviamo a scrivere il seguente codice all’interno della nostra pagina di prova:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
Colonna uno
</div>
<div class="col-md-3 col-sm-6">
Colonna due
</div>
<div class="col-md-3 col-sm-6">
Colonna tre
</div>
<div class="col-md-3 col-sm-6">
Colonna quattro
</div>
</div>
</div>Il risultato dell’esempio sarà 4 colonne affiancate su viewport maggiori o uguali a medium(768px), mentre su dispositivi maggiori e uguali a small(576px) ma inferiori a medium(768px) vedremo le colonne uno e due affiancate e subito sotto le colonne tre e quattro affiancate. Infine su dispositivi xs(inferiori a 576px) le colonne saranno tutte impilate. Carica la pagine nel browser e ridimensiona la finestra per vedere le colonne cambiare posizione.
La classe offset-<breakpoint>–<dimensione n> sposta la colonna di n/12 verso destra. Per esempio scrivendo:
<div class="container">
<div class="row">
<div class="offset-md-3 col-sm-6">
Colonna uno
</div>
</div>
</div>Visualizzeremo una colonna larga il 6/12 con margine sinistro di 3/12.
Griglie annidate
Nella realizzazione di alcune interfacce potrebbe essere comodo annidare le griglie. Per farlo, devi aggiungere una nuova riga, usando la classe row, all’interno di una colonna già esistente come nell’esempio di seguito riportato:
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>Come hai visto, il grid system di Bootstrap è uno strumento molto potente che permette di creare layout responsive complessi con poco codice.
Nei prossimi articoli vedremo come arricchire le nostre interfacce con i diversi componenti di Bootstrap, come inserire navbar, personalizzare il menu, creare slideshow ecc…
Continua a seguirci e iscriviti alla pagina Facebook di BlogAmico per non perdere i prossimi articoli.
Articolo successivo -> Bootstrap navbar, come creare un menu responsive
Bootstrap Grid System (Sistema a Griglia) e Container <- Articolo precedente
