Twitter Bootstrap: tutorial, template e icons [FOTO]

Questo tutorial su Twitter Bootstrap ed i suoi template permette di farci un’idea abbastanza chiara su cos’è e che potenzialità ha questo prodotto. Si tratta di una collezione di elementi grafici, e di javascript pronti per l’uso e disponibili gratuitamente grazie al lavoro di Mark Otto e Jacob Thorton. Twitter Bootstrap offre una scorciatoia agli sviluppatori HTML per velocizzare enormemente i tempi di sviluppo dei siti ma allo stesso tempo permette di conservare un interfaccia funzionale e pulita oltre che coerente. Per poter utilizzare Twitter Bootstrap è comunque necessario essere in possesso di conoscenze informatiche basilari nello sviluppo di pagine in HTML ed in generale sulla programmazione ad oggetti in quanto è necessario manipolare delle classi. Creare layout belli e in tempi brevi non è più un problema con Twitter Bootstrap grazie anche ai numerosi template che possono essere scaricati dal sito ufficiale e non solo. Andiamo a vedere come risparmiare tempo nel creare siti belli e di qualità.

Twitter Bootstrap tutorial

Questo breve tutorial di Twitter Bootstrap non ha la pretesa di spiegare tutte le sue funzionalità in quanto sono numerose e spesso comprensibili solo per i più esperti. Possiamo però fare un quadro generale del suo utilizzo e degli strumenti che mette a disposizione. Innanzitutto è possibile effettuare il download dal sito ufficiale di Twitter Bootstrap e spacchettare il file in una cartella specifica sul desktop. Troveremo tre cartelle all’interno del pacchetto una con le immagini e le altre due una con CSS e l’altra con Javascript. Questi ultimi due dovranno poi essere collegati alle vostre pagine HTML in modo che ne possiate usare le classi ed i plug-in.

Gli elementi basilari di Twitter Bootstrap sono:

• Un grid system cioè una griglia fluida o fissa che può essere suddivisa in righe e colonne personalizzate e al quale poi possono ancorarsi sidebar, bottoni, banner ecc. E’ uno strumento molto preciso.
• Javascript una serie di query e plug-in molto utili che aggiungono elementi come lightbox, tab, carousel e tanti altri
• Elementi di base di CSS in quanto ogni pagina ha gli elementi comuni a tutti i siti come tabelle, form, bottoni, immagini. Molto utile al fine di orientarsi con tali elementi è la documentazione reperibile sempre dal sito ufficiale.
• Componenti complessi cioè elementi che possono funzionare in gruppo e che hanno un’interazione sofisticata con gli utenti come menù a tendina, paginazioni, barre di progresso ecc.

Twitter Bootstrap è un buon prodotto che permette di ridurre i tempi di programmazione dei siti web senza avere per altro una perdita di qualità nel risultato finale.

Twitter Bootstrap template free

Esistono molti template free da utilizzare con Twitter Bootstrap e che si possono scaricare dal sito Bootswatch. Un template non è altro che una struttura base precompilata di un layout nel quale viene proposto un tema di sfondo e una determinata organizzazione di alcuni elementi. Possiamo creare un nuovo layout partendo da un template e modificandolo a nostro piacimento con Twitter Bootstrap. L’utilizzo dei template è l’ideale per una progettazione veloce ma anche meno personalizzata rispetto al progetto iniziato da zero.

TWITTER ANCORA PIU’ SOCIAL CON IL FOLLOW BUTTON

Twitter Bootstrap icons

Con Twitter Bootstrap è possibile utilizzare anche icons e font Glyphicons. Si tratta di collezioni di icone e font che si basano sulle glyph. Glyphicons è il set di icone che sono integrate in Twitter Bootstrap. La particolarità di questi font è che tutti i caratteri, caratteri speciali ed icone sono conservati su un singolo file in formato PNG in modo da poter gestire un unica immagine con grande risparmio di memoria e velocità di visualizzazione.

Twitter Bootstrap 3

Meno di un anno fa si è avuta la release con l’aggiornamento a Twitter Bootstrap 3 che aumenta la potenzialità di questo prodotto con alcune novità. Innanzitutto è stata introdotta una grafica completamente ‘flat’ ed è stato migliorato l’approccio per le applicazioni su dispositivi mobili. Un nuovo sistema di griglie gestisce in modo semplice la visualizzazione su tutti i tipi di schermo compresi quelli di grande formato e quelli dei tablet e degli smartphone. Infine sono stati aggiunte nuove icon e font Glyphicons.