back to top

Introduzione a Bootstrap

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.

Pubblicitร