Bootstrap 3.0 - Introduzione

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

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…

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

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);

B
Utilizzo
Come qualsiasi foglio di stile o script, è possibile includere Bootstrap
in una pagina web linkando le risorse nell’header della pagina

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/
bootstrap.min.css">

<link rel="stylesheet" href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-
theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

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

<div class=“container-fluid“> …html page… </div>

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

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>
<div class="row">
</div>
<div class="row">
</div>

B
Utilizzo
<div class="row">
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
</div>
<div class="row">
</div>

B
Utilizzo

B
Utilizzo

http://getbootstrap.com/getting-started/

B
Utilizzo

Deﬁnito 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>

B
Utilizzo

B
Utilizzo
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>
<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>

B
Utilizzo
Alert di varia natura e barre di navigazione

B
Utilizzo
<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">
<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>

B
Utilizzo

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 ﬂessibili e multi funzione) o
le transizioni tramite scrollspy che permettono di aggiornare
dinamicamente le barre di navigazione in base allo scrolling della
pagina

B
Utilizzo
Il video del modal in azione è stato registrato alla pagina:
http://getbootstrap.com/javascript/#modals

B
Utilizzo

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<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">×</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>

B
Utilizzo
Il video dello scrollspy in azione è stato registrato alla pagina:
http://getbootstrap.com/javascript/#scrollspy

B
Utilizzo
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 speciﬁcato cosa è necessario impostare (a livello di attributi
o dipendenze) afﬁnché la componente funzioni
Ad esempio, lo scrollspy per funzionare richiede l’uso di una
navbar, la componente che abbiamo visto prima

B
Utilizzo
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

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

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

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

Bootstrap 3.0 - Introduzione

More Related Content

Similar to Bootstrap 3.0 - Introduzione

Similar to Bootstrap 3.0 - Introduzione (20)

Bootstrap 3.0 - Introduzione