BOOTSTRAP

Workshop “Bootstrap vs Foundation” 18 Febbraio 2015 - Comm-it

Docente: Antonio Russo

antonio@porp.it

BOOTSTRAP• È il progetto più popolare sulla piattaforma GitHub, con oltre 58.000 star e più di 20.000 fork;

• Secondo recenti statistiche tracce del codice di questo framework si ritrovano sull’1% dei siti web mondiali, una cifra che tradotta in termini assoluti si traduce in un numero senz’altro ragguardevole;

• Gode di un supporto nella community degli sviluppatori che non ha pari rispetto agli front-end framework;

• Chi lo usa può contare su una mole enorme di risorse e ausilii di ogni tipo;

• È diventato una sorta di standard de facto come punto di partenza in ambiti come la creazione di template HTML preconfezionati e temi per i principali CMS, soprattutto in un’ottica responsiva.

(fonte: HTML.it)

un pò di numeri:

FRAMEWORK FRONTEND• Insieme di componenti CSS + JS + HTML atte a desrivere e definire i più comuni pattern di UI/UX

• Sistema di griglie che possa garantire la visualizzazione e l’integrità del layout su più piattaforme

• Garantire compatibilità e scalabilità su browser più datati NB: questo non significa che tutti i framework frontend lo facciano al 100%, per esempio Bootstrap lo fa a determinate condizioni, quelle cioè, che siano integrati dei javascript adatti.

http://getbootstrap.com/http://creativemoka.com/commit.zip

ASSETS DI UN PROGETTO BOOTSTRAP

Bootstrap viene distribuito in un unico file .zip contenente solo le directory: fonts, js, css senza HTML di base (index.html) che potremo inserire noi per organizzare la struttura del nostro sito in piena libertà.

Dipendeze:

SISTEMA DI GRIGLIEIl sistema di griglie di Bootstrap è organizzato in 12 colonne ed è pensato per realizzare layout responsivi.

La dimensione di ogni colonna è data quindi dalla percentuale in larghezza che essa occuperà all’interno dello spazio.

Ogni colonna può assumere di conseguenza una certa dimensione in relazione al suo contenitore, questo è un ottimo stratagemma per implementare layout responsive.

SISTEMA DI GRIGLIEMarkup HTML in dettaglio:

<div class=“row”> <div class=“col-md-4”> … </div> <div class=“col-md-4”> … </div> <div class=“col-md-4”> … </div>

</div>

col-md-4 col-md-4 col-md-4

Risultato:

La casse “row” serve a definire una riga di elementi “col-*-*”, in una .row non ci dovrebbero essere più di 12 colonne ((o una combinazione di col-*-* il cui risultato è comunque 12)).

Quindi una row è un’insieme di colonne disposte orizzontalmente

SISTEMA DI GRIGLIEAltro esempio:

<div class=“row”> <div class=“col-md-6”> … </div> <div class=“col-md-4”> … </div> <div class=“col-md-2”> … </div>

</div> <div class=“row”>

<div class=“col-md-3”> … </div> <div class=“col-md-3”> … </div> <div class=“col-md-3”> … </div> <div class=“col-md-3”> … </div>

</div>

col-md-6 col-md-4 col-md-2

col-md-3 col-md-3 col-md-3 col-md-3

SISTEMA DI GRIGLIESemantica delle colonne:

In Bootstrap sono previsti 4 breakpoint fondamentali: Il primo, non inserito in una media query, è per schermi con larghezza inferiore a 768px (ovvero larghi fino a 767px). Il secondo è per schermi con larghezza minima di 768px. Il terzo per schermi con larghezza minima di 992px. Nel quarto breakpoint la larghezza minima è di 1200px.

(fonte: HTML.it)

/* Primo breakpoint: Schermi fino a 767px */ /* Nessuna media query */ /* Secondo breakpoint: Schermi larghi da 768px in su */ @media (min-width: 768px) { ... } /* Terzo breakpoint: Schermi larghi da 992px in su */ @media (min-width: 992px) { ... } /* Quarto brekpoint: Schermi larghi da 1200px in su */ @media (min-width: 1200px) { ... }

SISTEMA DI GRIGLIESemantica delle colonne:

A ciascun breakpoint è associato uno specifico prefisso nella definizione delle classi per la griglia:

• Primo breakpoint: col-xs-* (extra-small).

• Secondo breakpoint: col-sm-* (small).

• Terzo breakpoint: col-md-* (medium).

• Quarto brekpoint: col-lg-* (large).

L’asterisco va sostituito con un numero da 1 a 12 che indica il numero di colonne occupato da un elemento.

Passando da un breakpoint all’altro, ovvero al variare della larghezza dello schermo, le colonne si adattano in larghezza a volte

andandosi a posizionare una sotto l’altra.

Il responsive è servito

(fonte: HTML.it)

SISTEMA DI GRIGLIETabella riassuntiva:

SISTEMA DI GRIGLIE

Questo significa che ogni .row e quindi ogni suo contenuto si adatterà al 100% all’interno di una

pagina? Se volessi un layout centrato?

SISTEMA DI GRIGLIEIntroduciamo i .container

Le .row che definiscono gruppi di colonne tenderanno ad espandersi al 100% all’interno del loro contenitore, di fatto, perché non hanno una dimensione definita, quindi se il contenitore di una .row è la pagina stessa allora questa occuperà il 100% dello spazio disponibile.

.row { margin-right: -15px; margin-left: -15px;

}

Per ovviare a questo problema, Bootstrap, introduce i container.

Cioè una classe CSS adatta a contenere un numero di .row, ogni .row dovrebbe quindi essere figlia diretta di un container. I container seguono i breakpoint che abbiamo definito precedentemente.

Ci sono 2 classi CSS disponibili per i container:

i .container-fluid che ricoprono l’intera dimensione del viewport ed i .container per layout a dimensione fissa

SISTEMA DI GRIGLIERiassumendo:

• Le .row devono essere inserite in un .container o in un .fluid-container

• Le .row vengon usate per creare gruppi di colonne ( .col-*-* )

• I contenuti dovrebbero essere inseriti all’interno delle colonne e le colonne dovrebbero essere figlie dirette delle .row

• Classi come, per esempio, col-md-4 o col-xs-12, sono disponibili per creare layout griglia

• Le colonne creano spazi tra di loro utilizzando il padding (15px).

• Le colonne sono definite usando un numero da 1 a 12 che indica in percentuale lo spazio che esse dovranno occupare nello

spazio, quindi se volessimo incolonnare 3 colonne una di seguito all’altra dovremmo usare 3 colonne con classe col-md-4.

• Se in una .row ci sono più di 12 colonne, le successive verranno visualizzate in una nuova .row

SISTEMA DI GRIGLIETips:

• E’ possibile innestare più conteiner all’interno di uno stesso container.

• E’ possibile aggiungere più classi ad una colonna per esempio:

<div class=“row”> <div class=“col-md-3 col-xs-6”> … </div> <div class=“col-md-3 col-xs-6”> … </div> <div class=“col-md-3 col-xs-6”> … </div>

</div>

CLASSI DI VISIBILITÀPuò essere utili ai fini del layout nascondere alcuni elementi o visualizzarli solo a determinate dimensioni di schermo.

Bootstrap mette quindi a disposizione le classi di visibilità:

• visible-xs per extra-small;

• visible-sm per small

• visible-md per medium;

• visible-lg per large.

COMPONENTI

PULSANTI E GLYPHSBootstrap provvede ad offrire una serie di classi per pulsanti e relative icone.

<a href=“#” class=“btn btn-default”>Pulsante</a>

<button type=“submit” class=“btn btn-default”>Pulsante</a>

<a href=“#” class=“btn btn-default”><span class=“glyphicon glyphicon-plus”> Pulsante</a>

<button type=“submit” class=“btn btn-default”><span class=“glyphicon glyphicon-plus”> Pulsante</a>

La classe btn-default provvede a colorare il pulsante di bianco, esistono altre 5 classi colore che possono essere usate al

posto di questa per colorare diversamente il pulsante, nello specifico:

btn-primary, btn-success, btn-info, btn-warning, btn-danger

NAVBARLe Navbar sono forse uno degli strumenti più usati di Bootstrap e servono a definire le tipiche di navigazione orizzontale che

troviamo maggiormente online negli header dei siti web.

Le Navbar di Bootstrap, inoltre, su mobile vengono visualizzate come un tipico menù a discesa.

http://getbootstrap.com/components/#navbar

CAROUSELE’ un componente per creare slider di immagini, non prevede sliders innestati.

http://getbootstrap.com/javascript/#carousel

TAB

http://getbootstrap.com/javascript/#tabs

Permette di organizzare i contenuti locali in tab selezionabili, è possibile gestire anche il tipo di animazione

LINKS & UTILITIES

http://nakupanda.github.io/bootstrap3-dialog/

http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html

http://msurguy.github.io/ladda-bootstrap/

http://jhollingworth.github.io/bootstrap-wysihtml5/