1
00:00:03,550 --> 00:00:05,885
Nella lezione precedente,

2
00:00:05,885 --> 00:00:08,860
abbiamo imparato a conoscere il design reattivo.

3
00:00:08,860 --> 00:00:12,300
Abbiamo anche brevemente menzionato che il sistema di griglia Bootstrap è

4
00:00:12,300 --> 00:00:16,505
progettato per supportare siti web responsive.

5
00:00:16,505 --> 00:00:20,275
In che modo la griglia Bootstraps supporta questo?

6
00:00:20,275 --> 00:00:23,765
E cosa comporta esattamente la griglia Bootstrap,

7
00:00:23,765 --> 00:00:27,710
che ci consente di progettare siti web reattivi?

8
00:00:27,710 --> 00:00:32,535
Parliamo un po 'più di dettaglio sul sistema di griglia Bootstrap

9
00:00:32,535 --> 00:00:36,700
e su come supporta la reattività successiva.

10
00:00:36,700 --> 00:00:45,450
Abbiamo visto l'uso del meta tag viewport nella lezione precedente,

11
00:00:45,450 --> 00:00:53,590
quando abbiamo fatto l'esercizio iniziale sulla configurazione di Bootstrap nella nostra pagina index.html.

12
00:00:53,590 --> 00:00:58,790
Ho brevemente fatto riferimento a questa particolare riga nel codice allora.

13
00:00:58,790 --> 00:01:05,015
Proviamo a capire perché lo usiamo nella nostra pagina index.html.

14
00:01:05,015 --> 00:01:08,090
Quello che stiamo specificando qui è che,

15
00:01:08,090 --> 00:01:14,555
quando la nostra pagina web viene renderizzata dal browser in un particolare dispositivo, quindi,

16
00:01:14,555 --> 00:01:20,970
il loro rendering nel browser terrà conto delle dimensioni dello schermo e

17
00:01:20,970 --> 00:01:28,080
adatterà automaticamente il rendering della pagina alla larghezza dello schermo dei dispositivi.

18
00:01:28,080 --> 00:01:32,090
In questo modo, allora abbiamo classi reattive,

19
00:01:32,090 --> 00:01:35,740
classi CSS integrate nel nostro framework UI,

20
00:01:35,740 --> 00:01:39,030
quindi che garantirà che la nostra pagina web sia

21
00:01:39,030 --> 00:01:42,855
correttamente renderizzata per quella particolare dimensione dello schermo.

22
00:01:42,855 --> 00:01:46,930
Qui è dove il sistema di griglia Bootstrap viene in nostro soccorso e

23
00:01:46,930 --> 00:01:51,000
ci permette di progettare siti web responsive.

24
00:01:51,000 --> 00:01:53,480
Quindi, ancora una volta, sottolineando questo punto, la

25
00:01:53,480 --> 00:01:57,100
griglia Bootstrap è progettata per essere reattiva.

26
00:01:57,100 --> 00:02:01,525
Hai già visto cosa significa nella lezione precedente,

27
00:02:01,525 --> 00:02:07,845
e mobile prima, che abbiamo già discusso nella lezione precedente e poi fluido,

28
00:02:07,845 --> 00:02:11,055
adattandosi automaticamente alla larghezza dello schermo.

29
00:02:11,055 --> 00:02:16,220
La griglia Bootstrap sfrutta il layout flexbox CSS.

30
00:02:16,220 --> 00:02:19,860
Il layout flexbox CSS, supportato

31
00:02:19,860 --> 00:02:23,955
dalle versioni più recenti dei vari browser,

32
00:02:23,955 --> 00:02:30,070
consente opzioni di layout molto più semplici e flessibili in CSS.

33
00:02:30,070 --> 00:02:31,980
Ora, la discussione effettiva di

34
00:02:31,980 --> 00:02:36,800
come il layout flexbox CSS funziona va oltre lo scopo di questo corso,

35
00:02:36,800 --> 00:02:41,040
ci limiteremo a come CSS flexbox viene

36
00:02:41,040 --> 00:02:45,565
sfruttato da Bootstrap per il suo sistema di griglia.

37
00:02:45,565 --> 00:02:54,710
In precedenza Bootstrap aveva un proprio sistema di griglia che era precedente al layout flexbox CSS,

38
00:02:54,710 --> 00:02:58,840
ma l'ultima versione di Bootstrap

39
00:02:58,840 --> 00:03:06,650
ha reso il layout flexbox CSS come standard per la griglia Bootstrap.

40
00:03:06,650 --> 00:03:10,375
Questo layout flexbox può facilmente gestire il

41
00:03:10,375 --> 00:03:17,390
contenuto dinamico e può adattare i contenitori al contenuto dinamico,

42
00:03:17,390 --> 00:03:20,780
e può anche adattarsi facilmente alle dimensioni sconosciute

43
00:03:20,780 --> 00:03:24,890
del contenuto reale racchiuso all'interno dei contenitori.

44
00:03:24,890 --> 00:03:30,320
Il layout flexbox supporta anche il layout indipendente dalla direzione.

45
00:03:30,320 --> 00:03:37,084
Ciò che il layout flexbox porta alle griglie Bootstrap è la possibilità di

46
00:03:37,084 --> 00:03:44,005
eseguire un facile allineamento verticale del contenuto all'interno di un elemento genitore.

47
00:03:44,005 --> 00:03:48,595
Vedremo l'uso di questo nell'esercizio che segue.

48
00:03:48,595 --> 00:03:52,625
Inoltre, consente un facile riordino del contenuto

49
00:03:52,625 --> 00:03:58,170
su diversi dispositivi e risoluzioni dello schermo con l'aiuto di query multimediali.

50
00:03:58,170 --> 00:04:03,050
Ancora una volta vedremo un po 'di questo nell'esercizio su come Bootstrap

51
00:04:03,050 --> 00:04:08,645
lo sfrutta per supportare modi interessanti di stendere i contenuti.

52
00:04:08,645 --> 00:04:11,670
Inoltre, tale contenuto stesso,

53
00:04:11,670 --> 00:04:19,275
i contenitori di contenuto possono anche essere progettati per essere colonne di uguale altezza in modo che

54
00:04:19,275 --> 00:04:25,245
il contenitore di contenuto con

55
00:04:25,245 --> 00:04:32,915
l'altezza maggiore determini l'altezza di tutti i contenitori rimanenti disposti nella stessa riga.

56
00:04:32,915 --> 00:04:39,375
Parliamo ora un po 'più di dettagli sulla griglia Bootstrap e su come funziona effettivamente.

57
00:04:39,375 --> 00:04:41,400
Il modo in cui funziona la griglia Bootstrap,

58
00:04:41,400 --> 00:04:48,765
è applicando un contenitore più al livello più esterno.

59
00:04:48,765 --> 00:04:51,815
Potremmo usare un div per

60
00:04:51,815 --> 00:04:57,075
definire l'elemento per il quale applichiamo la classe contenitore in generale.

61
00:04:57,075 --> 00:05:03,855
Il contenitore è l'unità esterna all'interno della quale è disposto il contenuto effettivo.

62
00:05:03,855 --> 00:05:10,220
Bootstrap supporta sia la classe contenitore che è un layout a larghezza fissa,

63
00:05:10,220 --> 00:05:16,010
il che significa che il contenuto stesso è limitato a una larghezza fissa sullo schermo.

64
00:05:16,010 --> 00:05:22,420
Questa classe contenitore consente a questa larghezza fissa di adattarsi automaticamente alle

65
00:05:22,420 --> 00:05:25,920
dimensioni dello schermo utilizzando query multimediali in modo che

66
00:05:25,920 --> 00:05:29,695
sia lì che il design reattivo entra in nostro soccorso.

67
00:05:29,695 --> 00:05:36,340
Più tardi, vedremo come questo contenitore si adeguerà alle diverse dimensioni dello schermo.

68
00:05:36,340 --> 00:05:39,490
Ora, abbiamo anche la flessibilità di utilizzare in

69
00:05:39,490 --> 00:05:42,684
altri liquidi contenitori classici che consentono

70
00:05:42,684 --> 00:05:49,200
al contenitore di adattarsi automaticamente alle dimensioni dello schermo.

71
00:05:49,200 --> 00:05:50,855
Ma il contenitore a larghezza fissa,

72
00:05:50,855 --> 00:05:56,270
corregge la dimensione della larghezza effettiva del layout.

73
00:05:56,270 --> 00:06:01,370
All' interno del contenitore, il contenuto sarà disposto sotto forma di righe,

74
00:06:01,370 --> 00:06:04,770
quindi in genere quello che faremmo è dentro

75
00:06:04,770 --> 00:06:08,360
e fuori div a cui applichiamo la classe contenitore,

76
00:06:08,360 --> 00:06:12,440
includeremo un div interno a cui applicheremo la classe riga.

77
00:06:12,440 --> 00:06:17,550
Quindi, il contenuto stesso sarà diviso verticalmente in più righe.

78
00:06:17,550 --> 00:06:21,000
E una volta che questo è diviso in righe, all'interno di ogni riga,

79
00:06:21,000 --> 00:06:25,995
è quindi possibile layout del contenuto utilizzando colonne.

80
00:06:25,995 --> 00:06:28,810
Quindi, ogni riga in Bootstrap,

81
00:06:28,810 --> 00:06:34,565
sarà divisa in 12 colonne di dimensioni uguali.

82
00:06:34,565 --> 00:06:43,820
Ora, è possibile progettare il contenuto in modo da occupare qualsiasi numero di queste 12 colonne.

83
00:06:43,820 --> 00:06:48,900
Quindi, e il fatto che il contenuto stesso si adatti alla

84
00:06:48,900 --> 00:06:51,310
larghezza dello schermo e alla riga stessa

85
00:06:51,310 --> 00:06:54,710
racchiusa all'interno del contenitore si adatterà automaticamente alla larghezza dello schermo,

86
00:06:54,710 --> 00:06:58,120
e anche alle colonne,

87
00:06:58,120 --> 00:07:01,320
verranno determinate le 12 colonne.

88
00:07:01,320 --> 00:07:05,010
Le loro larghezze saranno determinate dalla riga da sola.

89
00:07:05,010 --> 00:07:08,520
Quindi, il che significa che per uno schermo di dimensioni diverse,

90
00:07:08,520 --> 00:07:12,470
qualunque contenuto si disponga tutte quelle 12 colonne

91
00:07:12,470 --> 00:07:18,220
si adeguerà automaticamente alla larghezza consentita per il contenuto.

92
00:07:18,220 --> 00:07:21,990
Quindi, questo è il modo in cui la reattività è

93
00:07:21,990 --> 00:07:27,370
incorporata nel modo della griglia Bootstrap di disporre il contenuto.

94
00:07:27,370 --> 00:07:30,285
Quindi, come esattamente impagliamo il contenuto?

95
00:07:30,285 --> 00:07:33,845
Ne parleremo nelle prossime diapositive.

96
00:07:33,845 --> 00:07:36,315
La griglia Bootstrap stessa,

97
00:07:36,315 --> 00:07:45,160
ci mette a disposizione cinque classi per specificare diverse dimensioni dello schermo per impostazione predefinita.

98
00:07:45,160 --> 00:07:49,870
Esiste una classe predefinita che si rivolge a tutte le dimensioni dello schermo,

99
00:07:49,870 --> 00:07:53,210
a partire da extra small a extra large.

100
00:07:53,210 --> 00:07:59,205
Quindi l'intera gamma di larghezze dello schermo in termini Bootstrap,

101
00:07:59,205 --> 00:08:02,884
è divisa in

102
00:08:02,884 --> 00:08:07,405
dimensioni dello schermo extra small, small, medium, large ed extra large.

103
00:08:07,405 --> 00:08:11,180
In una

104
00:08:11,180 --> 00:08:16,350
delle diapositive successive, vedere come vengono determinate in dettaglio queste diverse classi di dimensioni dello schermo.

105
00:08:16,350 --> 00:08:18,540
Quindi, all'interno del tuo codice,

106
00:08:18,540 --> 00:08:22,830
identificherai la specifica del layout

107
00:08:22,830 --> 00:08:29,060
specificando sm per le dimensioni dello schermo piccolo

108
00:08:29,060 --> 00:08:32,195
, md per medium, lg per large

109
00:08:32,195 --> 00:08:35,905
e xl per schermi extra large.

110
00:08:35,905 --> 00:08:37,400
Quindi, quando si esegue il layout,

111
00:08:37,400 --> 00:08:40,345
come abbiamo visto nella diapositiva precedente,

112
00:08:40,345 --> 00:08:45,405
ogni riga in un sistema di griglia Bootstrap è divisa in 12 colonne.

113
00:08:45,405 --> 00:08:50,905
Ora, ci layout contenuti utilizzando ciò che viene chiamato come le classi di colonna.

114
00:08:50,905 --> 00:08:52,450
Per le classi di colonna,

115
00:08:52,450 --> 00:08:59,162
possiamo specificare come il layout è fatto per diverse larghezze dello schermo.

116
00:08:59,162 --> 00:09:04,735
Osservare i dettagli di questo nelle diapositive successive più avanti.

117
00:09:04,735 --> 00:09:11,020
Ma permettetemi di attirare rapidamente la vostra attenzione su come specifichiamo le dimensioni delle colonne.

118
00:09:11,020 --> 00:09:13,655
Potrebbero specificare le dimensioni delle colonne come col,

119
00:09:13,655 --> 00:09:19,485
che è una delle classi che diranno col-sm per

120
00:09:19,485 --> 00:09:25,360
small e col-md per medium e large e extra large e così via.

121
00:09:25,360 --> 00:09:29,810
Ora, queste classi di colonna vengono utilizzate per specificare

122
00:09:29,810 --> 00:09:38,260
esattamente quante colonne in una riga occuperanno ogni pezzo di contenuto.

123
00:09:38,260 --> 00:09:40,015
Come funziona?

124
00:09:40,015 --> 00:09:42,215
Lo vedremo nella prossima diapositiva.

125
00:09:42,215 --> 00:09:45,565
Quindi, tornando alla nostra griglia Bootstrap,

126
00:09:45,565 --> 00:09:50,345
supponiamo di avere un pezzo di contenuto e vogliamo disporre la pace dei contenuti.

127
00:09:50,345 --> 00:09:54,915
Possiamo specificare che quel contenuto è racchiuso all'interno di un altro div,

128
00:09:54,915 --> 00:09:57,815
a cui applichiamo classe colonna,

129
00:09:57,815 --> 00:10:00,390
come ad esempio, col-sm-5.

130
00:10:00,390 --> 00:10:08,560
Quindi, in questo caso, ciò che stiamo specificando è che per schermi di dimensioni piccole o extra grandi,

131
00:10:08,560 --> 00:10:15,890
questo pezzo di contenuto occuperà cinque colonne su quelle 12 colonne.

132
00:10:15,890 --> 00:10:17,505
Ora, mi chiederai subito,

133
00:10:17,505 --> 00:10:19,835
che mi dici del fumo extra?

134
00:10:19,835 --> 00:10:23,465
Se non è specificato esplicitamente per la lockette extra intelligente

135
00:10:23,465 --> 00:10:27,120
dall'intera larghezza delle 12 colonne,

136
00:10:27,120 --> 00:10:31,575
possono specificare esplicitamente da quale intervallo a

137
00:10:31,575 --> 00:10:38,135
quale intervallo il layout delle colonne occuperà quante colonne.

138
00:10:38,135 --> 00:10:39,890
Quindi, in questo caso particolare,

139
00:10:39,890 --> 00:10:42,470
quando specifico che li chiamo solo sm-5,

140
00:10:42,470 --> 00:10:48,295
quello che voglio dire è che questo particolare contenuto che è racchiuso all'interno di quei div,

141
00:10:48,295 --> 00:10:52,375
occuperà cinque colonne per tutte le dimensioni dello schermo,

142
00:10:52,375 --> 00:10:56,595
dal piccolo fino al più grande.

143
00:10:56,595 --> 00:11:00,595
Ora, vediamo che tra le 12 colonne,

144
00:11:00,595 --> 00:11:02,515
abbiamo già occupato cinque colonne.

145
00:11:02,515 --> 00:11:05,070
Ci sono ancora sette colonne rimaste.

146
00:11:05,070 --> 00:11:09,925
Potrei prendere un altro pezzo di contenuto e poi posizionarlo a destra di questo,

147
00:11:09,925 --> 00:11:14,085
difendendo un altro div e quindi applicando la colonna sm-7.

148
00:11:14,085 --> 00:11:15,855
Ora, in questo caso,

149
00:11:15,855 --> 00:11:18,065
vedi che 5 più 7 è uguale a 12.

150
00:11:18,065 --> 00:11:22,900
Quindi, questi due pezzi di contenuto che sono racchiusi nei due div,

151
00:11:22,900 --> 00:11:25,530
ora saranno posizionati fianco a fianco,

152
00:11:25,530 --> 00:11:30,070
e la somma totale di essi sta occupando l'intera larghezza di 12 colonne.

153
00:11:30,070 --> 00:11:35,765
Quindi, questo è il modo in cui possiamo specificare e il lavoro con le 12 colonne

154
00:11:35,765 --> 00:11:42,630
nella definizione del layout del livello corrente.

155
00:11:42,630 --> 00:11:46,960
Con l'uso del layout della scatola flessibile CSS,

156
00:11:46,960 --> 00:11:51,660
Bootstrap supporta anche quelle che vengono chiamate le colonne di layout automatico.

157
00:11:51,660 --> 00:11:52,905
Quindi, in questo caso,

158
00:11:52,905 --> 00:11:55,380
posso semplicemente specificare la

159
00:11:55,380 --> 00:12:00,060
colonna sm senza specificare quante colonne dovrebbe occupare.

160
00:12:00,060 --> 00:12:07,570
Ma nel caso in cui specifichi tre colonne di larghezza Doobs sm nel mio heml 5,

161
00:12:07,570 --> 00:12:13,575
la griglia di bootstrap posizionerà automaticamente questi contenuti all'interno di quei div

162
00:12:13,575 --> 00:12:14,905
, fianco a fianco, in modo

163
00:12:14,905 --> 00:12:18,875
che ognuno di essi ottenga un terzo della larghezza totale.

164
00:12:18,875 --> 00:12:22,220
Quindi, dato che abbiamo 12 colonne qui,

165
00:12:22,220 --> 00:12:26,045
ognuna di queste tre otterrà quattro colonne ciascuna.

166
00:12:26,045 --> 00:12:32,525
E questo viene automaticamente curato dal meccanismo di layout bootstraps.

167
00:12:32,525 --> 00:12:35,550
Ora, possiamo specificare esplicitamente

168
00:12:35,550 --> 00:12:40,375
il numero di colonne occupate da un particolare pezzo di contenuto.

169
00:12:40,375 --> 00:12:45,625
Quindi, per esempio, supponiamo di specificare tre classi di colonna,

170
00:12:45,625 --> 00:12:49,565
ma quella centrale specifica la colonna sm 6.

171
00:12:49,565 --> 00:12:52,615
Quindi quello che succede è, quando il bootstrap fa

172
00:12:52,615 --> 00:12:55,760
il layout, quello centrale occuperà sei colonne,

173
00:12:55,760 --> 00:13:01,885
e poi i pezzi di contenuto sinistro e destro occuperanno tutto ciò che viene lasciato fuori.

174
00:13:01,885 --> 00:13:04,785
Quindi, delle 12 colonne che abbiamo,

175
00:13:04,785 --> 00:13:08,630
se 6 colonne occupate dal pezzo centrale del contenuto,

176
00:13:08,630 --> 00:13:12,855
allora abbiamo lasciato con noi 6 colonne e che sarà equamente

177
00:13:12,855 --> 00:13:17,965
diviso tra il contenuto e i due lati di questa colonna centrale.

178
00:13:17,965 --> 00:13:23,585
Quindi, ognuno di loro otterrà colonne libere di spazio ciascuno.

179
00:13:23,585 --> 00:13:27,730
Quindi, questo è il modo in cui il layout viene eseguito automaticamente con Bootstrap.

180
00:13:27,730 --> 00:13:34,110
Nell' esercizio, vedremo varie combinazioni di utilizzo di questo tipo di

181
00:13:34,110 --> 00:13:43,680
specifiche di quante colonne ogni pezzo di contenuto occuperà nel layout dei colori.

182
00:13:43,680 --> 00:13:49,135
Questa tabella riassume il modo in cui Bootstrap tratta

183
00:13:49,135 --> 00:13:54,860
le diverse griglie dello schermo e in modo corrispondente le modalità di identificazione delle griglie dello schermo.

184
00:13:54,860 --> 00:13:57,095
Quindi, come ho specificato in precedenza,

185
00:13:57,095 --> 00:14:04,580
Bootstrap divide l'intero intervallo di larghezza dello schermo in 5 classi.

186
00:14:04,580 --> 00:14:12,890
Gli schermi più piccoli sono quelli le cui griglie sono inferiori a 776 pixel.

187
00:14:12,890 --> 00:14:22,090
Schermi piccoli sono quelli che sono compresi tra 576 e meno di 768 pixel.

188
00:14:22,090 --> 00:14:25,600
Schermi medi da 768 a 992,

189
00:14:25,600 --> 00:14:31,380
grandi da 992 a 1200 e qualsiasi larghezza di 1200 pixel

190
00:14:31,380 --> 00:14:34,685
è considerato uno schermo extra large.

191
00:14:34,685 --> 00:14:39,390
Quindi, questo è il modo in cui è configurata la griglia di Bootstrap predefinita.

192
00:14:39,390 --> 00:14:43,570
Ora, una volta che ti senti a tuo agio con Bootstrap,

193
00:14:43,570 --> 00:14:48,595
puoi anche configurare queste divisioni tu stesso.

194
00:14:48,595 --> 00:14:50,770
Ma per questo corso,

195
00:14:50,770 --> 00:14:56,210
continueremo con la configurazione predefinita supportata da bootstrap.

196
00:14:56,210 --> 00:14:59,195
Ora, il comportamento della griglia in questo caso,

197
00:14:59,195 --> 00:15:01,825
è che qualunque cosa sia disposta per extra piccola,

198
00:15:01,825 --> 00:15:04,885
sarà orizzontale in ogni momento,

199
00:15:04,885 --> 00:15:09,235
per i bit più alti saranno compressi alla larghezza 2start,

200
00:15:09,235 --> 00:15:13,040
ma orizzontale sui punti di interruzione.

201
00:15:13,040 --> 00:15:17,855
Vedremo come funziona in breve tempo con alcuni esempi.

202
00:15:17,855 --> 00:15:24,980
Ora, abbiamo visto l'uso del contenitore nella diapositiva precedente.

203
00:15:24,980 --> 00:15:28,545
Per gli schermi più piccoli,

204
00:15:28,545 --> 00:15:32,895
la larghezza del contenitore viene determinata automaticamente dalla larghezza dello schermo.

205
00:15:32,895 --> 00:15:34,575
Ma per le piccole, medie,

206
00:15:34,575 --> 00:15:36,045
grandi ed extra grandi,

207
00:15:36,045 --> 00:15:39,425
la larghezza del contenitore è come specificato.

208
00:15:39,425 --> 00:15:42,600
Quindi, se usi il div con un contenitore di classe,

209
00:15:42,600 --> 00:15:46,105
per gli schermi piccoli è di 540 pixel.

210
00:15:46,105 --> 00:15:52,330
Quindi, noterai che se hai una larghezza dello schermo compresa tra 576 e 768,

211
00:15:52,330 --> 00:15:56,485
il tuo contenuto sarà disposto in 540 pixel,

212
00:15:56,485 --> 00:16:00,670
sarà centrato nella larghezza dello schermo.

213
00:16:00,670 --> 00:16:08,435
Quindi, lo spazio rimanente verrà lasciato come margini su entrambi i lati di questo contenuto.

214
00:16:08,435 --> 00:16:12,795
Allo stesso modo, per il medio è 720 pixel e così via.

215
00:16:12,795 --> 00:16:17,640
A questo punto si specifica il numero di colonne occupate da ciascun contenuto.

216
00:16:17,640 --> 00:16:20,885
Quindi i prefissi della classe di colonna che userai

217
00:16:20,885 --> 00:16:26,670
è.col per extra small, .col-sm per small,

218
00:16:26,670 --> 00:16:29,420
fino a extra large.

219
00:16:29,420 --> 00:16:31,625
Se si specifica qualcosa con.col-md

220
00:16:31,625 --> 00:16:36,530
, questo vale per schermi medio-extra grandi.

221
00:16:36,530 --> 00:16:41,785
Quindi, ogni volta che specifichi qualsiasi col- e alcuni numeri,

222
00:16:41,785 --> 00:16:47,895
allora questo vale per quella particolare dimensione dello schermo e tutto ciò che riguarda quella dimensione dello schermo.

223
00:16:47,895 --> 00:16:51,035
Ora, in tutti i casi di dimensioni dello schermo,

224
00:16:51,035 --> 00:16:54,955
il numero di colonne è definito come 12 colonne.

225
00:16:54,955 --> 00:17:02,345
La griglia in caso di bootstrap è progettata per essere 12 colonne e che è configurabile,

226
00:17:02,345 --> 00:17:04,830
ma il valore predefinito è 12 colonne.

227
00:17:04,830 --> 00:17:10,355
La ragione per scegliere 12 è che 12 è un buon multiplo di due, tre,

228
00:17:10,355 --> 00:17:11,755
quattro e così via.

229
00:17:11,755 --> 00:17:14,965
Quindi ti dà molta flessibilità in termini di

230
00:17:14,965 --> 00:17:19,065
quante colonne scegli di disporre i tuoi contenuti.

231
00:17:19,065 --> 00:17:22,345
Tra ogni colonna, quindi se

232
00:17:22,345 --> 00:17:25,510
disponi due pezzi di contenuto fianco a fianco con i loro div,

233
00:17:25,510 --> 00:17:31,035
tra questi due pezzi di contenuto saranno una piccola grondaia che verrà lasciata.

234
00:17:31,035 --> 00:17:37,255
Spazio vuoto che verrà lasciato fuori larghezza la larghezza della grondaia,

235
00:17:37,255 --> 00:17:41,030
che è di soli 30 pixel per impostazione predefinita.

236
00:17:41,030 --> 00:17:45,855
Quindi, 15 pixel provengono da un pezzo di contenuto e 15 pixel da un altro pezzo di contenuto.

237
00:17:45,855 --> 00:17:48,600
SumTotal insieme 30 pixel di

238
00:17:48,600 --> 00:17:53,470
spazio bianco verranno lasciati tra le due parti di contenuto.

239
00:17:53,470 --> 00:17:57,465
Pensa a come

240
00:17:57,465 --> 00:18:01,530
viene fatto un layout di colonna giornale e si inizia a vedere la corrispondenza tra

241
00:18:01,530 --> 00:18:04,970
il layout colonna giornale è fatto e come

242
00:18:04,970 --> 00:18:10,815
la griglia del bootstrap fa il layout del contenuto su quel campo.

243
00:18:10,815 --> 00:18:14,725
La griglia di Bootastrap consente di eseguire contenuti di livello successivo, in

244
00:18:14,725 --> 00:18:20,710
modo da poter racchiudere contenuti all'interno del contenuto e quindi eseguire il layout del contenuto annidato.

245
00:18:20,710 --> 00:18:23,790
Inoltre, supporta gli offset.

246
00:18:23,790 --> 00:18:28,712
Vedremo l'uso degli offset anche in alcuni esempi più avanti.

247
00:18:28,712 --> 00:18:36,555
Quindi diamo un'occhiata al nostro primo esempio di come applicare le classi di colonna bootstraps

248
00:18:36,555 --> 00:18:41,515
e come sarebbero effettivamente renderizzate su diverse dimensioni dello schermo.

249
00:18:41,515 --> 00:18:47,310
Ecco un esempio di una situazione in cui ho applicato ai due div, il

250
00:18:47,310 --> 00:18:53,510
trattino della colonna 12 e poi il trattino della colonna sm il trattino cinque per

251
00:18:53,510 --> 00:18:56,050
il pezzo rosso di contenuto e per

252
00:18:56,050 --> 00:19:00,980
l'altro ho applicato il trattino della colonna 12 e la colonna sm sette.

253
00:19:00,980 --> 00:19:06,045
Quindi il modo in cui questo contenuto sarà disposto è per schermi extra piccoli,

254
00:19:06,045 --> 00:19:10,690
i due pezzi di contenuto saranno impilati uno sopra l'altro.

255
00:19:10,690 --> 00:19:15,450
Quindi quello rosso sarà impilato in cima a quello di colore verde mare.

256
00:19:15,450 --> 00:19:19,010
Ma per schermi da piccoli a extra large,

257
00:19:19,010 --> 00:19:22,310
i due pezzi di contenuto saranno disposti fianco a fianco.

258
00:19:22,310 --> 00:19:27,490
La ragione di questo è perché abbiamo detto colonna sm cinque e colonna sm sette per i due.

259
00:19:27,490 --> 00:19:31,510
Quindi, per i piccoli o extra large sono disposti fianco a fianco in modo

260
00:19:31,510 --> 00:19:36,210
che il contenuto rosso occupi

261
00:19:36,210 --> 00:19:45,945
le cinque colonne più a sinistra e il contenuto verde del mare occuperà le sette colonne giuste della tua riga,

262
00:19:45,945 --> 00:19:50,440
tutto il modo dalle dimensioni dello schermo più piccole alle dimensioni extra grandi.

263
00:19:50,440 --> 00:19:55,605
Quindi questo è il modo in cui vorremmo specificare il layout del contenuto per diverse dimensioni dello schermo.

264
00:19:55,605 --> 00:20:00,220
Bootstrap fornisce anche classi aggiuntive chiamate come

265
00:20:00,220 --> 00:20:07,055
le classi Ordine trattino che consentono di riordinare il contenuto sullo schermo.

266
00:20:07,055 --> 00:20:11,440
Quindi, per esempio, se applichi prima un ordine sm,

267
00:20:11,440 --> 00:20:15,200
un ordine qualche ultima classe ai div,

268
00:20:15,200 --> 00:20:19,265
come mostrato nell'esempio qui, in questo caso,

269
00:20:19,265 --> 00:20:26,160
il div per il quale applichi

270
00:20:26,160 --> 00:20:29,390
l'ordine sm last verrà spinto sul lato destro dello schermo e order

271
00:20:29,390 --> 00:20:33,125
sm first div sarà spinto verso il lato sinistro del schermo.

272
00:20:33,125 --> 00:20:38,570
Quindi, l'applicazione di queste classi di ordine consente di riordinare il contenuto sullo script.

273
00:20:38,570 --> 00:20:45,000
Non solo questo, l'ordine sm permette anche di specificare lo stesso ordine sm one per

274
00:20:45,000 --> 00:20:51,750
ordinare sm 12 per specificare l'ordine in cui il contenuto deve essere reso sullo schermo.

275
00:20:51,750 --> 00:20:53,850
Quindi, utilizzando un numero maggiore,

276
00:20:53,850 --> 00:20:57,395
è possibile spostare il contenuto sul lato destro

277
00:20:57,395 --> 00:21:01,795
della riga e un numero più piccolo sposterà il contenuto sul lato sinistro della riga.

278
00:21:01,795 --> 00:21:05,785
Vedremo un esempio di questo anche nell'esercizio.

279
00:21:05,785 --> 00:21:10,850
L' interessante supporto misto che Bootstrap Grid porta con l'uso

280
00:21:10,850 --> 00:21:16,195
del layout Flexbox è l'allineamento verticale dei contenuti.

281
00:21:16,195 --> 00:21:19,530
Le versioni precedenti di

282
00:21:19,530 --> 00:21:22,315
Bootstrap, come Bootstrap 3 e precedenti,

283
00:21:22,315 --> 00:21:27,915
non avevano la possibilità di eseguire l'allineamento verticale del contenuto.

284
00:21:27,915 --> 00:21:34,870
Con l'uso del Flexbox per la progettazione della griglia Bootstrap in Bootstrap quattro,

285
00:21:34,870 --> 00:21:41,365
otteniamo la flessibilità che CSS Flexbox offre in termini di allineamento verticale.

286
00:21:41,365 --> 00:21:46,295
Quindi, se si desidera che il contenuto sia centrato verticalmente,

287
00:21:46,295 --> 00:21:48,370
quindi alla riga,

288
00:21:48,370 --> 00:21:52,765
si applicherà la classe chiamata «align items center».

289
00:21:52,765 --> 00:21:55,585
Quindi in questo caso, qualunque sia il contenuto sia disposto,

290
00:21:55,585 --> 00:22:00,750
verrà disposto verticalmente allineato all'interno di quella particolare riga.

291
00:22:00,750 --> 00:22:03,560
Quindi il contenuto che occupa

292
00:22:03,560 --> 00:22:08,780
l'altezza più grande sarà quello a cui i restanti saranno

293
00:22:08,780 --> 00:22:16,905
allineati quando è disposto in quella riga o se si prespecifica l'altezza della riga,

294
00:22:16,905 --> 00:22:24,935
allora tutto il contenuto sarà centrato verticalmente all'interno di quella particolare riga lì.

295
00:22:24,935 --> 00:22:30,795
Non solo, la griglia di Bootstrap supporta anche l'allineamento orizzontale dei contenuti.

296
00:22:30,795 --> 00:22:32,400
Diamo un'occhiata ad un esempio.

297
00:22:32,400 --> 00:22:35,060
Quindi, se specifichi il tuo contenuto in questo modo.

298
00:22:35,060 --> 00:22:40,320
Supponiamo che tu abbia tre colonne e la prima che specifichi

299
00:22:40,320 --> 00:22:44,140
la colonna di classe div tre, poi quella centrale div class column auto.

300
00:22:44,140 --> 00:22:47,010
Tornero' a quella colonna auto tra poco.

301
00:22:47,010 --> 00:22:50,045
E quello giusto dice la colonna della classe div 3.

302
00:22:50,045 --> 00:22:53,065
Quindi, in questo caso, ciò che stiamo specificando è che i

303
00:22:53,065 --> 00:22:58,540
pezzi di contenuto sinistro e quello più a destra occuperanno tre colonne ciascuna.

304
00:22:58,540 --> 00:23:02,120
Quello centrale, quando dico, «colonna auto»,

305
00:23:02,120 --> 00:23:07,200
significa che il numero di colonne che

306
00:23:07,200 --> 00:23:14,090
occupa questo particolare div sarà determinato automaticamente dal contenuto che è racchiuso lì dentro.

307
00:23:14,090 --> 00:23:16,840
Quindi, in base al contenuto,

308
00:23:16,840 --> 00:23:21,710
il numero di colonne occupate dal div si regolerà automaticamente.

309
00:23:21,710 --> 00:23:25,070
In questo caso particolare, in questo layout,

310
00:23:25,070 --> 00:23:31,040
quel particolare contenuto viene ospitato all'interno di quattro colonne.

311
00:23:31,040 --> 00:23:34,985
Quindi ora hai quattro colonne utilizzate dal div centrale,

312
00:23:34,985 --> 00:23:38,020
tre colonne a sinistra e tre colonne a destra.

313
00:23:38,020 --> 00:23:40,650
Quindi somma totale, hai 10 colonne.

314
00:23:40,650 --> 00:23:43,730
Quindi hai due colonne che sono rimaste vuote.

315
00:23:43,730 --> 00:23:46,070
Ora, se si specifica per la riga,

316
00:23:46,070 --> 00:23:50,165
si specifica il centro contenuti giustificare, quindi,

317
00:23:50,165 --> 00:23:54,570
l'intero contenuto in questa particolare riga verrà centrato

318
00:23:54,570 --> 00:23:59,365
rispetto alla riga orizzontale.

319
00:23:59,365 --> 00:24:02,080
Puoi anche avere il contenuto giustificato a sinistra, a

320
00:24:02,080 --> 00:24:05,584
destra e un paio di altre opzioni.

321
00:24:05,584 --> 00:24:09,260
I dettagli sono nella documentazione di bootstraps.

322
00:24:09,260 --> 00:24:13,755
Bootstrap consente anche di eseguire offset di colonna.

323
00:24:13,755 --> 00:24:16,725
Come funziona? Diamo un'occhiata ad un esempio.

324
00:24:16,725 --> 00:24:18,710
In questa colonna offset,

325
00:24:18,710 --> 00:24:21,320
siamo in grado di specificare un pezzo di contenuto,

326
00:24:21,320 --> 00:24:27,750
aggiungere a che se applichiamo la classe come trattino offset sm trattino uno.

327
00:24:27,750 --> 00:24:33,585
Quello che stiamo specificando è per schermi piccoli o extra large,

328
00:24:33,585 --> 00:24:38,425
questo pezzo di contenuto dovrebbe essere spostato a destra di una colonna.

329
00:24:38,425 --> 00:24:41,970
Quindi, quando questo contenuto è disposto, come puoi vedere,

330
00:24:41,970 --> 00:24:49,560
la colonna più a sinistra viene lasciata vuota e il contenuto viene spostato a destra di una colonna.

331
00:24:49,560 --> 00:24:52,925
E puoi impaginare il contenuto rimanente sul lato destro.

332
00:24:52,925 --> 00:24:55,860
Quindi somma totale, puoi vedere che i due div

333
00:24:55,860 --> 00:24:59,670
occuperanno 11 colonne ma una colonna offsettata a destra.

334
00:24:59,670 --> 00:25:05,910
Quindi è così che possiamo controllare il layout del contenuto utilizzando un offset di colonna.

335
00:25:05,910 --> 00:25:07,380
Quindi, come puoi vedere,

336
00:25:07,380 --> 00:25:11,280
usando le specifiche della dimensione della colonna,

337
00:25:11,280 --> 00:25:13,540
l'allineamento verticale e orizzontale,

338
00:25:13,540 --> 00:25:15,975
l'offset, la spinta e la trazione,

339
00:25:15,975 --> 00:25:18,635
e il flex prima e l'ultimo,

340
00:25:18,635 --> 00:25:23,925
siamo in grado di ottenere un sacco di controllo su come disponiamo i

341
00:25:23,925 --> 00:25:29,825
contenuti per diverse larghezze dello schermo e diverse dimensioni dello schermo .

342
00:25:29,825 --> 00:25:36,800
Bootstrap va ancora oltre permettendoti di nidificare il contenuto all'interno di div.

343
00:25:36,800 --> 00:25:39,585
Ad esempio, se si specificano due div,

344
00:25:39,585 --> 00:25:43,130
come si vede con la colonna sm five e la colonna sm seven,

345
00:25:43,130 --> 00:25:45,725
i due contenuti saranno disposti come si vede qui.

346
00:25:45,725 --> 00:25:48,265
Ora, all'interno del div destro,

347
00:25:48,265 --> 00:25:50,630
posso nuovamente entrare e dividere la

348
00:25:50,630 --> 00:25:58,080
larghezza di quel div in una riga e poi quella riga mi darà automaticamente

349
00:25:58,080 --> 00:26:04,960
altre 12 colonne per quella parte dello schermo e quindi posso fare il layout usando la

350
00:26:04,960 --> 00:26:13,330
nidificazione dei div e fare il layout per diverse parti di quella colonna .

351
00:26:13,330 --> 00:26:15,595
Quindi, annidare in questo modo,

352
00:26:15,595 --> 00:26:23,570
ti offre ancora più flessibilità nel modo in cui disponi i i contenuti nel tuo campo.

353
00:26:23,570 --> 00:26:27,910
Con tutta la discussione sul Bootstrap Grid System e su come

354
00:26:27,910 --> 00:26:34,280
la griglia Bootstrap supporta vari modi di layout dei contenuti

355
00:26:34,280 --> 00:26:39,670
, passiamo ora alla nostra prossima serie di esercizi.

356
00:26:39,670 --> 00:26:45,820
Stiamo andando ad applicare la griglia Bootstrap alla nostra pagina index.html

357
00:26:45,820 --> 00:26:52,770
al fine di fare il layout del contenuto all'interno o la pagina index.html.

358
00:26:52,770 --> 00:26:57,350
Useremo anche alcune classi CSS personalizzate.