1
00:00:03,730 --> 00:00:06,755
Nelle lezioni precedenti,

2
00:00:06,755 --> 00:00:12,055
abbiamo imparato a conoscere il design reattivo e il sistema di griglia bootstrap.

3
00:00:12,055 --> 00:00:18,050
Abbiamo visto come la griglia di bootstrap ci permette di progettare siti web responsive.

4
00:00:18,050 --> 00:00:21,890
E' tempo per noi di passare al prossimo esercizio.

5
00:00:21,890 --> 00:00:27,755
Inizieremo a lavorare con la pagina html indice che abbiamo creato nel

6
00:00:27,755 --> 00:00:34,945
nostro esercizio precedente e applicheremo le classi griglia bootstrap per renderlo reattivo.

7
00:00:34,945 --> 00:00:40,760
Dando una rapida occhiata alla nostra pagina web nel browser vediamo che

8
00:00:40,760 --> 00:00:46,415
è ancora terribile anche se i font sono migliorati un po ',

9
00:00:46,415 --> 00:00:50,645
e ora stiamo usando i font predefiniti bootstraps.

10
00:00:50,645 --> 00:01:00,930
Proviamo ora ad applicare le classi griglia bootstrap a index.html per migliorare il suo layout.

11
00:01:00,930 --> 00:01:03,805
Andando alla pagina index.html,

12
00:01:03,805 --> 00:01:07,960
permettetemi di attirare rapidamente la vostra attenzione su questa particolare riga nella

13
00:01:07,960 --> 00:01:12,805
pagina index.html che abbiamo incluso già nell'esercizio precedente.

14
00:01:12,805 --> 00:01:14,660
Avevo fatto riferimento a questa linea,

15
00:01:14,660 --> 00:01:17,065
poi stavamo parlando del sistema di griglia bootstrap.

16
00:01:17,065 --> 00:01:23,895
Quindi qui, vediamo che abbiamo specificato i meta tag con una porta di visualizzazione e il contenuto,

17
00:01:23,895 --> 00:01:26,090
larghezza come larghezza del dispositivo,

18
00:01:26,090 --> 00:01:29,205
e scala iniziale uno e ridursi per adattarsi no.

19
00:01:29,205 --> 00:01:33,210
Quindi questo meta tag ci permette di rendere

20
00:01:33,210 --> 00:01:39,225
la nostra pagina web reattiva guardando il carattere della porta di visualizzazione.

21
00:01:39,225 --> 00:01:42,630
Passando al passo successivo.

22
00:01:42,630 --> 00:01:49,080
Stiamo andando a rotolare giù al corpo di questa pagina index.html,

23
00:01:49,080 --> 00:01:54,570
e quindi cercare il primo div che arriva proprio sotto il tag di intestazione lì,

24
00:01:54,570 --> 00:02:00,480
a questo div si sta andando ad applicare il contenitore di classe.

25
00:02:00,480 --> 00:02:05,550
Abbiamo già imparato a conoscere la classe contenitore nella lezione precedente.

26
00:02:05,550 --> 00:02:09,125
Quindi, una volta applicata la classe contenitore,

27
00:02:09,125 --> 00:02:12,410
quindi dando un'occhiata alla nostra pagina web vediamo

28
00:02:12,410 --> 00:02:16,620
che parte del contenuto proprio lì si è già adattata.

29
00:02:16,620 --> 00:02:23,080
Guarda la differenza tra il contenuto qui sopra e quello qui sotto.

30
00:02:23,080 --> 00:02:25,370
Ora questo contenuto qui sotto,

31
00:02:25,370 --> 00:02:30,960
è nel piè di pagina della nostra pagina index.html e questo contenuto è nell'intestazione.

32
00:02:30,960 --> 00:02:36,890
Ma quel contenuto al centro è il contenuto effettivo della nostra pagina web,

33
00:02:36,890 --> 00:02:40,785
cioè all'interno del div a cui applichiamo il contenitore.

34
00:02:40,785 --> 00:02:47,480
Quindi applicando la classe contenitore puoi vedere immediatamente che la larghezza della pagina all'interno della

35
00:02:47,480 --> 00:02:50,700
quale è disposto il nostro contenuto si è ora

36
00:02:50,700 --> 00:02:54,660
ridotta e quindi hai un po 'di spazio in più su entrambi i lati,

37
00:02:54,660 --> 00:02:58,935
quindi con questa larghezza del contenitore essendo un contenitore di dimensioni fisse,

38
00:02:58,935 --> 00:03:02,330
il nostro contenuto sarà fissato a questo particolare larghezza

39
00:03:02,330 --> 00:03:07,425
sullo schermo lasciando abbastanza margine su entrambi i lati come spazio bianco.

40
00:03:07,425 --> 00:03:13,315
Applichiamo la stessa classe contenitore sia per l'intestazione e il piè di pagina anche,

41
00:03:13,315 --> 00:03:17,355
e quindi vedere come cambia il contenuto.

42
00:03:17,355 --> 00:03:20,200
Tornando alla nostra pagina web,

43
00:03:20,200 --> 00:03:24,940
quello che ho intenzione di fare ora è per il contenuto interno qui,

44
00:03:24,940 --> 00:03:28,165
il div interno all'interno del contenitore,

45
00:03:28,165 --> 00:03:34,110
ho intenzione di applicare la classe come classe di riga qui,

46
00:03:34,110 --> 00:03:35,885
a questo primo,

47
00:03:35,885 --> 00:03:38,125
e ho intenzione di copiare semplicemente questo.

48
00:03:38,125 --> 00:03:44,675
Ho intenzione di applicare lo stesso al secondo div qui che è allineato per il div,

49
00:03:44,675 --> 00:03:49,230
e anche scorrere verso il basso e poi al terzo div qui,

50
00:03:49,230 --> 00:03:51,375
sto anche applicando la classe di riga qui.

51
00:03:51,375 --> 00:03:56,110
Quindi ora, il contenuto all'interno di questa classe contenitore più esterna,

52
00:03:56,110 --> 00:03:57,950
è ora diviso in tre righe,

53
00:03:57,950 --> 00:04:01,395
quindi qualunque cosa sia dentro qui sarà una riga,

54
00:04:01,395 --> 00:04:02,640
qualunque cosa sia dentro qui,

55
00:04:02,640 --> 00:04:06,150
sarà la seconda riga e quella qui sarà la terza riga.

56
00:04:06,150 --> 00:04:10,380
In seguito applicheremo le classi di colonna a questo.

57
00:04:10,380 --> 00:04:17,695
Passiamo ora all'intestazione nel corpo del nostro index.html.

58
00:04:17,695 --> 00:04:23,970
E all'intestazione, ho intenzione di applicare una classe chiamata come jumbotron.

59
00:04:23,970 --> 00:04:28,265
Il componente jumbotron consente di

60
00:04:28,265 --> 00:04:33,805
separare il contenuto all'interno del jumbotron dal resto della pagina.

61
00:04:33,805 --> 00:04:39,035
Vedremo il risultato in breve tempo quando abbiamo alla pagina web risultante.

62
00:04:39,035 --> 00:04:42,215
Ora, al div all'interno di questa intestazione,

63
00:04:42,215 --> 00:04:46,360
applicherò la classe come contenitore, in

64
00:04:46,360 --> 00:04:49,410
modo che qualunque cosa sia all'interno del contenuto

65
00:04:49,410 --> 00:04:52,945
sia ora vincolata dalla larghezza del contenitore lì.

66
00:04:52,945 --> 00:04:57,670
Allo stesso modo, spostandosi verso il basso al piè di pagina qui,

67
00:04:58,780 --> 00:05:01,650
anche nel piè di pagina,

68
00:05:01,650 --> 00:05:04,720
il primo div all'interno del piè di pagina,

69
00:05:04,720 --> 00:05:09,360
ho intenzione di applicare la classe come contenitore.

70
00:05:09,360 --> 00:05:13,055
E il div dentro lì,

71
00:05:13,055 --> 00:05:16,755
ho intenzione di applicare la classe come riga lì,

72
00:05:16,755 --> 00:05:19,735
al div dentro lì.

73
00:05:19,735 --> 00:05:25,225
Quindi questo div ci porterà fino a questo particolare div qui.

74
00:05:25,225 --> 00:05:29,105
E poi il prossimo div anche che è proprio sotto quello,

75
00:05:29,105 --> 00:05:31,820
applicherò la classe come riga.

76
00:05:31,820 --> 00:05:35,380
Quindi ora il mio piè di pagina contiene due righe qui,

77
00:05:35,380 --> 00:05:38,520
useremo lo stile del contenuto usando la colonna,

78
00:05:38,520 --> 00:05:40,110
le classi in breve tempo.

79
00:05:40,110 --> 00:05:42,365
Andando anche all'intestazione,

80
00:05:42,365 --> 00:05:51,500
applicherò la classe di riga al secondo div all'interno del contenitore div qui.

81
00:05:51,500 --> 00:05:54,920
Quindi questo div che corrisponde a quello che ho ottenuto,

82
00:05:54,920 --> 00:05:58,605
sarà una singola riga nell'intestazione.

83
00:05:58,605 --> 00:06:02,400
Diamo un'occhiata alla nostra pagina web risultante.

84
00:06:02,400 --> 00:06:04,365
Andando alla nostra pagina web,

85
00:06:04,365 --> 00:06:09,300
ora puoi vedere che il contenuto dell'intestazione è ora distinto dal

86
00:06:09,300 --> 00:06:14,935
resto all'interno di questa scatola grigia in alto qui.

87
00:06:14,935 --> 00:06:22,735
Ma il contenuto stesso è ora allineato con il contenuto qui sotto.

88
00:06:22,735 --> 00:06:25,685
Ora, questo è il risultato dell'utilizzo del contenitore.

89
00:06:25,685 --> 00:06:27,550
Passando al piè di pagina, è

90
00:06:27,550 --> 00:06:32,635
ora possibile vedere che anche il contenuto del piè di pagina è allineato all'interno del contenitore.

91
00:06:32,635 --> 00:06:36,800
Ma la pagina non sembra ancora così grande,

92
00:06:36,800 --> 00:06:44,705
ora applicheremo le classi di colonna alle div interne ora.

93
00:06:44,705 --> 00:06:48,665
Tornando alla pagina index.html,

94
00:06:48,665 --> 00:06:51,865
inizieremo ora ad applicare le classi di colonna.

95
00:06:51,865 --> 00:06:58,365
Quindi andando all'intestazione, al secondo div interno all'interno del jumbotron qui,

96
00:06:58,365 --> 00:07:06,230
fammi applicare una classe come colonna 12, colonna sm-6.

97
00:07:06,230 --> 00:07:09,960
Quindi, qui il contenuto in

98
00:07:09,960 --> 00:07:15,525
questo primo div occuperà l'intera riga per dimensioni dello schermo extra piccole,

99
00:07:15,525 --> 00:07:18,770
e quindi occuperà metà della riga, quindi è per questo che la colonna

100
00:07:18,770 --> 00:07:24,235
sm-6 per dimensioni dello schermo da piccole a extra large.

101
00:07:24,235 --> 00:07:26,480
Ora, allo stesso modo per il secondo div qui,

102
00:07:26,480 --> 00:07:28,715
anche se non contiene alcun contenuto lì,

103
00:07:28,715 --> 00:07:37,840
definirò le classi di colonna qui come colonna 12 e poi colonna sm.

104
00:07:37,840 --> 00:07:40,990
Quindi, si noti che qui specificando la colonna 12,

105
00:07:40,990 --> 00:07:45,270
sto esplicitamente affermando che per schermi di dimensioni extra ridotte qualunque contenuto sia

106
00:07:45,270 --> 00:07:49,860
all'interno di questo div sarà impilato sotto il contenuto qui.

107
00:07:49,860 --> 00:07:54,150
E poi per schermi di dimensioni da piccole a extra large,

108
00:07:54,150 --> 00:07:59,270
questo contenuto occuperà la quantità residua di

109
00:07:59,270 --> 00:08:04,925
colonne nella riga per dimensioni di schermo da piccole a extra large.

110
00:08:04,925 --> 00:08:09,255
Quindi qui in questo caso poiché sei colonne sono occupate da questo contenuto,

111
00:08:09,255 --> 00:08:12,745
questo otterrà le restanti sei colonne lì.

112
00:08:12,745 --> 00:08:18,030
Passando alle righe del contenuto qui,

113
00:08:18,030 --> 00:08:20,110
per il contenuto qui,

114
00:08:20,110 --> 00:08:22,860
quindi per questo primo contenuto,

115
00:08:22,860 --> 00:08:24,590
che è un'etichetta qui,

116
00:08:24,590 --> 00:08:29,240
applicherò le classi come colonna 12,

117
00:08:29,240 --> 00:08:34,985
colonna sm-4, colonna md-3.

118
00:08:34,985 --> 00:08:39,770
Quindi, affermando che per le dimensioni dello schermo extra piccole,

119
00:08:39,770 --> 00:08:42,650
questo occuperà l'intera riga, per le piccole,

120
00:08:42,650 --> 00:08:44,160
occuperà colonne complete,

121
00:08:44,160 --> 00:08:46,585
e quindi per le dimensioni medio-extra grandi,

122
00:08:46,585 --> 00:08:50,395
occuperà tre colonne nella riga.

123
00:08:50,395 --> 00:08:56,810
Ora, quindi la parte rimanente sarà occupata dal contenuto qui sotto,

124
00:08:56,810 --> 00:09:00,575
quindi a quello, applicherò le classi come col,

125
00:09:00,575 --> 00:09:05,715
indicando che questo sarà impilato sotto

126
00:09:05,715 --> 00:09:11,025
il contenuto qui nelle dimensioni dello schermo extra piccole,

127
00:09:11,025 --> 00:09:12,690
e poi dirò colonna sm,

128
00:09:12,690 --> 00:09:16,940
quindi questo significa che questo occuperà il rimanenti otto colonne qui,

129
00:09:16,940 --> 00:09:19,300
perché quattro colonne sono occupate da questo,

130
00:09:19,300 --> 00:09:22,360
e poi diremo colonna md,

131
00:09:22,360 --> 00:09:24,320
quindi questo significa che questo occuperà

132
00:09:24,320 --> 00:09:27,300
le restanti nove colonne perché tre colonne sono

133
00:09:27,300 --> 00:09:33,230
occupate per dimensioni medio-extra grandi schermo dal contenuto qui sopra.

134
00:09:33,230 --> 00:09:37,810
Ora che ho definito per la prima riga di contenuto,

135
00:09:37,810 --> 00:09:43,070
ho intenzione di prendere la stessa applicazione di classe di colonna qui,

136
00:09:43,070 --> 00:09:49,415
e quindi applicarla alla seconda riga qui,

137
00:09:49,415 --> 00:09:52,345
e anche la terza riga di contenuto qui.

138
00:09:52,345 --> 00:09:57,240
Allo stesso modo, ho intenzione di copiare questo e quindi applicare lo stesso

139
00:09:57,240 --> 00:10:04,690
ai contenuti div qui sotto.

140
00:10:04,690 --> 00:10:11,950
Così ora abbiamo configurato sia l'intestazione che le colonne di contenuto lì.

141
00:10:11,950 --> 00:10:14,690
Passiamo ora al piè di pagina.

142
00:10:14,690 --> 00:10:21,260
Nel piè di pagina, noterai che questo div contiene tre div interni qui,

143
00:10:21,260 --> 00:10:23,720
quindi per ognuno di questi tre div interni qui,

144
00:10:23,720 --> 00:10:26,570
applicherò le classi di colonna corrispondenti.

145
00:10:26,570 --> 00:10:27,680
Quindi, per il primo,

146
00:10:27,680 --> 00:10:35,280
che contiene collegamenti alle varie pagine che faranno parte di questo sito web,

147
00:10:35,280 --> 00:10:38,395
ho intenzione di applicare una classe di colonna,

148
00:10:38,395 --> 00:10:46,045
come colonna quattro, colonna sm-2 qui.

149
00:10:46,045 --> 00:10:50,840
Quindi significa che per le dimensioni dello schermo extra piccole,

150
00:10:50,840 --> 00:10:55,320
questo occuperà quattro colonne e per le piccole e extra grandi,

151
00:10:55,320 --> 00:10:58,660
occuperà solo due colonne qui.

152
00:10:59,040 --> 00:11:01,790
Quindi per il secondo,

153
00:11:01,790 --> 00:11:08,425
il secondo div lì applicherò le classi come colonna sette.

154
00:11:08,425 --> 00:11:12,050
Quindi notare che ho quattro qui e poi sette qui,

155
00:11:12,050 --> 00:11:14,755
in modo che il totale occupa 11 colonne.

156
00:11:14,755 --> 00:11:16,430
Ho lasciato una colonna vuota.

157
00:11:16,430 --> 00:11:21,520
Tornerò più tardi per applicare un offset per occuparmi della colonna extra.

158
00:11:21,520 --> 00:11:23,400
Quindi questa è la colonna sette,

159
00:11:23,400 --> 00:11:31,345
e poi col-sm-5 alla seconda.

160
00:11:31,345 --> 00:11:33,630
Quindi questo è due più cinque, sette.

161
00:11:33,630 --> 00:11:36,390
Quindi ho ancora cinque colonne rimaste,

162
00:11:36,390 --> 00:11:40,685
che posso usare per il terzo div qui.

163
00:11:40,685 --> 00:11:44,610
Ora, per le dimensioni dello schermo più piccole,

164
00:11:44,610 --> 00:11:47,700
questi due contenuti saranno posizionati fianco a fianco,

165
00:11:47,700 --> 00:11:52,080
e quindi questo div che contiene collegamenti a

166
00:11:52,080 --> 00:11:58,585
un sito di social media sarà in una riga separata impilata di seguito.

167
00:11:58,585 --> 00:12:04,390
Ma per schermi di dimensioni da piccole a extra large,

168
00:12:04,390 --> 00:12:07,680
la prima occuperà due colonne,

169
00:12:07,680 --> 00:12:10,240
la seconda occuperà cinque e la restante sarà

170
00:12:10,240 --> 00:12:13,545
occupata dai link dei social media qui.

171
00:12:13,545 --> 00:12:15,230
Quindi per il terzo,

172
00:12:15,230 --> 00:12:18,650
applicherò la classe

173
00:12:18,650 --> 00:12:26,515
come col-12 col-sm-4 qui.

174
00:12:26,515 --> 00:12:32,625
Quindi col-12 col-sm-4, il che significa che questo occuperà

175
00:12:32,625 --> 00:12:37,090
un set separato di 12 colonne

176
00:12:37,090 --> 00:12:42,310
impilate sotto il contenuto precedente per le dimensioni dello schermo extra

177
00:12:42,310 --> 00:12:45,040
piccole, ma per le piccole e extra grandi occuperà quattro colonne.

178
00:12:45,040 --> 00:12:46,815
Quindi eccoci qui quattro più cinque,

179
00:12:46,815 --> 00:12:48,430
nove più due 11.

180
00:12:48,430 --> 00:12:52,635
Quindi una colonna è ancora rimasta per piccole a extra large.

181
00:12:52,635 --> 00:12:57,510
Quindi è così che applicherò quella colonna più vicina a questo.

182
00:12:57,510 --> 00:13:03,250
Ora, abbiamo ancora quello qui sotto in cui contiamo i diritti d'autore per questo.

183
00:13:03,250 --> 00:13:08,745
Ho intenzione di applicare la classe come colonna automatica,

184
00:13:08,745 --> 00:13:12,050
il che significa che questo contenuto occuperà

185
00:13:12,050 --> 00:13:15,515
solo abbastanza colonne come richiesto dal contenuto lì.

186
00:13:15,515 --> 00:13:20,405
Più tardi vedrai che posizionerò questo contenuto al centro

187
00:13:20,405 --> 00:13:26,385
dello schermo usando così un'altra classe CSS bootstrap.

188
00:13:26,385 --> 00:13:29,035
Ci arriveremo nel prossimo esercizio.

189
00:13:29,035 --> 00:13:33,405
Quindi con questo abbiamo applicato varie classi di colonna per l'intestazione,

190
00:13:33,405 --> 00:13:35,880
il contenuto, e il piè di pagina.

191
00:13:35,880 --> 00:13:39,280
Questo è un buon momento per noi per salvare le modifiche e poi andare

192
00:13:39,280 --> 00:13:43,475
a dare un'occhiata alla pagina aggiornata indicizzata o HTML.

193
00:13:43,475 --> 00:13:46,690
Dando un'occhiata alla nostra pagina index.html,

194
00:13:46,690 --> 00:13:51,315
noterai come nell'intestazione che è il Jumbotron,

195
00:13:51,315 --> 00:13:55,145
il contenuto sta ora occupando solo metà dello schermo lì.

196
00:13:55,145 --> 00:14:00,210
L' altra metà dello schermo di questa particolare riga è ora lasciato vuoto.

197
00:14:00,210 --> 00:14:03,180
Scendendo alle righe di contenuto,

198
00:14:03,180 --> 00:14:07,685
si vede che l'etichetta sul lato sinistro occupa

199
00:14:07,685 --> 00:14:14,280
tre o quattro colonne a seconda di quale dimensione dello schermo erano in uso,

200
00:14:14,280 --> 00:14:18,250
e il restante essere occupato dal resto del contenuto.

201
00:14:18,250 --> 00:14:19,780
Quindi qui abbiamo una riga,

202
00:14:19,780 --> 00:14:21,770
la seconda fila e la terza riga.

203
00:14:21,770 --> 00:14:26,330
E poi il piè di pagina qui puoi vedere che i link sono sul lato sinistro,

204
00:14:26,330 --> 00:14:28,065
gli altri nel mezzo,

205
00:14:28,065 --> 00:14:31,150
e poi i link dei social media sul lato destro.

206
00:14:31,150 --> 00:14:35,460
Quindi questo è per uno schermo di medie dimensioni.

207
00:14:35,460 --> 00:14:42,765
Ora, se vuoi guardare la stessa vista per uno schermo di dimensioni extra piccole o piccole,

208
00:14:42,765 --> 00:14:45,045
se stai usando Chrome,

209
00:14:45,045 --> 00:14:47,960
Chrome ha gli strumenti di sviluppo che puoi

210
00:14:47,960 --> 00:14:51,010
attivare facendo clic sugli strumenti di sviluppo di visualizzazione,

211
00:14:51,010 --> 00:14:53,105
e quando gli strumenti di sviluppo vengono fuori,

212
00:14:53,105 --> 00:14:56,890
noterai, permettimi di ridurre le dimensioni Qui.

213
00:14:56,890 --> 00:15:00,930
Noterai questo piccolo alle finestre lì.

214
00:15:00,930 --> 00:15:06,500
Quindi facendo clic su che si attiva la visualizzazione reattiva per questi siti lì.

215
00:15:06,500 --> 00:15:15,680
Quindi puoi vedere che qui la vista di questa stessa pagina web su un pixel a sito,

216
00:15:15,680 --> 00:15:19,300
che è 411 per 731 in modalità verticale,

217
00:15:19,300 --> 00:15:22,805
quindi che corrisponde a una dimensione dello schermo extra piccola, in

218
00:15:22,805 --> 00:15:25,300
modo da poter vedere come è disposto il contenuto.

219
00:15:25,300 --> 00:15:28,145
Così si può vedere il contenuto Jumbotron lì

220
00:15:28,145 --> 00:15:31,745
e poi la parte rimanente del contenuto qui sotto.

221
00:15:31,745 --> 00:15:34,585
E poi fino al piè di pagina.

222
00:15:34,585 --> 00:15:40,500
Quindi nel piè di pagina puoi vedere come i link e gli annunci hanno disposto fianco a fianco.

223
00:15:40,500 --> 00:15:45,880
Ora riducendo le dimensioni dello schermo in modo che possiamo vedere come quel piè di pagina è disposto qui.

224
00:15:45,880 --> 00:15:48,735
Quindi la parte rimanente, hai i link sul lato sinistro,

225
00:15:48,735 --> 00:15:51,470
hai l'indirizzo sul lato destro,

226
00:15:51,470 --> 00:15:56,515
e poi i link dei social media in basso in una riga separata qui,

227
00:15:56,515 --> 00:15:59,775
e poi il copyright in basso lì.

228
00:15:59,775 --> 00:16:04,935
Quindi questa è la vista interessante che vediamo per le dimensioni dello schermo extra piccole.

229
00:16:04,935 --> 00:16:07,450
Tornando al nostro codice qui,

230
00:16:07,450 --> 00:16:11,710
ora applicherò l'ordine e le classi di offset a

231
00:16:11,710 --> 00:16:17,255
questo contenuto per visualizzare il contenuto in un modo leggermente diverso.

232
00:16:17,255 --> 00:16:21,850
Quindi andando alla riga del contenuto qui,

233
00:16:21,850 --> 00:16:27,820
per i due div qui che contengono il contenuto,

234
00:16:27,820 --> 00:16:32,020
ho intenzione di applicare le classi come

235
00:16:32,020 --> 00:16:40,150
ordine-sm-last per la prima riga qui.

236
00:16:40,150 --> 00:16:50,120
E poi per quello qui sotto applicherò l'ordine sm prima alla riga quaggiù.

237
00:16:50,120 --> 00:16:53,300
Quindi il che significa che quando questo contenuto viene visualizzato,

238
00:16:53,300 --> 00:16:56,090
questo contenuto verrà tirato sul lato sinistro dello schermo e quindi

239
00:16:56,090 --> 00:16:58,880
questa colonna verrà spinta sul lato destro dello schermo.

240
00:16:58,880 --> 00:17:02,400
Quindi questo sarà ordinato sul lato destro e questo sarà ordinato sul lato sinistro.

241
00:17:02,400 --> 00:17:08,075
Come ho spiegato circa le clausole di ordine nella lezione precedente.

242
00:17:08,075 --> 00:17:09,880
Allo stesso modo dalla seconda riga,

243
00:17:09,880 --> 00:17:13,330
lo lascerò come tale, ma dalla terza riga applicherò

244
00:17:13,330 --> 00:17:17,240
lo stesso insieme di classi di ordine.

245
00:17:17,240 --> 00:17:20,290
Quindi andrò alla terza riga qui,

246
00:17:20,290 --> 00:17:25,425
e poi applicherò l'ordine-sm-last a questo,

247
00:17:25,425 --> 00:17:30,850
e poi applicherò l'ordine-sm-first a questo.

248
00:17:31,460 --> 00:17:36,450
E così questo nuovo sarà riordinato in modo

249
00:17:36,450 --> 00:17:38,300
tale che questo contenuto apparirà

250
00:17:38,300 --> 00:17:40,870
sul lato sinistro e questo contenuto apparirà sul lato destro.

251
00:17:40,870 --> 00:17:46,640
Questo è solo un modo di posizionare il contenuto in un modo un po 'più interessante.

252
00:17:46,640 --> 00:17:50,210
Ora spostandosi verso il basso nel piè di pagina qui,

253
00:17:50,210 --> 00:17:54,690
ora ho intenzione di applicare una classe offset qui.

254
00:17:54,690 --> 00:18:00,440
Quindi notare che ho detto che queste due colonne occuperanno quattro più sette, 11.

255
00:18:00,440 --> 00:18:02,130
Quindi una colonna è rimasta.

256
00:18:02,130 --> 00:18:07,295
Quindi ho intenzione di applicare una classe offset-1 a questo.

257
00:18:07,295 --> 00:18:12,320
Quindi il che significa che questo contenuto su questo div verrà spinto a destra da una colonna qui.

258
00:18:12,320 --> 00:18:14,710
Allo stesso modo dal momento che ho detto offset uno,

259
00:18:14,710 --> 00:18:23,145
questo verrà applicato a extra small fino alle dimensioni dello schermo extra large.

260
00:18:23,145 --> 00:18:28,235
E così questo è l'uso della classe offset.

261
00:18:28,235 --> 00:18:30,060
Quindi, ora che abbiamo apportato le modifiche,

262
00:18:30,060 --> 00:18:36,285
salviamo le modifiche e poi andiamo a dare un'occhiata alla nostra pagina web nel browser.

263
00:18:36,285 --> 00:18:38,430
Tornando a quel browser,

264
00:18:38,430 --> 00:18:43,715
ora vedi come l'intestazione è come prima,

265
00:18:43,715 --> 00:18:46,850
ma nella prima riga del contenuto,

266
00:18:46,850 --> 00:18:49,090
vedi che questo contenuto è stato spinto

267
00:18:49,090 --> 00:18:51,925
sul lato sinistro e l'etichetta sul lato destro.

268
00:18:51,925 --> 00:18:56,090
La seconda fila è diversa è stata mantenuta proprio come prima.

269
00:18:56,090 --> 00:18:58,330
Ma per il terzo vedrai che questo è stato

270
00:18:58,330 --> 00:19:00,780
spinto a destra e questo è stato spinto a sinistra.

271
00:19:00,780 --> 00:19:06,900
Quindi questo è l'uso della classe ordine-sm-last e ordine-sm-first è lì.

272
00:19:06,900 --> 00:19:08,530
Ora andando al piè di pagina,

273
00:19:08,530 --> 00:19:18,195
ora vedi che il contenuto nel primo div qui è stato spinto a destra da una colonna,.

274
00:19:18,195 --> 00:19:21,560
Quindi puoi vedere che c'è una colonna di spazi bianchi qui,

275
00:19:21,560 --> 00:19:27,790
e questo non è spinto a destra e quelli rimanenti sono stati formattati di conseguenza.

276
00:19:27,790 --> 00:19:32,235
Quindi con questo completiamo le modifiche

277
00:19:32,235 --> 00:19:37,790
alla nostra pagina index.html o pagina aggiuntiva per questo particolare esercizio.

278
00:19:37,790 --> 00:19:41,665
Con questo completiamo questo particolare esercizio.

279
00:19:41,665 --> 00:19:46,235
In questo esercizio abbiamo esaminato l'uso delle

280
00:19:46,235 --> 00:19:53,800
classi contenitore, riga e colonna al fine di progettare la nostra pagina web un po 'più bella.

281
00:19:53,800 --> 00:19:57,705
Nella seconda parte dell'esercizio che seguirà questo,

282
00:19:57,705 --> 00:20:04,680
aggiungeremo altri per cercare di migliorare il modo in cui queste pagine web sono renderizzate.

283
00:20:04,680 --> 00:20:08,375
Non è ancora per mia soddisfazione.

284
00:20:08,375 --> 00:20:12,920
Ovviamente, c'è ancora spazio per migliorare.

285
00:20:12,920 --> 00:20:16,290
Questo potrebbe essere un buon momento per fare un commento git con

286
00:20:16,290 --> 00:20:21,470
il messaggio Bootstrap Grid Part One.