Bootstrap e Jquery Accoppiata Vincente

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.

porzione di codice bootstrap
Fig. 1

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?

sistema a griglia
Fig. 2

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.

Walter Fantauzzi

 

About the author: Walter

Business Model Maker