Twitter Bootstrap: tutorial, template e icons [FOTO]

Twitter Bootstrap è un 'framework' intuitivo ed elegante per creare pagine in HTML in tempi brevi

da , il

    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

    Twitter Bootstrap esempio Hallo World

    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

    Twitter Bootstrap template

    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

    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

    Twitter Bootstrap 3 inizia

    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.