Cos'è il Bootstrap

Bootstrap è la più nota libreria CSS e JS utilizzata per la progettazione di piattaforme web responsive, ovvero compatibili con smartphone, tablet e desktop dal punto di vista del design e dell'usabilità.

L'obiettivo principale di Bootstrap è quello di offrire uno strumento pronto per l'uso per lo startup di un progetto dal punto di vista dei componenti grafici, ma ancor di più creare un solo codice che sia contemporaneamente compatibile con tutti i dispositivi.

Come già visto in precedenza con jQuery UI, anche Bootstrap è composto da una libreria CSS e da una libreria JS.
Si precisa però che le librerie possono coesistere su uno stesso progetto senza creare contrasti di compatibilità.

Setup Bootstrap

Installazione e fondamenti della libreria

Setup Bootstrap

Per poter utilizzare Bootstrap all'interno del progetto, è necessario effettuare il download delle librerie, processo identico a quello già visto in precedenza con jQuery UI.

Link al download: http://getbootstrap.com/getting-started/

Fatto ciò, sarà possibile inserire le librerie all'interno del progetto.
Le funzionalità di Bootstrap, si suddividono in tre categorie principali:

  • CSS
  • Javascript
  • Componenti misti

A differenza di jQuery e jQuery UI, Bootstrap include anche elementi grafici e quindi funzionalità esclusive del CSS per una formattazione ottimizzata e predefinita degli elementi del DOM.
In più sono disponibili funzionalità pre-composte che includono funzioni JS con una formattazione CSS.

Setup Bootstrap

Prima di analizzare in dettaglio le funzionalità offerte da Bootstrap, è bene effettuare delle considerazioni.
L'utilizzo di questa libreria, progettata per un utilizzo responsive, prevede l'approccio mobile first, ovvero uno standard moderno della progettazione web, che prevede una logica pensata in maniera prioritaria per il mobile (smartphone e tablet) e solo in secondo luogo per i dispositivi desktop.

Questo approccio nasce proprio per seguire la tendenza sempre più evidente dell'utilizzo in mobilità degli applicativi web. All'atto pratico, si tratta dunque di studiare le interfacce del progetto, concentrandosi prima sull'utilizzo da smartphone per poi adattarlo all'uso da PC.

Per agevolare l'approccio mobile first, Bootstrap ha strutturato il sistema a griglia, tipico anche per coloro che progettano interfaccie con strumenti di design come Photoshop o Illustrator.

Setup Bootstrap

Il sistema a griglia individua per tutti i dispositivi una struttura fondata su 12 colonne.
A seconda del dispositivo le colonne avranno dimensioni diverse.

Setup Bootstrap

Bootstrap permette dunque di definire le dimensioni dei vari elementi (div o contenitori) attraverso il numero di colonne che dovranno riempire all'interno della grigla della pagina, ma soprattutto a seconda della grandezza dello schermo del dispositivo. Per ogni elemento della griglia, dovranno essere speicifcate dunque le dimensioni delle colonne per quattro risoluzioni diverse:

  • Dispositivi large (desktop risoluzione > 1024)
  • Dispositivi medium (desktop o tablet in landscape)
  • Dispositivi small (tablet in portrait o smartphone in landscape)
  • Dispositivi extra-small (smartphone)

Per specificare le dimensioni delle colonne, si utilizzano le classi CSS:

  • col-lg-XX - per dispositivi large
  • col-md-XX - per dispositivi medium
  • col-sm-XX - per dispositivi small
  • col-xs-XX - per dispositivi extra-small

XX indica il numero delle colonne da 1 a 12.
Grazie a questa caratteristica, sarà possibile far sì che uno stesso contenitore, occupi 1/3 della pagina su desktop e il 100% della pagina su smartphone.

Setup Bootstrap

Ecco dunque un esempio dei div con le loro rispettive classi Bootstrap per la dimensione delle colonne

Con il solo utilizzo di quattro classi, abbiamo dunque ottenuto una struttura perfettamente responsive.

Setup Bootstrap

Oltre alla dimensione delle singole colonne per le varie risoluzioni, è anche possibile gestirne la visibilità, utilizzando le classi visible e hidden per ognuna delle risoluzioni:

  • hidden-lg / visible-lg
  • hidden-md / visible-md
  • hidden-sm / visible-sm
  • hidden-xs / visible-xs

Di default gli elementi saranno visibili per tutte le risoluzioni.

Setup Bootstrap

La gestione delle colonne nel sistema a griglia di Bootstrap, va però accompagnata dai contenitori, ovvero elementi che racchiuderanno all'interno le ormai note 12 colonne della griglia.

Di default se non si utilizza un contenitore, le griglie fanno riferimento all'intera larghezza della pagina; per avere però tutti gli elementi perfettamente allineati fra di loro, è possibile "costringere" le colonne all'interno di righe, in modo tale che la struttura della pagina può arricchirsi di elementi e complessità strutturale.

Quando andremo a creare dunque gli elemnti con classe col, dovremo sempre racchiuderli all'interno di un contenitore con classe row, come nell'esempio.

<div class="row">
	<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
	<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>

E se ancora vogliamo mantenere ordine all'interno della griglia, opzionalmente tutte le righe, che contengono le colonne, possono essere racchiuse in un elemento contenitore con classe container, che definirà una larghezza massima predefinita per la pagina

Discover Bootstrap

Alla scoperta delle migliori funzionalità

Discover Bootstrap

Indice

Apprese le basi per la progettazione responsive di Bootstrap, passiamo ad analizzare le migliori funzionalità offerte dalla libreria, suddivise nei tre ambiti:

  • CSS
  • Componenti
  • JS

Per la guida completa di Bootrstap e per le varie funzionalità messe a disposizione, è sempre possibile consultare l'ottima documentazione ufficiale http://getbootstrap.com/

Discover Bootstrap

CSS

Per quanto riguarda il design, Bootrstap fornisce elementi di default a tutti i componenti della pagina HTML, incluso font, testo, heading tags, tabelle, form, pulsanti, etc...
Insomma il solo inserimento di Bootstrap nel proprio progetto web, permette di definire uno standard omogeneo per il design, tramite caratteristiche banali ma allo stesso tempo fondamentali per la buona consultazione delle pagine.

Per esempio Bootstrap imposta di default a tutti gli elementi, proprietà di stile come il padding, il margin, il line-height, secondo quelle che sono le migliori soluzioni approvate dal mondo del web design.

In tutti i casi, sarà comunque possibile andare a sovrascrivere le proprietà CSS impostando quelle più appropriate per il progetto in questione agendo direttamente dal foglio di stile CSS principale del progetto, senza mai sovrascrivere i file delle librerie di Bootstrap.

Discover Bootstrap

CSS

Fra le migliori opzioni di stile, troviamo:

  • Tabelle
  • Form
  • Pulsanti
  • Classi di supporto

Discover Bootstrap

CSS - Tabelle

Per la gestione delle tabelle, Bootstrap mette a disposizione strumenti per una formattazione accurata, cercando di ottimizzare al massimo la lettura dei dati.

E' sufficiente infatti aggiungere al tag table una serie di classi, per ottenere risultati eccezionali, come per esempio:

  • table: imposta la larghezza al 100%
  • table-striped: permette di alternare il colore di sfondo fra le righe della tabella
  • table-hover: permette di evidenziare le righe al passaggio del mouse
  • table-condensed: permette di stringere al massimo l'altezza delle righe

Per esempi e dettagli sull'uso, è possibile consultare il link http://getbootstrap.com/css/#tables

Discover Bootstrap

CSS - Form

Per quanto riguarda i form, oltre ad un design predefinito, Bootstrap mette a disposizione strumenti molto utili per l'impostazione degli elementi o la gestione della comunicazione con l'utente.

In particolar modo permette di:

  • creare le input group ovvero campi del form con riferimenti visivi per la compilazione
  • gestire l'allineamento dei campi del form
  • gestire la visibilità e usabilità dei vari campi
  • fornire un riscontro alla compilazione sui campi del form

Per esempi e dettagli sull'uso, è possibile consultare il link http://getbootstrap.com/css/#forms

Discover Bootstrap

CSS - Pulsanti

La gestione dei pulsanti su Bootstrap permette di definire facilmente gli elementi di action in base alla loro funzione primaria. Ogni elemento button dell'HTML, dovrà avere una classe btn e poi dovrà essere integrata con un'altra classe a scelta fra:

  • btn-primary - Pulsante principale per le azioni di base
  • btn-success - Pulsante di riferimento per le azioni positive o di successo
  • btn-info - Pulsante per le azioni informative
  • btn-warning - Pulsante per azioni che richiedono attenzione
  • btn-danger - Pulsante per azioni pericolose sul sistema

Oltre alle classi per lo stile specifico, è possibile indicare anche la dimensione dei pulsanti tramite le classi:

  • btn-sm - Pulsante ridotto
  • btn-lg - Pulsante largo

Per esempi e dettagli sull'uso, è possibile consultare il link http://getbootstrap.com/css/#buttons

Discover Bootstrap

CSS - Classi di supporto

Come già visto per i pulsanti, le opzioni primary, warning, success, etc.. possono essere usate anche per altre proprietà, come per esempio il background o il colore del testo.
Se per esempio vogliamo inserire un testo con riferimento danger, potremo usare la classe text-danger; se invece vogliamo inserire un background con riferimento danger, useremo la classe bg-danger.

Altre classi utili messe a disposizione da Bootrstap sono:

  • pull-left / pull-right: per integrare facilmente la proprietà di float del CSS
  • show / hidden: per mostrare o nascondere un elemento

Per esempi e dettagli sull'uso, è possibile consultare il link http://getbootstrap.com/css/#helper-classes-show-hide

Discover Bootstrap

Componenti

I componenti sono elementi di Bootstrap che prevedono una formattazione CSS predefinita, ma al tempo stesso necessitano generalmente di supporto JS per il corretto funzionamento (molti dei quali li vedremo dunque nella sezione JS).

Fra i principali, troviamo:

Per la gestione delle icone, si consiglia lo standard Font Awesome a differenza del Gliphicon indicato da Bootstrap. Scopri Font Awesome

Discover Bootstrap

JS

Le funzionalità JS di Bootstrap permettono di dar vita ai componenti o di integrare nuove funzionalità; analizziamo le più importanti:

Per la guida completa e maggiori informazioni sulle librerie JS http://getbootstrap.com/javascript/

Esercitazione Bootstrap

Test libero delle funzionalità

Esercitazione Bootstrap

Svillupare il progetto inTrain integrando Bootstrap, rispettando le seguenti regole:

  • Le interfacce dovranno essere responsive
  • I Form dovranno essere formattati secondo gli standard di Bootstrap
  • Per tutte le operazioni di Login e CRUD dovranno essere gestiti i messaggi di errore o di successo tramite l'utilizzo degli alert di Bootstrap
  • Dovranno essere utilizzato modal e tooltip li dove necessario (sostituendo i modal creati manualmente)

Opzionalmente sarà possibile integrare tutte le altre funzionalità ritenute idonee al fine di migliorare il progetto.

<Thank u!>

Sempre pronto a darti una mano