Bootstrap, il framework indispensabile

di
32 visite dal 30 giugno, 2016

Cos’è 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 rappresenta una delle soluzioni più utilizzate per la progettazione di template per il web, soprattutto in ottica responsiva.

Cosa ci possiamo fare con Bootstrap?

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?

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, comeclass=”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:

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:

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.

Fonte: http://www.mrwebmaster.it/

Condivivi