Bootstrap, il tool semplice per realizzare i template dei tuoi siti

Sempre alla ricerca del migliore template per il nostro sito Joomla o WordPress. Si scandaglia quindi il Web, cercando di fiutare il tema più bello e, possibilmente a costo zero. A volte, le estenuanti ricerche non hanno sempre esito positivo e così bisogna trovare un’alternativa. L’ideale sarebbe imparare a costruire un template da soli, magari con l’aiuto di un apposito strumento, come Bootstrap.

Bootstrap: tutti gli strumenti di cui necessitiamo

Per quanto molti ancora non lo conoscano, in realtà Bootstrap sta riscuotendo un notevole successo nella community degli utenti e degli sviluppatori legati al mondo dei CMS. Cosa sia Bootstrap è presto detto: è un framework di sviluppo realizzato dai creatori del noto social di microblogging Twitter, che poi lo hanno rilasciato gratuitamente e con codice aperto (licenza Apache 2.0) sul Web, pur occupandosi ancora del suo aggiornamento e del suo ulteriore sviluppo.

Così, i due capostipiti Mark Otto (@mdo) e Jacob Thornton (@fat) hanno pensato di rendere la vita più agevole a tutti, rilasciando una vera e propria cassetta degli attrezzi dotata di strumenti HTML, CSS e JS pronti all’uso.

Questo web toolkit è una collezione di convenzioni HTML e CSS, di strumenti Javascript e di molti elementi grafici (forms, bottoni, tabelle, griglie, caratteri tipografici, ecc.) utilizzabili in modo gratuito e pronti per essere inclusi in un qualsiasi progetto Web.

Le caratteristiche di Bootstrap

Questo insieme di strumenti, oltre ad essere utilizzabile gratuitamente, si caratterizza per tutta una serie di peculiarità di non poco valore. Possiamo iniziare con il dire che tutti gli strumenti sono compendiati in un archivio ZIP di ridotte dimensioni (appena 6 KB), per cui il nostro sito Web non risentirà, in termini prestazionali, dell’integrazione degli strumenti messi a disposizione da Bootstrap.

Altra caratteristica di non poco conto è la compatibilità cross-browser: in pratica, il template realizzato con questo framework non ha limiti di visualizzazione e risulterà ben visibile su tutti i browser (IE, Firefox, Chrome, Safari, etc) evitandoci così di dover scrivere codice apposito per uno specifico programma di navigazione.

Bootstrap è poi responsive, quindi il template costruito con questo toolkit risulta poi ben visibile su tutte le tipologie di dispositivi utilizzabili dagli utenti che visiteranno il sito. Inoltre, proprio in questo senso, la versione 3.0, giunta il mese scorso alla release candidate (RC), è stato ottimizzato proprio per la visualizzazione su smartphone e tablet, dimenticando il paradigma delle 12 colonne fisse su cui sviluppare il sito e supportando le immagini per i display Retina.

Come si usa Bootstrap

Una volta scaricato dal repository ufficiale, dobbiamo scompattare l’archivio, al cui interno sono contenute solamente tre cartelle con dentro le immagini, i CSS e gli Javascript che compongono il kit. Dobbiamo dunque procedere collegando i CSS e i JS alle nostre pagine, per iniziare ad usare fin da subito le classi e i plugin di bootstrap. Per compiere questa operazione, specifichiamo le due istruzioni di seguito nelle pagine HTML del nostro progetto:

Fatto questo potremo sbizzarrirci con il sistema a griglia offerto da Bootstrap per la personalizzazione su colonne del template del sito, utilizzando gli elementi CSS di base, i componenti (come le barre a menu) e i Javascript (come gli effetti accordion,carousel, tab, lightbox, ecc.) già pronti all’uso e inclusi in Bootstrap.

A chi fosse curioso di capire quali template si possono ottenere facilmente e velocemente con Bootstrap, non resta che dare un’occhiata al sito Built With Bootstrap, per comprendere le potenzialità di questo strumento!