Twitter Bootstrap: come sviluppare rapidamente applicazioni web?
Le applicazioni web hanno ormai raggiunto un livello di astrazione che permette loro di essere spesso paragonate ai classici applicativi desktop. Tutte le applicazioni web hanno in comune determinati elementi come menu orizzontali, bottoni, tabs, menu dropdown, ecc. Elementi che in ogni progetto necessitano di essere sviluppati sia nel design che nelle funzionalità con relativi tempi e costi.
In questa serie di articoli entreremo nel dettaglio di Twitter Boostrap ed imparerai a realizzare applicazioni web in maniera semplice, veloce e con pochissime righe di codice consentendoti di risparmiare tempo nello sviluppo; tempo che potrai dedicare alle funzionalità specifiche del progetto.
Cos’è Twitter Boostrap?
Twitter Bootstrap è un frontend toolkit che ci consente di sviluppare rapidamente applicazioni web. Attraverso l’utilizzo di molte tecniche compatibili nei browser di ultima generazione, ci mette a disposizione, ad esempio, form, pulsanti, tabelle, griglie, menu e molti altri strumenti per velocizzare il nostro lavoro.
Come facilmente avrai intuito, il Bootstrap è stato sviluppato all’interno degli uffici di Twitter. Il toolkit è nato inizialmente come progetto interno, per sopperire agli ovvi problemi di scalabilità e manutenibilità che l’utilizzo di differenti librerie esterne comporta. Solo in seguito è stato deciso di rendere disponibile pubblicamente il progetto.
Primi passi con il Bootstrap
La prima cosa da fare per studiare il toolkit di casa Twitter è scaricare sul nostro pc il pacchetto completo. Il Bootstrap mette a disposizione tre tipologie di download:
- Un pacchetto completo compilato e minimizzato pronto per essere incluso nei nostri progetti;
- Un pacchetto completo con i sorgenti da compilare e la documentazione per chi vuole studiare, modificare o integrare con nuovi strumenti il core;
- Uno strumento Customize con cui è possibile selezionare solo le componenti di cui si ha bisogno. Comodissima quest’ultima opzione poiché consente di essere utilizzata in fase di produzione occupando meno spazio e, soprattutto, facendo risparmiare banda agli utenti.
Per lo scopo di questo corso consiglio di scaricare il pacchetto completo con i sorgenti già compilati.
Struttura del pacchetto
Una volta che abbiamo scompattato il pacchetto, troveremo all’interno della cartella Bootstrap una struttura come la seguente:
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-responsive.css │ ├── bootstrap-responsive.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js ├── img/ │ ├── glyphicons-halflings.png │ ├── glyphicons-halflings-white.png
Come facilmente possiamo notare, tutto il codice di cui abbiamo bisogno è racchiuso in pochissimi file. Questo ci consente di spostare agevolmente i file all’interno del nostro progetto senza bisogno di perderci tra migliaia di file differenti.
La cartella CSS contiene due file: bootstrap.css e bootstrap-responsive.css (oltre le rispettive versioni minimizzate). Tali file, nell’ordine, sono utilizzati per lo stile di tutti gli strumenti che vedremo in questo corso, per la struttura della griglia e per la gestione del responsive.
La cartella JS contiene il solo file bootstrap.js (anche qui disponibile anche nella versione minimizzata) in cui sono definiti tutte le classi e i plugin a disposizione.
La cartella IMG ha al suo interno, invece, due sprites utilizzate per le icone dei pulsanti, dei menu, ecc. Le due immagini sono del tutto uguali, l’unica differenza è il colore delle icone che sono state rese disponibili nella versione bianca e nella versione grigia (#303030).
Quali sono gli strumenti a disposizione?
Finora mi sono limitato a descrivere in maniera molto generica gli strumenti che Twitter Boostrap ci ha messo a disposizione. Se ti ho incuriosito quanto basta per continuare a leggere questa introduzione, vediamo insieme un po’ più nel dettaglio quali sono questi tool.
Gli strumenti possono essere suddivisi in quattro macro aree che approfondiremo in maniera completa nelle prossime lezioni del corso:
- Scaffolding: come ci suggerisce il termine (scaffolding in inglese vuol dire impalcatura), in questa categoria sono racchiusi i tool che ci consentono di realizzare la struttura dell’applicazione web da sviluppare. Appartengono a questa area tutte quelle regole CSS con cui realizziamo il layout della pagina, le colonne che vanno a comporre il grid-system e quelle regole che ci consentono di rendere responsive l’applicativo.
- Base CSS: la categoria comprende una serie di stili per gli elementi HTML della pagina come i vari headings (h1, h2, …), i paragrafi, le tabelle e tutti gli elementi delle form. In questa categoria sono anche contenute una serie di classi CSS che automaticamente realizzano dei comodissimi button e un set di 140 icone messe a disposizione da Glyphicons. La libreria fa largo uso delle nuove regole introdotte nella versione 3 del CSS per garantire una migliore esperienza utente pur assicurando una corretta renderizzazione su browser un po’ più obsoleti.
- Components: iniziamo ora ad addentrarci negli strumenti più interessanti ed utili di Twitter Bootstrap. Appartengono a questa categoria, infatti, menu dropdown, button dropdown e button groups con cui possiamo realizzare menu orizzontali. Poi ancora buttons con dropdown, navbar, paginazioni, label e badges, thumbnails per le immagini, progress bar e molto altro. Il tutto ovviamente realizzabile attraverso pochissime righe di codice.
- Javascript: nell’ultima categoria riprenderemo tutti gli strumenti che ti ho descritto nelle categorie precedenti e vedremo insieme come consentire agli utenti ad interagire con essi. Vedremo poi altri utilissimi strumenti come le finestre modali, le popover, gli accordion, le tabs e davvero molto altro.
Come includere Twitter Bootstrap nei nostri progetti?
Includere la libreria all’interno del tuo progetto è davvero molto semplice. Come abbiamo visto all’inizio dell’articolo, dobbiamo semplicemente includere i file scaricati nelle rispettive cartelle. Un’operazione importante da non dimenticare è quella di caricare jQuery se non l’hai ancora utilizzato nel progetto.
Un classico esempio di struttura base della nostra pagina potrebbe essere la seguente:
<!DOCTYPE html> <html> <head> <title>Twitter Bootstrap: struttura base</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Nell’esempio, i file Javascript sono stati inclusi prima della chiusura del tag <body>. Questa operazione consente un caricamento più veloce della pagina ma, se preferisci, puoi includere i file anche all’interno del tag <head> come abitualmente si fa con tutti i file JS.
Alcuni esempi
Sei un web designer e/o uno sviluppatore web, giusto? E allora non posso completare questo articolo senza averti mostrato qualche riga di codice e qualche esempio di quello che puoi realizzare con Twitter Bootstrap.
Come realizzare un layout responsive?
Il primo esempio che voglio mostrarti è quello relativo alla realizzazione di un layout responsivo con cui possiamo far visualizzare senza alcuna fatica le nostre pagine su tutti i browser e tutti i dispositivi mobili.
Nella pagina di esempio ho incluso immagini a differenti risoluzioni utilizzando la griglia del Bootstrap. Il codice seguente mostra un piccolo snippet con cui possiamo realizzare un layout a 3 colonne con delle thumbnail:
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<a class="thumbnail" href="#">
<img src="http://lorempixel.com/400/250/abstract/" alt="" />
</a>
</li>
<li class="span4">
<a class="thumbnail" href="#">
<img src="http://lorempixel.com/400/250/transport/" alt="" />
</a>
</li>
<li class="span4">
<a class="thumbnail" href="#">
<img src="http://lorempixel.com/400/250/nighlife/" alt="" />
</a>
</li>
</ul>
</div>
Senza entrare nel dettaglio, per ora notiamo semplicemente che assegnando la classe row-fluid al div contenitore ed utilizzando la classe spanX (dove X sta per il numero di colonne della griglia che l’elemento deve occupare) possiamo realizzare il nostro layout a 3 colonne. Nel nostro caso la X ha valore 4 dato che vogliamo 3 colonne: 12 / 3 = 4.
Button, dropdown e progress bar
In quest ultimo esempio voglio mostrarti, invece, come semplice sia anche realizzare pulsanti, menu dropdown e progress bar.
<div class="btn-group"><button class="btn">File</button>
<button class="btn">Modifica</button>
<button class="btn">Visualizza</button>
<button class="btn">Strumenti</button>
<button class="btn">?</button>
</div>
Il frammento di codice precedente consente di creare un gruppo di pulsanti con cui mostrare un gruppo di button. Anche in questo caso con due sole classi assegnati a comuni elementi HTML abbiamo realizzato qualcosa che altrimenti avrebbe richiesto molto lavoro con il foglio di stile.
Conclusioni
In questa breve introduzione hai potuto iniziare a toccare con mano quelle che sono le potenzialità che offre Twitter Bootstrap. Semplicità di utilizzo, velocità di sviluppo, riusabilità del codice, applicazioni cross-browser e tantissimi altri sono i vantaggi offerti dalla libreria.
Vedremo ancora più nel dettaglio nelle prossime lezioni quanto semplice sia utilizzare Twitter Bootstrap nelle nostre applicazioni.
E tu hai mai utilizzato un toolkit come il Bootstrap? Se sì, quali pensi siano i vantaggi/svantaggi nell’utilizzo di toolkit simili?
Indice
- 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:
36 commenti
Trackback e pingback
-
Twitter Bootstrap Scaffolding: come utilizzare le griglie? | Your Inspiration Web
[...] Come sviluppare rapidamente applicazioni web? [...] -
Twitter Bootstrap: come sviluppare rapidamente applicazioni web? | MichelePierri.it | News - Android - Cloud Computing - Programmazione
[...] Twitter Bootstrap: come sviluppare rapidamente applicazioni web? è un articolo di Your Inspiration Web Vuoi un consiglio per un ...
Molto interessante, volevo approfondire bootstrap da tempo e questo è certamente un ottimo inizio!
Attendo le prossime puntate :D
Grazie Barra,
a breve arriveranno le prossime! Stay tuned! :)
E con questa splendida serie di articoli – che ci guiderà nell’integrazione e uso del Bootstrap di Twitter nello sviluppo dei nostri progetti – diamo ufficialmente il benvenuto ad un altro nuovo autore che si unisce alla redazione di YIW, Simone D’Amico (che tra le altre cose è anche il Team Leader del nostro team di sviluppo).
Nello sviluppo dei nostri temi WordPress (che vendiamo su Themeforest) abbiamo deciso di utilizzare (dal prossimo tema) il bootstrap per quel che riguarda l’uso della griglia e del responsive design. Questo comporta sicuramente un notevole guadagno nei tempi di sviluppo ma il problema è che la nostra Sara (che si occupa del progetto grafico ) sente la sua creatività “incatenata” all’interno di queste cavolo di 12 colonne. Sara ci ha già mandati diverse volte a quel paese nel vano tentativo di suddividere tre sezioni in 8 colonne o due sezioni in 9 colonne… vediamo quanto durerà questa convivenza con la griglia :)
Grazie per il benvenuto Nando! :)
…e speriamo che la convivenza con il grid-system sia lunga e proficua! :)
ehehhe povera Sara, giá me la vedo a sclerare al pc chiedendo a Nando di fare colonne da 4.5 :D
Simo bell’articolo!
L’ho conosciuto da poco ed è stato amore a prima vista,mi ha permesso di concentrarmi più sulle funzionalità delle web app,che sul disegnare ogni singolo bottone o form.
L’unico “problema” che trovo è forse l’omogenizzazione di certe parti del design, che può diventare però un vantaggio per la user experience.
Concordo Simone,
questo che potrebbe sembrare a prima vista uno svantaggio, si rivela utilissimo per gli utenti! :)
Domanda: è un toolkit grafico che può essere integrato ad altri framework, per esempio Cakephp, o contiene anche codice server-side?
Può essere integato ovunque.
Quelli di Joomla lo hanno ad esempio integrato nell’ultima versione del CMS. VtigerCRM è un crm opensource che nella prossima major release (in uscita verso fine anno se tutto va bene…) vedrà sostituita l’intera GUI con una soluzione basata su bootstrap (e sinceramente non vedo l’ora, smarty è penoso!)
Ciao Andrea,
è un frontend toolkit, il che vuol dire che interagisce solo lato client consentendoti di delegare a qualsiasi linguaggio, framework o CMS lo sviluppo lato server. :)
Perfetto! Diciamo che è ciò che cercavo, seguirò questa serie di articoli con molta attenzione, siete fantastici qui a YIW, grazie :)
Grazie dei compliementi Andrea! Ci “vediamo” nei prossimi articoli allora! :)
Risulta penamente compatibile con IE? Ho notato che fa buon uso di html5 perciò mi preccupavo…
Ciao Daniele,
a questo link trovi la tabella di compatibilità con i vari browser: https://github.com/twitter/bootstrap/wiki/Browser-Compatibility
Tra i supportati troviamo anche IE fino alla versione 7. :)
Si avevo visto il link ma mi chiedevo se avevate avuto esperienze in merito (in sostanza, non mi fido al 100% :P)
Grazie mille comunque!
Non sviluppo più per IE7 quindi non posso darti la certezza del funzionamento. Su IE8 bisogna stare attenti alle media queries perchè come ben saprai non sono supportate; insomma parlare di responsive con IE8 è un po’ azzardato. :)
Con IE8 ti posso dire che rimane tale,tranne per il border radius degli elementi
Non ci posso credere! Giusto ieri pomeriggio ho scritto nel Forum cercando delucidazioni su di un sito realizzato con BootStrap! guarda: Ho scritto una discussione nella sezione Javascript che si intitola “Animazione sfondo quando scrollo”…
Beh, seguirò sicuramente le tue lezioni, nel frattempo non è che sai darmi un’idea di come funzionano siti come droptest.com. Ho il sospetto che parta tutto da BootStrap ma non lo conosco abbastanza bene per capire bene come si fa a tenere ferma la pagina fino ad un certo punto e poi farla scorrere…
Il sito a cui fai riferimento tu utilizza Curtain.js per le transizioni. Dai un’occhiata qui: https://github.com/victa/curtain.js
Grazie!!! Me lo studio immediatamente!
Ottimo articolo, complimenti! Mi chiedevo proprio ieri quando sarebbe uscita una guida su Bootstrap!
Da quando hanno rilasciato la 2 ho definitivamente abbandonato Foundation (anche se sarebbe interessante un faccia a faccia con la nuova vers. 3 di casa Zurb) utilizzandolo praticamente in ogni progetto. L’accoppiata con LESS poi è davvero vincente: una manna dal cielo per tutti i programmatori!
Ciao Nico,
discutevamo proprio con Nando dell’eventualità di una guida anche sulla Foundation ma effettivamente il Bootstrap è tutta un’altra cosa.
Tanto di cappello ai ragazzi di Zurb perchè sono anni che sviluppano plugin e pulsanti di cui ho fatto largamente uso (Orbit l’ho usato davvero tantissimo per fare un esempio) però il Bootstrap sembra essere su un altro livello davvero. :)
Con l’uscita della versione 2 avevo intenzione di iniziare a giocarci un pò, ma ammetto di essermi trovato spaesato la prima volta che l’ho aperto, una buona guida che si preannuncia ottima ;)
Ciao Francesco,
lieto di poterti essere d’aiuto. Scoprirai che utilizzarlo è di una semplicità disarmante! :)
In effetti è utilissimo per i programmatori che devono fare amministrazioni.
Siti veri e propri non si possono fare con Bootstrap, cioè una webagency non può standardizzare così tanto i propri siti.
Va benissimo per i programmatori che ovviamente non conoscono nessuna regola di “webdesign” perciò solo mettendo questo css creano delle cose accettabili.
Per i programmatori “pigri” segnalo questo sito che dà la possibilità di modificare font e colori del sito da creare.
In pratica dei template per Bootstrap :-)
http://bootswatch.com/
Ciao Alessio,
a parte il grid-system, il resto degli strumenti non sono stati progettati per un comune sito web (forse al limite i button) ma per lo sviluppo di applicativi web e, come giustamente citi tu, le aree di amministrazione.
Grazie per la condivisione della risorsa, non la conoscevo! :)
Lo vedo utile solo per il back-end, credo sia stata un’idea vincente da parte di twitter “monopollizzare” la grafica per le web app.
Bootstrap è un segno tangibile di quanto sia sempre più importante il design per le app
Anche concrete5 (http://www.concrete5.org/) da quanto mi sembra di vedere, utilizza il pacchetto UI di Twitter.
Il design è sicuramente piu’ sexy e più completo rispetto a Foundation. (http://foundation.zurb.com/)
Comincio ad innamorarmene … non pazzamente, ma affascina!
Sopratutto potrò dire … ciao ciao perdite di tempo!
Ciao Simone. Intanto grazie per il lavoro che stai svolgendo riguardo l’argomento in questione. Ho una piccola domanda/problema. Ho tentato giorni fa, prima di leggere l’articolo, di creare un layout fluido. Tutto una passeggiata, finchè ho avuto la necessità di creare una griglia di thumbnails in maniera identica a quanto da te descritto sopra. Ho provato anche a copiare ed incollare il tuo esempio ma NISBA. Se le thumbnail vanno oltre la prima riga della griglia (perchè in numero superiore a 3), a partire dalla seconda il margine sinistro si sposta, l’intera riga appare sfalsata e conta un elemento di meno rispetto alla prima (la quale invece non presenta margine sinistro rispetto al container). Ti sarei enormemente grato se mi aiutassi a risolvere questo problema. Sto sbagliando qualcosa io oppure come mi è sembrato di leggere in rete il problema è comune nel caso dell’utilizzo di row-fluid?
Ciao Simone,
si è un problema del row-fluid ma puoi risolverlo con il CSS. Guarda il codice a questo link: http://dev.simonedamico.com/yit/responsive/ e soprattutto come utilizzo l’nth-child.
non hai più proseguito con i tutorial… peccato!
Ciao Claudio,
alcuni problemi non mi hanno permesso di completare la guida ma non preoccuparti, a breve riprenderò! :)
Ciao Simone.
Grazie per la dritta, ho finalmente aggirato il problema.
Mitico! :)