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:

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="https://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="https://lorempixel.com/400/250/abstract/" alt="" />
            </a>
        </li>
        <li class="span4">
            <a class="thumbnail" href="#">
                <img src="https://lorempixel.com/400/250/transport/" alt="" />
            </a>
        </li>
        <li class="span4">
            <a class="thumbnail" href="#">
                <img src="https://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

  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:

45 commenti

Trackback e pingback

  1. Twitter Bootstrap Scaffolding: come utilizzare le griglie? | Your Inspiration Web
    [...] Come sviluppare rapidamente applicazioni web? [...]
  2. 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…
  3. Twitter Bootstrap: Come creare le interfacce delle nostre applicazioni? | Your Inspiration Web
    […] Come sviluppare rapidamente applicazioni web? […]
  4. Twitter Bootstrap: come implementare l’uso di form? | Your Inspiration Web
    […] Come sviluppare rapidamente applicazioni web? […]
  5. Twitter Bootstrap: come implementare l’uso dei pulsanti? | Your Inspiration Web
    […] Come sviluppare rapidamente applicazioni web? […]
  6. Twitter Bootstrap: realizzare la dashboard di un’applicazione web | Your Inspiration Web
    […] corso della guida al Bootstrap di Twitter hai imparato ad utilizzare tutte le sue funzionalità: hai scoperto come realizzare…
  7. Creare un custom slider con il carousel di Bootstrap | Your Inspiration Web
    […] variazioni per le precedenti versioni. Se non sapete cos’è Bootstrap vi rimando alla guida su Twitter Bootstrap, essendo questa…