1.
Bootstrap
Introduzione
Riferimenti e fonti: http://getbootstrap.com
B
Matteo Madeddu
Dipartimento di Informatica Torino

2.
B
- Nasce a metà del 2010 a Twitter;
- Viene mostrato durante la prima HackWeek dei team di sviluppo;
- Viene rilasciato pubblicamente su Github il 19 Agosto 2011;
- Con due major release (v2 e v3) per un totale di più di 20 release
diverse, diventa il progetto più seguito sulla piattaforma;
- A giugno 2014 detiene ancora questo record;
Qualche nota storica…

3.
B
Funzionalità
Bootstrap permette tramite l’uso di HTML, CSS e Javascript di
impaginare facilmente il contenuto di una pagina web
Inoltre è possibile lavorare sullo stile e (in minima parte) sull’animazione
di molte componenti della pagina (bottoni, form, modal, immagini)
Tutto questo senza doversi preoccupare di gestire eccezioni e risultati
inaspettati derivati dall’uso di web browser differenti

4.
B
Gli strumenti
Vediamo
- Come importare Bootstrap;
- Come creare un layout di pagina (il grid system);
- Le principali componenti (button, form, alert, navbar);
- Altre componenti Javascript (modal, scrollspy, alert, carousel);

5.
B
Utilizzo
Come qualsiasi foglio di stile o script, è possibile includere Bootstrap
in una pagina web linkando le risorse nell’header della pagina
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/
bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-
theme.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- step 1 di 4: importare bootstrap-->

6.
B
Utilizzo
Bootstrap fa uso del grid system per posizionare il contenuto
della pagina: tramite l’uso di classi appositamente create
ogni componente viene incapsulata all’interno di righe e colonne
Per usufruire del grid system, Bootstrap impone che l’intero
contenuto di una pagina sia all’interno di un container
<div class=“container"> …html page… </div>
oppure
<!--for a full width container spanning the entire width of your viewport-->
<div class=“container-fluid“> …html page… </div>
<!-- step 2 di 4: impostare il layout-->

7.
B
Utilizzo
Si usa il grid system per posizionare il contenuto della pagina:
tramite l’uso di classi appositamente create ogni componente viene
incapsulata all’interno di righe e colonne
<!-- step 2 di 4: impostare il layout-->

8.
B
Utilizzo
Si può suddividere orizzontalmente la pagina in row, e ogni row in (al
massimo) 12 column. Ad esempio, l’immagine di prima è ottenuta con
<div class="row">
<div class=“col-md-1”>.col-md-1</div> //ripetuta 12 volte
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<!-- step 2 di 4: impostare il layout-->

9.
B
Utilizzo
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<!-- step 2 di 4: impostare il layout-->

10.
B
Utilizzo
<!-- step 2 di 4: impostare il layout-->

11.
B
Utilizzo
<!-- step 2 di 4: copia-incollare un layout-->
http://getbootstrap.com/getting-started/

12.
B
Utilizzo
<!-- step 3 di 4: usare le componenti-->
Definito il layout di pagina, si possono usare altre classi css
per decorare rapidamente bottoni e input form o per creare
strutture comuni come barre di navigazione e dropdown menu
Ad esempio
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

13.
B
Utilizzo
<!-- step 3 di 4: usare le componenti-->

14.
B
Utilizzo
<!-- step 3 di 4: usare le componenti-->
Allo stesso modo, è possibile creare form o inline-form
<form class="form-inline" role=“form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>

15.
B
Utilizzo
<!-- step 3 di 4: usare le componenti-->
Alert di varia natura e barre di navigazione

16.
B
Utilizzo
<!-- step 3 di 4: usare le componenti-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle=“dropdown”>Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role=“menu">
<li><a href=“#">Action</a></li>
<li class=“divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
</ul>
</li>
</ul>
</div>

17.
B
Utilizzo
<!-- step 4 di 4: le componenti javascript-->
L’utilizzo di Javascript permette di creare pagine web che rispondono
in modo reattivo alle richieste dell’utente
Bootstrap mette a disposizione alcune componenti che fanno uso
combinato di CSS e Javascript per realizzare animazioni e interazioni
classiche
Un esempio sono i modal (dialog prompt flessibili e multi funzione) o
le transizioni tramite scrollspy che permettono di aggiornare
dinamicamente le barre di navigazione in base allo scrolling della
pagina

18.
B
Utilizzo
<!-- step 4 di 4: le componenti javascript-->
Il video del modal in azione è stato registrato alla pagina:
http://getbootstrap.com/javascript/#modals

19.
B
Utilizzo
<!-- step 4 di 4: le componenti javascript-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role=“dialog"
aria-labelledby=“myModalLabel” aria-hidden=“true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss=“modal">
<span aria-hidden="true">&times;</span><span class=“sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>

20.
B
Utilizzo
<!-- step 4 di 4: le componenti javascript-->
Il video dello scrollspy in azione è stato registrato alla pagina:
http://getbootstrap.com/javascript/#scrollspy

21.
B
Utilizzo
<!-- step 4 di 4: le componenti javascript-->
Alcune funzionalità come quella dello scrollspy possono essere
implementate senza far uso di Javascript ma solo grazie all’utilizzo
di data-attribute
In generale, per ogni componente (Javascript e non) sul sito è
sempre specificato cosa è necessario impostare (a livello di attributi
o dipendenze) affinché la componente funzioni
Ad esempio, lo scrollspy per funzionare richiede l’uso di una
navbar, la componente che abbiamo visto prima

22.
B
Utilizzo
<!-- step 4 di 4: le componenti javascript-->
Oltre a quanto già visto, tramite Javascript è possibile impostare
alert sui form, o carousel che permettono di scorrere una selezione
di immagini in modo automatizzato
E’ possibile estendere le funzionalità dei modal tramite plugin che si
appoggiano alle funzioni offerte da Bootstrap, inserendo ad
esempio un video di YouTube all’interno del modal stesso

23.
B
Varianti
Esistono varianti nate dalle fork del progetto originale (o da progetti
indipendenti) altrettanto valide, che spesso forniscono estensioni
delle funzionalità offerte dalle librerie originale
Tra queste ricordiamo Foundation (front-end framework usato da
FitStar), Ink, Pure, YUI, etc

24.
B
Conclusioni
Il codice sorgente fa uso due dei più popolari prepocessor per CSS:
Less e Sass
Flask, Symfony, Joomla, Wordpress e tanti altri permettono di
integrare le librerie necessarie al suo funzionamento in modo
automatico
La diffusione di Bootstrap e delle sue varianti è capillare, tanto da
meritarsi il titolo fornito dai suoi creatori

25.
Bootstrap
The world's most popular mobile-first and responsive
front-end framework.
Riferimenti e fonti: http://getbootstrap.com
B
Grazie dell’attenzione
Matteo Madeddu
Dipartimento di Informatica Torino