Diventato ormai uno standard nello sviluppo web, tanto di essere adottato anche nelle specifiche della pubblica amministrazione, Bootstrap è lo strumento più importante da conoscere per uno sviluppatore web. In questa sessione vedremo, con un approccio molto pratico, le novità della versione 4, entrando nel dettaglio della personalizzazione avanza del codice sorgente con SASS e analizzando la nuova gestione del grid system basato su Flexbox.
8. 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
9. Nuovo CSS di
reset
Normalize.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
13. 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;)
14. 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)
15. 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)
16. Nuove Utilities
Possibilità di definire dei range per
nascondere gli elementi
.hidden-{breakpoint} diventa
.hidden-{breakpoint}-up o down
Ad es.:
.hidden-xs-down.hidden-lg-up
mostrerà l’elemento solo su
sm e md
17. Breakpoints in Bootstrap 4
Di 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
23. Quiz
Riuscireste invece a riempire una .row con 5 o 7 colonne uguali
senza ricorrere al nesting o a qualche trucco?
24. Auto-layout columns
Usando 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>
34. 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>
35. 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>
38. Gestire gli spazi vuoti - flexbox
.row.justify-content-between
.row.justify-content-around
.row.justify-content-center
39. Gestire gli spazi vuoti
.row.justify-content-start
.row.justify-content-center
.row.justify-content-end
40. Flexbox
• Non è un plugin JavaScript
• Non è un framework CSS
• Non è una proprietà CSS
41. Flexbox
• È un un modulo CSS3 costituito da 13 proprietà
• È basato su direzioni flex-flow, non su inline o block
42. I contenuti vengono sistemati o su main axis, da main-start a main-end
oppure sul cross axis, da cross-start a cross-end
43. 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;