![Page 1: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/1.jpg)
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/
![Page 2: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/2.jpg)
Chi SonoAndrea Dessì
• ~10 anni di esperienza in Front-end Development
• Html, css, js, ui, ux, jsp, java, maven, nodejs…
• Entando Core Team
![Page 3: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/3.jpg)
Bootstrap: Cosa è?• Strumento per sviluppare pagine html• Estendibile e personalizzabile
UI: griglie, bottoni, form, typography, carousels, panels...
http://getbootstrap.com/
![Page 4: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/4.jpg)
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
![Page 5: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/5.jpg)
Perché utilizzarlo?
• Compatibilità browser, desktop e mobile
• Facile da usare
• Personalizzabile
• Open Source (MIT)
![Page 6: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/6.jpg)
Come si usa?
Iniziamo da qui… Semplicemente
<link href=”bootstrap.css" rel="stylesheet”>
<script src="jquery.js"></script>
<script src=”bootstrap.js"></script>
![Page 7: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/7.jpg)
Come si usa
![Page 8: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/8.jpg)
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)
![Page 9: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/9.jpg)
Griglie
![Page 10: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/10.jpg)
Form• Cross-browser UI
• Orizzontali o Verticali
• Stati (success, error, warning)
• Dimensioni (xs, sm, md, lg)
![Page 11: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/11.jpg)
Form
![Page 12: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/12.jpg)
Bottoni• Pensato per le applicazioni web.
• Varianti: large, small, extra small, primary, success, info, warning, danger, link
![Page 13: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/13.jpg)
Icone• Icon Font con 200 icone (Glyphicons)• Webapp ready• Possibilità di sostituirle con un altro set
![Page 14: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/14.jpg)
Testi• Titoli, paragrafi, liste
• Gestione delle dimensioni
• Formattazione: i, b, s, small
• Labels e Badges
![Page 15: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/15.jpg)
Testi
![Page 16: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/16.jpg)
Tabelle• Righe alternate (.table-striped)
• Con i bordi (.table-bordered)
• Attive (.table-hover)
• Condensed (.table-condensed)
• Responsive
![Page 17: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/17.jpg)
Tabelle
![Page 18: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/18.jpg)
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
![Page 19: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/19.jpg)
Pannelli
![Page 20: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/20.jpg)
Altri elementi UI
• Buttons Group
• Input Groups
• Alerts
• Progress Bar
![Page 21: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/21.jpg)
Componenti Javascript• Tooltip
• Modal
• Carousel
• Popover
E ancora: Transition, Dropdown, Scrollspy, Tab, Alert, Collapse, Affix
![Page 22: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/22.jpg)
Personalizzazione
• Con LESS o Sass
• La documentazione è all'interno dei sorgenti
• Compilare on-the-fly con LESS
![Page 23: Approfondimento su Bootstrap - dal workshop "Sviluppare siti con Bootstrap ed un sistema WCMS/Portal nel backend"](https://reader033.vdocuments.mx/reader033/viewer/2022060115/557cf62ad8b42a071b8b487f/html5/thumbnails/23.jpg)
Less, Sass
• Sono estensioni di CSS
• Facilitano la scrittura del codice
• Permettono di usare variabili, funzioni, calcoli…
http://lesscss.org/
http://sass-lang.com/