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

  1. Come sviluppare rapidamente applicazioni web?
  2. Come utilizzare le griglie?
  3. Come implementare l’uso di form e pulsanti?
  4. Come creare le interfacce delle nostre applicazioni?
  5. Come far interagire gli utenti con le applicazioni?
Tag: , , , ,

L'autore

Web Developer per vocazione. Team leader presso Your Inspiration Web. Ama tutto quello che gravita intorno alla User Experience e allo sviluppo web, con un occhio di riguardo a jQuery. Laureato in Informatica all'Università degli Studi dell'Aquila, scrive di web anche su blog stranieri. Facebook - Twitter - Google+

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

24 commenti

Trackback e pingback

  1. 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…
  2. Twitter Bootstrap: come sviluppare rapidamente applicazioni web? | Your Inspiration Web
    [...] Come utilizzare le griglie? [...]
  3. Twitter Bootstrap: Come creare le interfacce delle nostre applicazioni? | Your Inspiration Web
    […] Come utilizzare le griglie? […]