Twitter bootstrap tutorial

Twitter bootstrap tutorial

5299
27
CONDIVIDI

Oggi recensisco un’interessante guida per chi ama lo sviluppo web moderno e innovativo. Twitter bootstrap è un “framework” grafico rilasciato dal team di sviluppo di Twitter diversi mesi fa. Oggi permette di sviluppare pagine web i quali layout grazie all’integrazione del Grid System rasentano la precisione millimetrica.

Come mi agevola il lavoro?

L’ho volentieri ribatezzato “framework” poiché si basa sui concetti di “scaffolding” (impalcatura) adottato dai framework più moderni in circolazione; lo sviluppatore non deve preoccuparsi di impostare la parte più noiosa del markup (in questo caso, css, struttura, ecc..) poiché questa è già bella e pronta.

Cosa comprende Bootstrap?

E’ un aggregato di diversi progetti:

  • Grid System:
    Dal progetto ufficiale:
    960 Grid System è uno sforzo per snellire lo sviluppo del flusso di lavoro su web, fornendo le dimensioni comunemente utilizzate, sulla base di una larghezza di 960 pixel. Ci sono due varianti: 12 e 16 colonne, che possono essere utilizzate separatamente o in tandem! Utilizzando Grid System avrete dei layout impaginati in maniera perfetta!
    URL ufficiale del progetto
  • Less:
    E’ una tecnica di refactoring css, sostituita al foglio di stile permette di assegnare costanti su proprietà che all’interno di un normale css si ripeterebbero all’infinito. Un esempio concreto potrebbe essere il seguente.
    URL di approfondimento
  • Bootstrap Tutorial:
    Ultimo ma non meno importante dei tre, contiene la logica e i componenti grafici che permettono la realizzazione di un lavoro perfetto e adattabile a seconda delle nostre esigenze.
    URL ufficiale di Twitter Bootstrap

Perché utilizzare bootstrap?

Una serie di piccoli accorgimenti che fanno la differenza:

Twitter e la sezione aurea

twitter e il rapporto aureo
Un simposio sulla sezione aurea in Twitter

La sezione aurea, indica il rapporto fra due lunghezze disuguali, delle quali la maggiore è medio proporzionale tra la minore e la somma delle due. Lo stesso rapporto esiste anche tra la lunghezza minore e la loro differenza.

Tutto ciò che è in rapporto aureo è piacevole e gradevole all’occhio umano. Utilizzando bootstrap, il vostro lavoro sarà più gradevole dal punto di vista dell’impatto visivo.

Velocità di sviluppo

Bootstrap vi porta già a metà dell’opera e risparmia la parte di sviluppo più noiosa. Con lo scaffolding sarà un gioco da ragazzi mettere in piedi il vostro layout.

Layout responsive

Attribuendo una semplice classe potrete gestire il lato responsive del vostro layout rendendolo automaticamente compatibile per mobile e tablet.

Sei curioso di sapere come funziona a fondo il responsive web design?
QUI potrai trovare una serie di utili approfondimenti

Componenti integrati

I componenti javascript più utilizzati sono già inclusi all’interno del framework (carousel slider, modali, popup, e quant’altro), questo riduce a zero la possibilità di incorrere in conflitti fra librerie aumentando l’affidabilità del progetto web.

Come funziona?

Iniziare con bootstrap è semplicissimo, le soluzioni sono 2:

Dichiarare il file bootstrap.css nella sezione head del vostro progetto:

 

Ora possiamo divertirci!

Scaffolding

Proprio come degli operai, la prima cosa da fare per iniziare la costruzione di un piano di un palazzo è montare l’impalcatura.

Il concetto del grid system è quello di lavorare a “griglie” di 12 (default di bootstrap), e parte dalla fase embrionale di un lavoro: l’analisi concettuale del progetto e l’impostazione del mockup.

Esempio di layout a dimensioni fisse:

 

 

Esempio di layout responsive:

 

 

Come avrete notato negli esempi la sintassi è molto semplice, il concetto è sempre quello di formare righe da 12 (span4 + span8 = span12) in modo tale da incolonnare perfettamente anche tutti gli elementi sottostanti (che fatica farlo manualmente!).

Altri esempi

Questo esempio indica una riga di classe “row-fluid” (responsive) che riempie 8 colonne col contenuto e 4 colonne vuote (offset).

 

 

Righe innestate in un layout a dimensioni fisse:

 
Primo livello

Livello 2

 

Livello 2

 

 

Semplice, no?

Riepilogo attributi

In questa tabella illustrativa ci sono gli attributi principali da utilizzare in fase di progettazione tecnica:

Layout fisso Layout responsive/liquido Descrizione
container container-fluid classe da attribuire al div contenitore di tutto il sito
row row-fluid classe che identifica la riga
spanN spanN classe identifica una colonna
offsetN offsetN classe che identifica l’offset di una colonna

Responsive layout

Senza tanta fatica è possibile rendere responsive un intero sito web realizzato con bootstrap seguendo le seguenti semplici linee guida:

Viewport

Nella sezione head del vostro sito va dichiarato un meta tag “viewport”:

 

 

Nascondere o mostrare gli elementi

E’ davvero ridicolo se penso a come bootstrap ha reso più semplice possibile il modo di eliminare o nascondere degli elementi a seconda del tipo di device. Il teem di sviluppo ha pensato a 3 possibili casistiche:

    • Desktop: se il device corrente appartiene alla categoria dei pc;

 

  • Tablet: se il device corrente appartiene alla categoria dei tablet;

 

 

  • Phone: se il device è uno smartphone;

 

 

Tutto questo all’interno del CSS! Come? Ecco un esempio concreto:

 

 

 

 

In questo caso ho 2 div che contengono 2 informazioni diverse ma in versione desktop voglio che si visualizzi il primo mentre in versione phone il secondo. Per il primo div ho utilizzato una classe visible-desktop mentre per il secondo visible-phone, entrambe classi proprietarie di bootstrap.

Stupido ma allo stesso tempo geniale!

Ecco qui una tabella illustrativa recuperata direttamente dal sito ufficiale del progetto:

Twitter bootstrap responsive properties

Plugins

Oltre allo scaffold, al css e a tutte le cose spiegate precedentemente, gli sviluppatori di bootstrap hanno ben pensato di portarsi dietro una serie di plugins javascript, più utilizzati sul web. Bootstrap di fatti supporta:

  • jQuery carousel: slider di immagini e contenuti testuali; [Link]
  • Modali: per la comparsa di popup in modalità “elegante”; [Link]
  • Dropdown: ampio supporto per i menu a “tendina”; [Link]
  • ScrollSpy: eleganti scroll di testo; [Link]
  • Toggle: tab di contenuti; [Link]
  • Tooltips: simpatiche aree di messaggistica; [Link]
  • Popovers: div di contenuti a comparsa (passaggio del mouse); [Link]
  • Alerts: gestione grafica e dinamica dei messaggi di alert; [Link]
  • Buttons: bottoni con effetti animati in stile “Twitter”; [Link]
  • Collapse: o meglio conosciuti come accordion; [Link]
  • Typeahead: per l’autocomplete dei campi; [Link]

Tutto questo senza cambiare framework! Noterete ovviamente che molti problemi di incompatibilità saranno risolti grazie a bootstrap.

Componenti

La cosa più divertente è perdervi nei componenti che il framework mette a disposizione. Sono davvero tanti e ben fatti!
Beccatevi l’indirizzo per spulciarveli uno ad uno.

Alcuni esempi?

Bootstrap è utilizzato da migliaia di designer ed è attualmente uno dei trend per lo sviluppo di pagine web. Built with bootstrap è un sito che raccoglie uno showcase dei siti web realizzati con questo framework.

Bootstrap, tema per WordPress

Il mio sviluppo accanito (wordpress+bootstrap) ha fatto si che creassi un tema per Wp che racchiudesse tutte le features di Boostrap, l’ho reso disponibile su GitHub all’indirizzo: https://github.com/mari0bros/Mc-Responsive;

Tra le features più interessanti, puoi configurare dalle impostazioni di wordpress:

  • Se il layout può essere fisso o liquido;
  • Se il layout può essere responsive o meno;
  • Se impostare la classica top-bar di bootstrap;
  • Gestire l’attivazione dei pulsanti di condivisione.

Tra l’altro potete osservare le features del tema grazie alla nuova veste grafica di questo blog, interamente sviluppato con bootstrap.

Twitter bootstrap 3

AGGIORNAMENTO: se stai leggendo questo articolo, potrà sicuramente interessarti capire come funziona la nuova release di Twitter Bootstrap. Non preoccuparti, leggere questo tutorial non è stato inutile, poiché molte nozioni sono presenti anche nella nuova versione.

> Twitter bootstrap 3 – leggi la guida

Recensioni
Autore
Fabrizio Serra
Data
Articolo
Twitter Bootstrap Esempi
Voto
5
  • Sato

    Gran bell’articolo e gran bel lavoro!

  • Pierpaolo Cerna

    Ottimo lavoro. Molto meglio questa veste grafica…..tra l’altro ho anche lavorato con bootstrap e devo dire che è molto potente, soprattutto considerando l’utilizzo di less css 😉

  • fabiana

    in fase di design ho utilizzato spesso GS, abbinato con bootstrap lo rende uno strumento davvero potente e di qualità.

    • alfonso

      scusa, cosa intendi per gs?

    • robby

      gs starebbe per grid sytem “sistema a griglie” 960gs è uno dei primi

  • Qualche contro in tutto questo c’è però. La ulteriore standardizzazione dei layout e delle loro dinamiche.

    • Patrik

      sicuramente, però davvero in pochi possono andare oltre le righe ed essere in grado di rendere diverso ciò che sembra schematico.

  • fabio conchiglia

    Le tue guide sono come al solito molto complete ed esaurienti….anche un impedito come me riesce a capirci qualcosa :)

  • Abbastanza potente come framework! :)
    Ottimo Articolo, complimenti!

  • Lori

    Ciao!
    Domanda da un milione di dollari: ma.. se io invece avessi un layout a 5 colonne in modalità iphone, come faccio? O_O Lo posso usare lo stesso questo framework?

    • In quel caso dovresti aiutarti con le tecniche responsive magari adattando ad una sola colonna il contenuto con visualizzazione a cascata, sarebbe più logico.

  • silvia

    ciao
    Complimenti per l’articolo ..

    mi puoi aiutare con Toggle: tab di contenuti..
    per caricare delle inclusioni di file in php in target specifici.

    es: tab 1 | tab 2…
    div>result</div

    tab 1= file1.php
    tab 2= file2.php
    ….
    grazie

  • Ruggero

    Ciso scusate ma sto imparando ora. È possibile installare boostrapnsu dreamwever? Se si come? Se no come si usa boostrap? Scusate ancora l ignoranza spero possiate aiutarmi
    Ciao e grazie

    • Non capisco cosa intendi per “installare”. Bootstrap può essere vista come un’integrazione di un progetto web, per cui se segui la guida è molto semplice utilizzarlo.

  • Daniele

    Salve una domanda come posso integrare il mio foglio di stile con il bootstrap ?

    • Assolutamente, ricordando sempre il principio a cascata dei fogli di stile è possibile farlo.

  • Daniele

    Grazie per la risposta, un’ultima domanda, se io imposto il mio layout responsive con le keyword specificate nella guida ufficiale per definire quali elementi visualizzare nei diversi dispositivi, la grandezza dei font la devo specificare di em per ogni media queries ?

  • Complimenti per l’articolo, davvero molto utile!

  • Mi sono approcciato da poco a questo potente framework, scoprendo ogni giorno le sue potenzialità e caratteristiche. Formidabile!

  • Alessandro Minoccheri

    Twitter bootstrap è un framework che non apprezzo in quanto tutti i siti alla fine sono uguali e non da possibilità di ucire dai suoi schemi, ancora troppo limitativo…

  • Michele

    Ciao, innanzi tutto bell’articolo. Poche righe ma molto ben spiegate. Avrei una domanda da farti, se possibile. Io non uso più wordpress perchè mi sono spostato su drupal. Volevo chiederti una cosa. Ho visto in giro parecchi temi interessanti per bootstrap. Siccome sono un neofita, è possibile secondo te prenderli ed usarli all’interno del proprio CMS senza modifiche?
    Grazie in anticipo per la risposta. Ciao

    • Ciao,
      assolutamente! Questo è un progetto free che può essere integrato in qualsiasi ambiente di svilupo, nel tuo caso drupal.

  • Complimenti, ottimo articolo molto dettagliato.

  • Grazie a tutti per i complimenti, in realtà da pochi mesi è stata rilasciata la versione 3 di Bootstrap con delle features davvero interessanti.

    Sto preparando un articolo di “upgrade” che pubblicherò a settembre.

  • Lox

    Complimenti davvero per l’articolo/guida, è molto interessante e ben scritto.

    L’unica cosa è che andrebbero aggiornati i link da quando Twitter ha spostato tutto da GitHub ad un dominio dedicato: http://getbootstrap.com/
    (senza curare i redirect purtroppo)

  • Michele

    Se ti interessa ho pubblicato questo articolo su Bootstrap che potrebbe approfondire quanto detto sul tuo articolo:
    http://www.dynamick.it/ecco-twitter-bootstrap-rivoluziona-lo-sviluppo-applicazioni-web-10247.html

    • Articolo interessante. E’ un piacere condividerlo.