Mi sono permesso di utilizzare un’immagine molte significativa presa in prestito da un film di Bud Spencer e Terence Hill, quale riferimento appropriato per questa accoppiata Bootstrap e Jquery. Un connubio perfetto per realizzare in tempi brevi un sito responsive e dinamico secondo i canoni attuali del web. Per chi fosse digiuno di web, questi due nomi rappresentano un’insieme di tool (di utensili) per snellire molto il lavoro del web designer.
Bootstrap è un insieme di elementi grafici, stilistici, di impaginazione e Javascript pronti all’uso. Sono nati in seno a Twitter ad opera degli sviluppatori Mark Otto e Jacob Thornton. Ad oggi Bootstrap risulta essere un progetto indipendente a disposizione degli sviluppatori di tutto il mondo che sono liberi di utilizzare questo framework come base per i propri progetti web. Questo framework ci offre i una serie di mattoncini con cui costruire pagine web HTML5, completamente responsive, coerenti e funzionali.
L’utilità di Bootstrap è immediatamente evidente, soprattutto nella situazione attuale in cui le pagine web possono essere fruite su una miriade di dispositivi con caratteristiche diverse, quali Smartphone, Tablet e Personal Computer. Ci penserà Bootstrap ad occuparsi di mettervi a disposizione elementi di stile che permettono alla pagina di adattarsi al dispositivo utilizzando, al contempo, elementi di interfaccia comuni ai siti moderni per fidelizzare gli attuali users.
Bootstrap contiene essenzialmente 4 aree Scaffolding (o meglio l’impalcatura), css base, componenti (pulsanti, barre di navigazione, menu a discesa) e Javascript. Grazie al sistema Scaffolding, che ci offre tramite un sistema a griglia, possiamo con una serie di classi definire le aree e gli spazi nella schermata in modo matematico e fluido. In figura 2 viene mostrato uno schema a griglia generico a cui fare riferimento di tipo 12 colonne. Praticamente con la sola definizione di una classe in un div, per esempio class=”col-md-2″, avremo già una larghetta predefinita auto adattabile alla schermata.
Semplice vero?
Il CSS base, contiene degli stili predefiniti per diversi elementi della pagina, come ad esempio i titoli (H1, H2,…), le tabelle, i pulsanti, gli elementi dei form, le immagini ecc… Con queste regole di stile la realizzazione di pulsanti in varie dimensioni, dai bordi smussati, con un effetto over diventa semplice e immediato. Lo stesso vale per la creazione di una tabella con righe a colori alterni. Nel primo caso, basta applicare una delle moltissime classi disponibili, come class=”btn btn-primary” o class=”btn btn-default btn-lg”, nel secondo, basta applicare alla tabella la classe class=”table table-striped”.
Le Componenti contengono elementi più complessi di pulsanti o tabelle, ma ormai molto comuni nei siti web. Ad esempio, gruppi di pulsanti, barre di navigazione, menu a discesa ed altro ancora. Tra questi sono compresi anche un set di icone, o meglio di glifi (dato che non si tratta di immagini ma di caratteri) di uso comune, messe a disposizione da Glyphicons. Le icone Glyphicons di solito sono a pagamento, ma il test distribuito con Bootstrap è gratuito. I creatori di Bootstrap suggeriscono a chi le usa di inserire, se possibile, un link al sito Glyphicon a mo’ di ringraziamento. Come avrete sicuramente già intuito, le icone si utilizzano tramite apposite classi.
Volete creare un pulsante base con l’icona di una stella? Semplicissimo, create il pulsante con la sua classe e al suo interno inserite l’icona che vi occorre con elemento <span> di una apposita classe:
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> </button>
Mentre ancora più semplice sarà creare un menù a discesa
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Uno</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Due</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Tre</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1"href="#">A</a></li>
</ul>
</div>
Nell’ultima area, quella Javascript, sono contenuti diversi plug-in jQuery per realizzare effetti come transizioni, finestre modali, popup, carousel, accordion, tab. Anche questi plug-in sono semplici da usare e vi permettono di realizzare tantissime soluzioni interessanti.
In conclusione Bootstra + Jquery può essere un’ottima alternativa per la realizzazione di siti “on the fly” in tempi brevi.