Introduzione a BOOSTRAP 4. Tutor Mauro Papa Aprile 2018

Transcript

1 Introduzione a BOOSTRAP 4 Tutor Mauro Papa Aprile 2018 mauro.papa.94@gmail.com 1

2 #Antoine de Saint-Exupéry (Autore del Piccolo Principe) La perfezione si ottiene non quando non c'è nient'altro da aggiungere, bensì quando non c'è più niente da togliere. 2

3 #Bootstrap 4 DEFINIZIONE Framework frontend per lo sviluppo rapido di interfacce web responsive. Riduzione tempi di sviluppo interfacce Compatibilità Cross-browser Interfacce responsive per dispositivi di diverse dimensioni 3

4 #Prima di Bootstrap Zuppe di codice HTML Viene rilasciato CSS. Differenti interpretazioni tra i vari browser Alcuni ingegneri di Twitter rilasciano Bootstrap 1 When internet explorer thinks it's gonna be used :') 4

5 #Bootstrap 4 TECNOLOGIE DI BASE Bootstrap 4 utilizza molteplici tecnologie e librerie POPPER.js NB: Sass non sarà argomento di questo seminario. Useremo la versione Compilata di Bootstrap 4 5

6 #Bootstrap 4 IN PAROLE POVERE Bootstrap è essenzialmente un insieme di classi CSS già pronte all uso ISTRUZIONI PER L USO 1 BS4 Includere Bootstrap nel vostro file html 2 Aggiungere le classi CSS di Bootstrap ai vari elementi HTML 6

7 #Bootstrap 4 SET UP DEPENDENCIES TRAMITE CDN Eventualmente i vari files possono anche essere scaricati e inclusi localmente 7

8 #Bootstrap 4 ESEMPIO 8

9 #Bootstrap 4 ESEMPIO <div class="col-12"> <div class="col-xs-12 col-md-6"> 9

10 #Bootstrap 4 BREAKPOINTS Classi diverse per diverse dimensioni dei display Extra small XS per gli smartphone (< 576px) Small SM per i tablet (>= 576px) Medium MD per i desktop ( >= 768px) Large LG per i desktop larghi (>=992 px) Extra Large XL per i desktop molto larghi (>=1200px) 10

11 #Bootstrap 4 GRID SYSTEM Il GRID SISTEM di bootstrap permette di assegnare ad ogni <div> una precisa dimensione utilizzando le colonne come unità di misura. La larghezza dello schermo viene virtualmente suddivisa in 12 colonne. L altezza viene suddivisa in n righe. Molteplici div possono posizionarsi su ogni riga. 11

12 #Bootstrap 4 GRID SYSTEM Per ogni div usiamo la seguente sintassi <div class="col-{breakpoint}-{numero colonne}"> ESEMPIO <div class="container"> <div class="row"> <div class="col-xs-12 col-md-8">primo div <div class="col-xs-6 col-md-4">secondo div Schermi medi e superiori Schermi piccoli 12

13 #Bootstrap 4 ESEMPIO <div class="container"> <div class="row"> <div class="col-12"> Punny headline <div class="row"> <div class="col-12 col-md-6"> Another headline <div class="col-12 col-md-6"> Another headline NB: Scrivere col-* equivale a scrivere col-xs-* NB2: Una dimensione specificata per un certo breakpoint, vale anche per tutti i breakpoints più grandi 13

14 #Bootstrap 4 FLEXBOX Il grid system è implementato attraverso Flexbox Flexbox è una specifica CSS per la creazione di layout responsive. Un Layout Flex permette all elemento contenitore di definire delle regole css per alterare larghezza, altezza e posizione degli elementi figli. Dalla versione 4 anche Bootstrap ha deciso di adottare Flexbox abbandonando il vecchio grid system basato su elementi float. Esempio - Vertical alignment tramite Flexbox <div class="container"> <div class="row align-items-start"> <div class="col-12">one co <div class="container"> <div class="row align-items-center"> <div class="col-12">one co <div class="container"> <div class="row align-items-end"> <div class="col-12">one co 14

15 #Bootstrap 4 COMPATIBILITA Mobile Browsers Chrome Firefox Safari Android Browser & WebView Microsoft Edge Android Supported Supported N/A Android v5.0+ supported Supported ios Supported Supported Supported N/A Supported Windows 10 Mobile N/A N/A N/A N/A Supported 15

16 #Bootstrap 4 COMPATIBILITA Desktop Browsers Chrome Firefox Internet Explorer Microsoft Edge Opera Safari Mac Supported Supported N/A N/A Supported Supported Windows Supported Supported Supported, IE10+ Supported Supported Not supported Terminato il supporto per Internet Explorer 8 e 9. Se necessario utilizzare Bootstrap versione 3. 16

17 #Bootstrap 4 UTILITIES BS4 fornisce molte classi per variare le proprietà grafiche degli elementi Esempio Mostrare/nascondere elementi in certi breakpoints Vogliamo che una colonna sia visibile soltanto in schermi medio/grandi Per fare questo, Bootstrap mette a disposizione delle classi che modificano la proprietà visible del CSS <div class="container"> <div class="row"> <div class="col-md-6 d-none d-md-block">one co <div class="col-md-6 col-xs-12">one co 17

18 #Bootstrap 4 UTILITIES Esempio Gestire margini (outer spacing) e padding (inner spacing) Bootstrap fornisce delle classi apposite che rispecchiamo la seguente sintassi {property}{side}-{number} Dove property può essere: m - per modificare i margini p - per modificare il padding Dove side può essere: t - per modificare il lato superiore dell elemento b - per modificare il lato inferiore dell elemento l - per modificare il lato sinistro dell elemento r - per modificare il lato destro dell elemento x - per modificare i lati sinistro e destro dell elemento y - per modificare i lati superiore e inferiore dell elemento nulla- per modificare tutti i lati dell elemento Dove number può essere: Un numero da 0 a 5 auto - per avere margini/padding automatici Sintassi sconsigliata perché? <div class="container"> <div class="row"> <div class="col-6"> <div class="col-6 mx-5"> 18

19 #Bootstrap 4 COMPONENTI DISPONIBILI Bootstrap fornisce numerosi componenti ready-to-use da poter inserire nelle proprie interfacce <nav class="navbar"> </nav> Live demo: example/index.html NB: Per il corretto funzionamento di alcuni componenti può essere necessario includere ulteriori files javascript. Controllare di volta in volta la documentazione ufficiale di bootstrap: 19