Bootstrap“The most popular front-end framework for developing

responsive, mobile first projects on the web.”

Picture by Benjamin Eshan on Flickr https://bitly.com/

Chi SonoAndrea Dessì

• ~10 anni di esperienza in Front-end Development

• Html, css, js, ui, ux, jsp, java, maven, nodejs…

• Entando Core Team

Bootstrap: Cosa è?• Strumento per sviluppare pagine html• Estendibile e personalizzabile

UI: griglie, bottoni, form, typography, carousels, panels...

http://getbootstrap.com/

Un po' di storiaNato all'interno di Twitter e sviluppato da Mark Otto (@mdo) e da Jacob Thornton (@fat)

v.1: 2011, prima versione pubblica

v.2: 2012, introduzione responsive

v.3: 2013, approccio mobile first

Perché utilizzarlo?

• Compatibilità browser, desktop e mobile

• Facile da usare

• Personalizzabile

• Open Source (MIT)

Come si usa?

Iniziamo da qui… Semplicemente

<link href=”bootstrap.css" rel="stylesheet”>

<script src="jquery.js"></script>

<script src=”bootstrap.js"></script>

Come si usa

Griglie• Sistema basato su 12 colonne

• Fluido o Fisso

• Innestabili

• Ottimizzato per: xs (-768 px) sm (768/992 px)md (992/1200 px)lg (1200+ px)

Griglie

Form• Cross-browser UI

• Orizzontali o Verticali

• Stati (success, error, warning)

• Dimensioni (xs, sm, md, lg)

Form

Bottoni• Pensato per le applicazioni web.

• Varianti: large, small, extra small, primary, success, info, warning, danger, link

Icone• Icon Font con 200 icone (Glyphicons)• Webapp ready• Possibilità di sostituirle con un altro set

Testi• Titoli, paragrafi, liste

• Gestione delle dimensioni

• Formattazione: i, b, s, small

• Labels e Badges

Testi

Tabelle• Righe alternate (.table-striped)

• Con i bordi (.table-bordered)

• Attive (.table-hover)

• Condensed (.table-condensed)

• Responsive

Tabelle

Pannelli“While not always necessary, sometimes you

need to put your DOM in a box. For those situations, try the panel component.”

• Possono avere l'intestazione

• Contengono qualsiasi elemento

Pannelli

Altri elementi UI

• Buttons Group

• Input Groups

• Alerts

• Progress Bar

Componenti Javascript• Tooltip

• Modal

• Carousel

• Popover

E ancora: Transition, Dropdown, Scrollspy, Tab, Alert, Collapse, Affix

Personalizzazione

• Con LESS o Sass

• La documentazione è all'interno dei sorgenti

• Compilare on-the-fly con LESS

Less, Sass

• Sono estensioni di CSS

• Facilitano la scrittura del codice

• Permettono di usare variabili, funzioni, calcoli…

http://lesscss.org/

http://sass-lang.com/

Grazie

Andrea DessìSenior UI Developer

a.dessi@entando.com