Antonio Russo presenta il workshop di CommitUniversity dedicato a Bootstrap

2. BOOTSTRAP
Workshop “Bootstrap vs Foundation”
18 Febbraio 2015 - Comm-it
Docente: Antonio Russo
antonio@porp.it

3. 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:

4. 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

5. 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:

6. SISTEMA DI GRIGLIE
Il 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.

7. SISTEMA DI GRIGLIE
Markup 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

8. SISTEMA DI GRIGLIE
Altro 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

9. SISTEMA DI GRIGLIE
Semantica 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) { ... }

10. SISTEMA DI GRIGLIE
Semantica 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)

11. SISTEMA DI GRIGLIE
Tabella riassuntiva:

12. 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?

13. SISTEMA DI GRIGLIE
Introduciamo 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

14. SISTEMA DI GRIGLIE
Riassumendo:
• 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

15. SISTEMA DI GRIGLIE
Tips:
• 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>

16. 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.

17. COMPONENTI

18. PULSANTI E GLYPHS
Bootstrap 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

19. NAVBAR
Le 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

20. CAROUSEL
E’ un componente per creare slider di immagini, non prevede sliders innestati.
http://getbootstrap.com/javascript/#carousel

21. TAB
http://getbootstrap.com/javascript/#tabs
Permette di organizzare i contenuti locali in tab selezionabili, è possibile gestire anche il tipo di animazione

22. LINKS & UTILITIES

23. 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/