Twitter Bootstrap: come utilizzare le griglie?
Abbiamo visto nella prima lezione cos’è Twitter Bootstrap e poi abbiamo fatto una breve panoramica di quali sono gli strumenti che questo tool ci mette a disposizione per sviluppare in maniera molto più rapida le nostre applicazioni web.
In questa lezione entreremo finalmente nel dettaglio del Bootstrap e scopriremo la struttura base della libreria, gli stili base e, soprattutto, come realizzare design responsivi con le griglie messe a disposizione.
Come è strutturato il Bootstrap e quali sono gli stili di base?
Come abbiamo anticipato nella lezione introduttiva, il Bootstrap utilizza alcuni elementi HTML e regole CSS che richiedono l’utilizzo del DOCTYPE HTML5. Ogni documento in cui integreremo la libreria, quindi, necessita di un’intestazione come la seguente:
<!DOCTYPE html> <html lang="en">
Lo stile di base è invece affidato a Normalize.css, un’interessante alternativa ai più comuni CSS reset che consente di sfruttare al massimo le novità introdotte da HTML5.
Come utilizzare il Grid System del Bootstrap di Twitter?
La griglia messa a disposizione dal Bootstrap è molto semplice da utilizzare e piuttosto solida. Per chi proviene da sistemi molto complessi come YUI troverà il Grid System di una semplicità disarmante; chi invece ha usato sistemi più semplici come 960gs noterà invece una notevole similitudine tra i concetti.
Se non hai mai utilizzato un griglia e vuoi approfondire l’argomento, puoi fare riferimento all’articolo pubblicato qualche giorno fa da Sara: I principi della progettazione grafica: lavorare con le griglie.
La griglia è basata su 12 colonne e copre uno spazio di 940 pixel. Vedremo più avanti in questa lezione che tale larghezza, se deciderai di utilizzare il responsive, dipende dal dispositivo e dalla risoluzione utilizzata spaziando tra i 724px e i 1170px.
Tutto il contenuto della pagina che vuole essere gestito attraverso il grid system necessita di essere racchiuso all’interno di un div con classe container che si occupa di centrare il contenuto nella pagina ed impostare la larghezza predefinita.
All’interno del contenitore pricipale, prima di impostare il numero di colonne che si vogliono utilizzare per realizzare i nostri layout, abbiamo bisogno di impostare un altro div; questa volta con classe row.
All’interno di quest ultimo div andiamo ad implementare il nostro layout effettivo. Lo spazio occupato all’interno della griglia viene settato attraverso la classe spanX dove X indica il numero di colonne da utilizzare.
Per realizzare un semplice layout a due colonne, quindi, possiamo utilizzare un codice come il seguente:
<div class="container"> <div class="row"> <div class="span4"> Sidebar </div> <div class="span8"> Contenuto </div> </div> </div>
Nell’esempio precedente abbiamo utilizzato un div che andrà ad occupare 4 colonne per la Sidebar ed un secondo per il Contenuto che andrà ad impiegare lo spazio di 8 colonne. Bisogna sempre fare attenzione che la somma dei div non superi 12 (8+4 = 12 nel nostro caso) onde evitare spiacevoli risultati nel nostro layout.
Ovviamente l’impiego della griglia non è limitato al solo layout ma anche gli elementi all’interno possono essere disposti nella stessa maniera.
L’unico accorgimento che bisogna applicare è quello di utilizzare sempre una nuova classe row prima di utilizzare altri elementi con classe spanX. In pratica non si possono avere due div con classe spanX uno all’interno dell’altro senza un div con classe row che li divida. Il div con classe row è necessario per eliminare il margine sinistro che viene automaticamente impostato dagli spanX.
Vediamo un esempio per chiarire il concetto:
<div class="container"> <div class="row"> <div class="span4"> Sidebar </div> <div class="span8"> <div class="row"> <div class="span3"> 3 colonne </div> <div class="span2"> 2 colonne </div> <div class="span3"> 3 colonne </div> </div> </div> </div> </div>
Come abbiamo visto, gli elementi contenuti nel div con classe span8 devono avere come somma la stessa del contenitore. Nel nostro caso 3 + 2 + 3 = 8.
In caso di necessità possiamo anche decidere di spaziare gli elementi all’interno della griglia. Se per esempio abbiamo due elementi di 3 colonne ognuno e vogliamo spaziarli tra di loro di 2 colonne, possiamo utilizzare la classe offsetX dove X anche in questo caso indica il numero di colonne.
<div class="container"> <div class="row"> <div class="span4"> Sidebar </div> <div class="span8"> <div class="row"> <div class="span3"> 3 colonne </div> <div class="span3 offset2"> 3 colonne, offset di 2 colonne </div> </div> </div> </div> </div>
Possiamo vedere in opera gli esempi appena descritti al seguente link.
Come utilizzare una griglia fluida?
Quanto visto finora può essere esteso per realizzare un layout del tutto fluido che non utilizza dimensioni fisse.
Per “attivare” il layout fluido è sufficiente posporre il termine “-fluid” ai div container e row. In questa maniera tutte le regole viste finore continuano a funzionare, l’unica differenza che avremo è che la nostra pagina si adatterà completamente allo schermo del dispositivo.
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Sidebar </div> <div class="span8"> Contenuto </div> </div> </div>
La differenza fondalmentale con la griglia a dimensioni fisse è la regola con cui si va a definire il numero di colonne utilizzate dagli elementi nidificati. Abbiamo detto in precedenza che la somma degli elementi interni ad un div spanX deve avere come risultato il valore dell’elemento genitore. Nel caso di griglie fluide, invece, il funzionamento è differente. Gli elementi nidificati devono avere come risultato finale il valore 12.
L’esempio visto per le griglie fisse, diventa, nel nostro caso il seguente:
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Sidebar </div> <div class="span8"> <div class="row-fluid"> <div class="span5"> 5 colonne </div> <div class="span2"> 2 colonne </div> <div class="span5"> 5 colonne </div> </div> </div> </div> </div>
Vediamo anche in questo caso un esempio di quando descritto.
Come progettare un design responsivo?
Il grid system fornito da Twitter Bootstrap è completamente responsivo. Questo significa che possiamo rendere i nostri layout adattivi a qualsiasi sistema e dispositivo dotato di una connessione internet.
Adattare la griglia realizzata nel primo esempio è di una semplicità disarmante. E’ sufficiente importare all’interno della pagina anche il file bootstrap-responsive.css e, automaticamente, il nostro layout diventerà responsive senza bisogno di ulteriori modifiche. Facile vero?
Se testiamo l’esempio precedente a questo link e proviamo a ridimensionare la pagina oppure ad aprirlo con dispositivi differenti, noteremo come automaticamente il layout si adatti.
Abilitando il responsive nel nostro layout, come detto in precedenza, la larghezza del contenitore non sarà più di 940px ma avrà una dimensione variabile tra 1170px e 724px a seconda del dispositivo e della dimensione della finestra.
Vediamo insieme le dimensioni delle colonne e del gutter (ovvero del margine tra le colonne) alle differenti risoluzioni.
| Dispositivo | Larghezza | Larghezza colonna | Larghezza gutter |
|---|---|---|---|
| Monitor grande | 1200px e sup. | 70px | 30px |
| Default | 980px e sup. | 60px | 20px |
| Tablets portrait | 768px e sup. | 42px | 20px |
| Tablet e mobile | 767px e inf. | Larghezza fluida | |
| Mobile | 480px e inf. | Larghezza fluida | |
Il Bootstrap implementa il responsive design nelle nostre pagine attraverso le media-queries. Spulciando il codice, noteremo che quelle messe a disposizione sono 4:
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
Per agevolarci lo sviluppo per tablets e mobile, infine, abbiamo a disposizione anche delle classi CSS attraverso le quali possiamo mostrare e/o nascondere gli elementi solo su determinati dispositivi. Vediamo insieme quali sono:
| Classe | Mobile | Tablets | Desktop |
|---|---|---|---|
.visible-phone |
Visibile | Nascosto | Nascosto |
.visible-tablet |
Nascosto | Visibile | Nascosto |
.visible-desktop |
Nascosto | Nascosto | Visibile |
.hidden-phone |
Nascosto | Visibile | Visibile |
.hidden-tablet |
Visibile | Nascosto | Visibile |
.hidden-desktop |
Visibile | Visibile | Nascosto |
Conclusioni
Abbiamo visto in questa lezione quanto sia semplice realizzare un sistema di griglie completamente responsivo utilizzando Twitter Bootstrap. Con sole tre classi CSS abbiamo a disposizione uno strumento davvero molto potente e versatile che può facilitarci e di molto nel nostro lavoro quotidiano.
Nella prossima lezione vedremo come sfruttare gli strumenti base del Bootstrap come le tabelle, le form, i pulsanti e tantissimo altro.
E tu utilizzi le griglie nei tuoi progetti per realizzare design responsivi? E se sì, quali hai utilizzato finora?
Indice della guida
- Come sviluppare rapidamente applicazioni web?
- Come utilizzare le griglie?
- Come implementare l’uso di form e pulsanti?
- Come creare le interfacce delle nostre applicazioni?
- Come far interagire gli utenti con le applicazioni?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
24 commenti
Trackback e pingback
-
Twitter Bootstrap: come implementare l’uso dei pulsanti? | Your Inspiration Web
[...] Per quanto riguarda la larghezza, invece, possiamo impostare una dimensione noi attraverso la proprietà width del CSS oppure, ancora… -
Twitter Bootstrap: come sviluppare rapidamente applicazioni web? | Your Inspiration Web
[...] Come utilizzare le griglie? [...] -
Twitter Bootstrap: Come creare le interfacce delle nostre applicazioni? | Your Inspiration Web
[…] Come utilizzare le griglie? […]
Complimenti per l’articolo chiaro ed esaustivo. Ho avevo in considerazione l’utilizzo di Bootstrap per i miei progetti e aspettavo un articolo del genere per capire nel dettaglio come ragionare con questo framework.
Direi che per risparmiare tempo in fase di sviluppo è ottimo, specialmente quando il carico di lavoro è notevole e c’è la necessità di concentrarsi più sulle funzionalità.
Grazie Calogero,
diciamo che si cerca di evitare il più possibile di “reinventare la ruota”. Se possiamo utilizzare degli strumenti che funzionano bene e ci fanno risparmiare tempo, avremo molto più tempo da dedicare alle funzionalità dei progetti! :)
*Ho preso in considerazione….
Stamattina non riesco a scrivere ahah :P
Ottima ed esaustiva seconda puntata Simone! Mi ha fatto conoscere un alleato molto utile :)
Grazie Andrea,
benvenuto nell’alleanza allora! :)
Semplice e chiaro! Grazie per questo articolo. Proverò ad usare Bootstrap in un prossimo progetto.
Grazie! ;D
Grazie a te per i complimenti Ilaria!
In bocca al lupo per il tuo progetto e facci sapere come ti troverai con il Bootstrap! :)
Sto giusto creando un sito usando bootstrap con wordpress in cui il template è un child di genesis e c’è pure woocommerce per gestire l’ecommerce! Dopo aver messo insieme i vari pezzi il risultato è che con poche righe di markup (in lesscss, su cui si basano bootstrap e woocommerce) riesco a cambiare rapidamente l’aspetto del sito in tutte le sue parti oltre ad ottenere una generale semplificazione.
Grazie per il chiarimento sul responsive che non avevo ancora approfondito, aspetto il resto della serie!
Grazie a te Alessandro!
Fa piacere notare che non sono l’unico ad apprezzare la semplicità del Bootstrap! :)
Articolo utilissimo!!! Ho appena pubblicato il mio nuovo sito http://www.terzidavidedesign.it usando bootstrap e non capivo bene l’utilizzo della classe “row” e quando usarla!.
Non vedo l’ora di seguire la prossima puntata della guida!
Ma se uso il doctato del html4 che succede?
Ciao Davide,
onestamente non so dirti quali problemi potresti incontrare. Sicuramente il Javascript e il markup fanno uso di elementi non presenti in HTML4 quindi la validazione salterebbe sicuramente. Oltre quello però effettivi malfunzionamenti non te li so dire perchè non ho mai avuto modo di provarli.
Ho utilizzato 960gs. Nel Bootstrap c’è qualcosa di simile per aumentare la larghezza da 940px a 960 o un sistema di griglia a 24 colonne anzichè 12?
Non di default. Esiste però un’estensione che può portare il numero delle colonne a 16. Dai un’occhiata qui:
http://lightglitch.github.com/bootstrap-xtra/#grid-system
Ciao Simone, ottimo articolo molto chiaro e completo. A quando la seconda parte? :)
Ciao Andrea, grazie per i complimenti. E’ stata appena pubblicata:
https://www.yourinspirationweb.com/2012/11/07/twitter-bootstrap-come-implementare-luso-di-form/
Avrei una domanda, è possibile cambiare la dimensione della larghezza (per es. 940px max) in un tema responsive per un monitor grande e di default?
Ciao Gregory,
se attivi il responsive la larghezza si estende a 1170px per i monitor larghi. In ogni caso le dimensioni standart non possono essere modificate.
… grazie per la risposta! Ciao :)
Ciao bell’articolo grazie tutto estremamente chiaro!
Sapresti dirmi come mai utilizzando fluid i figli di uno span devono avere somma 12 invece della grandezza del padre? Semplice curiosità :)
Ciao Simone,
bisogna riportare il tutto a somma 12 perchè gli span fluidi sono in percentuale quindi il Bootstrap ha bisogno di calcolarsi lo spazio in percentuale sullo spazio complessivo a disposizione! :)
Conme converto un layout 960gs a 16 colonne non 12 in un layout Bootstrap?