bootstrap 4 is coming!
TRANSCRIPT
![Page 1: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/1.jpg)
Bootstrap 4 is coming!
CARMINE ALFANO
FAENZA 2017
#cssday
![Page 2: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/2.jpg)
![Page 3: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/3.jpg)
Mi presento
!"#$%&'(%)*+,-$.#%)/$&*$)+0%123%11/.'(,.$445&&+6$-/7++8'(9/7(:/;%<)(=/>57&%-
![Page 4: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/4.jpg)
C’era una volta Bootstrap
![Page 5: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/5.jpg)
Hamburger menu Jumbotron
Modal
Carousel
Popover
Responsive
![Page 6: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/6.jpg)
Zurb Foundation
CSS Grid Layout
![Page 7: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/7.jpg)
Flexbox + Sass = BS4
![Page 8: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/8.jpg)
Novità globali
• Rimosso supporto a IE8, IE9 e iOS6• Flexbox abilitato di default• Switch da Less a Sass• Aggiunto nuovo breakpoint per
display più piccoli di 576px
![Page 9: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/9.jpg)
Nuovo CSS di resetNormalize.css viene sostituito da Reboot.css• font-size di base: 16px• Unità di misura primaria espressa
in rem• Ottimizzati i margini su titoli e
blocchi di testo• Border-box su tutti gli elementi • Classi più facili da
sovrascrivere
![Page 10: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/10.jpg)
Navbar
Possibilità di decidere da quale breakpointnascondere la navbar
![Page 11: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/11.jpg)
Cards
Wells, thumbnails e panels vengono sostituiti da cards.
![Page 12: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/12.jpg)
Addio icone
La libreria Glyphiconnon sarà più inclusa
![Page 13: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/13.jpg)
Nuove Utilities
Utilities per gestire margin e padding.p-md-3.pb-0 (padding-bottom: 0;).p-3 (padding: 3rem;)
.m-md-5
.mt-0 (margin-top: 0;)
.ml-1 (margin-left: 1rem;)
.mx-auto (margin-left: auto; margin-right: auto;)
![Page 14: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/14.jpg)
Nuove Utilities
Allineare il testo in base al breakpoint.text-xs-left (-right, -center).text-sm-left (-right, -center) .text-md-left (-right, -center).text-lg-left (-right, -center).text-xl-left (-right, -center)
![Page 15: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/15.jpg)
Nuove Utilities
Floating degli elementi in base al breakpoint.float-xs-left (-right).float-sm-left (-right) .float-md-left (-right).float-lg-left (-right).float-xl-left (-right)
![Page 16: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/16.jpg)
Nuove Utilities
Possibilità di definire dei range per nascondere gli elementi.hidden-{breakpoint} diventa .hidden-{breakpoint}-up o downAd es.: .hidden-xs-down.hidden-lg-up mostrerà l’elemento solo su sm e md
![Page 17: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/17.jpg)
Breakpoints in Bootstrap 4Di default è possibile gestire 5 dimensioni del viewport:- Extra small (.col-*), per gli smartphone (< 576px) - Small (.col-sm-*), per i tablet (>= 576px)- Medium (.col-md-*), per i desktop ( >= 768px)- Large (.col-lg-*), per i desktop larghi (>=992 px)- Extra Large (.col-xl-*) per i desktop molto larghi (>=1200px)- .col, larghezza uguale su tutti i breakpoint- .col-{sm, md, lg, xl}, larghezza uguale su breakpoint specifico
![Page 18: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/18.jpg)
Tabella comparativa
![Page 19: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/19.jpg)
il Grid SystemGrid System basato su dodici colonne individuate dalla classe .col-{breakpoint}-*
![Page 20: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/20.jpg)
il Grid SystemGrid System basato su dodici colonne individuate dalla classe .col-{breakpoint}-*
![Page 21: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/21.jpg)
NestingLe colonne possono essere innestate dentro altre colonne
![Page 22: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/22.jpg)
Quiz
Per realizzare 3 colonne uguali inserisco 3 colonne con la classe .col-sm-4
![Page 23: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/23.jpg)
Quiz
Riuscireste invece a riempire una .row con 5 o 7 colonne uguali senza ricorrere al nesting o a qualche trucco?
![Page 24: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/24.jpg)
Auto-layout columnsUsando la classe .col oppure .col-{breakpoint} le colonne si adatteranno in automatico allo spazio disponibile
<div class="row"> <div class="col"> .col</div> <div class="col"> .col</div> <div class="col"> .col </div>
</div>
![Page 25: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/25.jpg)
Quiz
![Page 26: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/26.jpg)
Quiz
![Page 27: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/27.jpg)
Quiz
![Page 28: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/28.jpg)
Contenuti a larghezza variabile
Box1 Box2Lorem
![Page 29: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/29.jpg)
Contenuti a larghezza variabile
<div class="row justify-content-md-center"><div class="col col-lg-2"> 1 of 3 </div> <div class="col col-md-auto">lorem</div><div class="col col-lg-2"> 3 of 3 </div>
</div>
Box1 Box2Lorem ipsum dolor sitamet, consecteturadipisicing elit. Enim, dolores, animi
![Page 30: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/30.jpg)
Vertical Alignment
![Page 31: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/31.jpg)
Vertical Alignment
<div class="row">
<div class="col align-self-start"></div>
<div class="col align-self-center"></div>
<div class="col align-self-end"></div>
</div>
Possiamoallinearelecolonneinverticale
![Page 32: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/32.jpg)
Vertical Alignment
<div class="row align-items-end">
<div class="col"></div>
<div class="col"></div>
<div class=”col"></div>
</div>
…ointererighe align-items-start / center
![Page 33: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/33.jpg)
Riordino in base al breakpoint
![Page 34: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/34.jpg)
Riordino in base al breakpoint
<div class="row">
<div class="col-sm-4 push-sm-8">SIDEBAR</div>
<div class="col-sm-8 pull-sm-4">CONTENT</div>
</div>
![Page 35: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/35.jpg)
Riordino in base al breakpoint - flexbox
<div class="row">
<div class="col-sm-8 flex-last flex-sm-first">CONTENT</div>
<div class="col flex-first flex-sm-last">SIDEBAR</div>
</div>
![Page 36: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/36.jpg)
Gestire gli spazi vuoti
![Page 37: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/37.jpg)
Gestire gli spazi vuoti
![Page 38: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/38.jpg)
Gestire gli spazi vuoti - flexbox
.row.justify-content-between
.row.justify-content-around
.row.justify-content-center
![Page 39: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/39.jpg)
Gestire gli spazi vuoti
.row.justify-content-start
.row.justify-content-center
.row.justify-content-end
![Page 40: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/40.jpg)
Flexbox• Non è un plugin JavaScript• Non è un framework CSS• Non è una proprietà CSS
![Page 41: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/41.jpg)
Flexbox• È un un modulo CSS3 costituito da 13 proprietà• È basato su direzioni flex-flow, non su inline o block
![Page 42: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/42.jpg)
I contenuti vengono sistemati o su main axis, da main-start a main-end oppure sul cross axis, da cross-start a cross-end
![Page 43: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/43.jpg)
Cosa possiamo fare con Flexbox
1. centratura orizzontale e verticale di elementi;2. allineamento con margini automatici;3. realizzazione di colonne di altezza uguale;4. modifica dell’ordine degli elementi;
![Page 44: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/44.jpg)
Compatibilità flexbox
![Page 45: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/45.jpg)
Compatibilità flexbox
![Page 46: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/46.jpg)
Fallback IE <9
.row {display: table; /* Fallback IE<9 */ display: flex; width: 100%;
} .row > [class*="col"] {
display: table-cell; /* Fallback IE<9 */ flex: 1 1 auto; min-width: 1%; /* Fix for Firefox */
}
![Page 47: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/47.jpg)
Personalizzazione avanzata con Sass
![Page 48: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/48.jpg)
Personalizzazione avanzata con Sass
![Page 49: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/49.jpg)
Personalizzazione avanzata con Sass
![Page 50: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/50.jpg)
Personalizzazione avanzata con Sass
![Page 51: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/51.jpg)
Personalizzazione avanzata con Sass
![Page 52: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/52.jpg)
Personalizzazione avanzata con Sass
![Page 53: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/53.jpg)
Personalizzazione avanzata con Sass
![Page 54: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/54.jpg)
Personalizzazione avanzata con Sass
![Page 55: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/55.jpg)
Personalizzazione avanzata con Sass
![Page 56: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/56.jpg)
Qual è l’approccio migliore?
![Page 57: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/57.jpg)
Grid Layout + Flexbox
Uno sguardo al futuro
Grid LayoutCostruzione del Layout Principale
FlexboxComportamento degli elementi in ogni area
![Page 58: Bootstrap 4 is Coming!](https://reader034.vdocument.in/reader034/viewer/2022042723/58d19c8c1a28ab6f6b8b4ff7/html5/thumbnails/58.jpg)
Grazie!