Premessa: questa guida si basa sulla versione 3 di Bootstrap rilasciata nell’Agosto del 2013. Se state utilizzando una versione precedente del framework il mio consiglio è di effettuare un aggiornamento, se questo non è possibile considerate che diverse cose sono cambiate con l’avvento della v.3 quindi alcune parti di questa guida potrebbero non essere applicabili al vostro progetto.
Cos’è Bootstrap?
Prima di addentrarci nei dettagli di Bootstrap, cerchiamo di capire che cosa è, cosa possiamo aspettarci da esso e come può facilitare il nostro lavoro di sviluppo per il web.
Rispondiamo, innanzi tutto, alla prima domanda: Cosa è Bootstrap? Bootstrap è un insieme di elementi grafici, stilistici, di impaginazione e Javascript pronti all’uso, nati in seno a Twitter ad opera degli sviluppatori Mark Otto e Jacob Thornton. Oggi Bootstrap è un progetto indipendente ed è stato messo a disposizione degli sviluppatori di tutto il mondo che sono liberi di utilizzare questo framework come base per i propri progetti web.
Ad oggi Bootstrap può vantare un successo davvero planetario: forte di una platea di utilizzatori in rapida espansione, ad oggi Bootstrap rappresenta una delle soluzioni più utilizzate per la progettazione di template per il web, soprattutto in ottica responsiva.
Questo porta subito a rispondere alla seconda domanda: cosa ci possiamo aspettare da Bootstrap? La risposta è semplice: questo framework ci offre i mattoni con cui costruire pagine web HTML5, completamente responsive, coerenti e funzionali. L’utilità di Bootstrap è immediatamente evidente, soprattutto nella situazione attuale in cui le pagine web possono essere fruite su una miriade di dispositivi con caratteristiche diverse. Sarà Bootstrap ad occuparsi di mettervi a disposizione elementi di stile che permettono alla pagina di adattarsi al dispositivo utilizzando, al contempo, elementi di interfaccia comuni ai siti moderni, quelli cioè che l’utente si aspetta e di cui conosce comportamento e significato.
Cosa contiene realmente Bootstrap?
Ma di cosa si compone realmente Bootstrap? Possiamo suddividere i suoi elementi in quattro macro-aree:
Scaffolding (o impalcatura)
Questa aree contiene tutti quegli elementi CSS che permettono di definire la struttura della pagina, ossia il suo layout. La parte costitutiva di questa pagina è il Grid system ossia una griglia, fissa o fluida, con una larghezza base di 960px nella quale possono essere definite righe e colonne in cui poi incasellare i contenuti.
Di base, la griglia è costituita da 12 colonne e ogni elemento del layout può espandersi su una o più colonne, semplicemente applicando una classe di stile che in qualche modo definisce la sua “estensione”. Un elemento per cui è definita la classe class="col-md-2", ad esempio, occuperà automaticamente 2 colonne della griglia base. Perché si estenda su quattro colonne basterà modificare la classe così: class="col-md-4". Semplice no? Vale davvero la pena di imparare ad utilizzare questo framework… perchè sarà molto semplice creare siti web responsivi e dal layout perfetto.
CSS base
Questa area contiene degli stili predefiniti per diversi elementi della pagina, come i titoli (H1, H2,…), le tabelle, i pulsanti, gli elementi dei form, le immagini… Con queste regole di stile realizzare pulsanti di varie dimensioni, con i bordi smussati, con un effetto over diventa davvero semplice e immediato. Lo stesso vale per la creazione di una tabella con righe a colori alterni. Nel primo caso, basta applicare una delle moltissime classi disponibili, come class="btn btn-primary" o class="btn btn-default btn-lg", nel secondo, basta applicare alla tabella la classe class="table table-striped".
Componenti
Questa area contiene elementi più complessi di pulsanti o tabelle, ma ormai molto comuni nei siti web. Ad esempio, gruppi di pulsanti, barre di navigazione, menu a discesa… Fra i componenti è compreso anche un set di icone, o meglio di glifi (dato che non si tratta di immagini ma di caratteri) di uso comune, messe a disposizione da Glyphicons. Le icone/glifi Glyphicons di norma sono a pagamento, mentre il test distribuito con Bootstrap è gratuito. I creatori di Bootrstap suggeriscono a chi le usa di inserire, se possibile, un link al sito Glyphicon, come una sorta di ringraziamento. Come avrete sicuramente già intuito, le icone si utilizzano tramite apposite classi. Volete creare un pulsante base con l’icona di una stella? Semplicissimo, create il pulsante con la sua classe e al suo interno inserite l’icona che vi occorre con elemento <span> di una apposita classe:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>Questo meccanismo delle classi si adotta anche per gli elementi più complessi. Un esempio? Per creare un menu a discesa basta usare una elenco non ordinato con apposite voci:
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Uno</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Due</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Tre</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1"href="#">A</a></li>
</ul>
</div>Questo naturalmente è solo un assaggio, quindi inutile perdere tempo per spiegare cosa abbiamo fatto in questi semplici esempi… Nelle prossime lezioni ci dedicheremo con più attenzione a tutti questi elementi e spiegheremo nel dettaglio ogni esempio che verrà proposto.
Javascript
Quest’ultima area contiene diversi plug-in jQuery per realizzare effetti molto comuni come transizioni, finestre modali, popup, carousel, accordion, tab. Anche questi plug-in sono semplici da usare e vi permettono di realizzare tantissime soluzioni interessanti.
Quando usare Bootstrap?
L’ultima domanda a cui cercheremo di rispondere in questa prima lezione della nostra guida è "quando conviene utilizzare Bootstrap?". In realtà possiamo dire che conviene utilizzare Bootstrap quando si desidera creare un nuovo sito web senza dover scrivere tutto da zero. Bootstrap, come ogni altro framework, consente di sviluppare un progetto in modo più rapido, tuttavia non può e non deve essere considerato la soluzione definitiva ad ogni problema di web-design. Così come non è sempre corretto fare ricorso ad un framework Javascript come jQuery, lo stesso vale per Bootstrap: l’opportunità o meno di un suo utilizzo deve essere valutata caso per caso in base alle specifiche esigenze di sviluppo.
