1
00:00:00,390 --> 00:00:05,640
Bentornati in questa lezione continueremo a lavorare con la griglia di bootstrap, in particolare ci sono

2
00:00:05,640 --> 00:00:07,550
due caratteristiche principali che voglio evidenziare.

3
00:00:07,590 --> 00:00:12,070
Il primo è che voglio affrontare le quattro diverse dimensioni che ho brevemente menzionato.

4
00:00:12,150 --> 00:00:16,950
Abbiamo lavorato con la colonna Elgie non ha parlato di cosa significhi e ci sono altre tre

5
00:00:16,950 --> 00:00:18,530
dimensioni con cui questo funzionerà.

6
00:00:18,600 --> 00:00:24,270
Vogliono anche mostrarti come possiamo annidare le griglie all'interno di altre griglie per dividere ulteriormente quelle 12

7
00:00:24,270 --> 00:00:25,820
unità in pezzi più piccoli.

8
00:00:26,250 --> 00:00:31,200
tornando al browser e dando un'occhiata alla demo che abbiamo creato nell'ultima lezione.

9
00:00:31,200 --> 00:00:34,100
Ma cominciamo parlando delle quattro dimensioni che comincerò

10
00:00:34,290 --> 00:00:41,700
Quindi abbiamo due righe una che ha 12 colonne una che ha tre che attraversano e che guardano cosa

11
00:00:41,700 --> 00:00:48,660
succede mentre ridimensiono la finestra, le cose cambiano bene e poi colpiamo un punto di interruzione proprio qui

12
00:00:48,660 --> 00:00:50,810
dove tutto cambia in ogni colonna.

13
00:00:50,850 --> 00:00:57,420
Ora occupa 12 unità complete e si impilano l'una sull'altra e mentre continuano a ridimensionarsi

14
00:00:57,420 --> 00:00:59,400
non si noterà alcun cambiamento.

15
00:00:59,460 --> 00:01:03,140
Continuano tutti a prendere 12 unità e si impilano l'una sull'altra.

16
00:01:03,330 --> 00:01:08,620
Ma ci sono in realtà quattro diverse dimensioni che possiamo specificare in modo che possiamo avere quattro diversi layout.

17
00:01:09,030 --> 00:01:13,850
In questo momento questo è un layout mobile che è un accesso extra piccolo.

18
00:01:14,040 --> 00:01:20,730
Poi diventiamo troppo piccoli, che è come un tablet e quindi è un medium che è proprio qui.

19
00:01:20,730 --> 00:01:26,590
Questo sarebbe su un laptop o una finestra del browser più piccola e quindi di grandi dimensioni che abbiamo proprio qui.

20
00:01:26,940 --> 00:01:31,340
Quindi non sembra che ci sia molta differenza eccetto qui quando passiamo tra essere

21
00:01:31,350 --> 00:01:31,870
anche grandi.

22
00:01:31,980 --> 00:01:38,330
Ma ci sono quattro dimensioni e possiamo specificare i rapporti e le proporzioni per ciascuna di queste dimensioni.

23
00:01:38,460 --> 00:01:44,850
Quindi, nel dock di bootstrap sotto le opzioni di griglia qui il sistema di griglia è possibile vedere c'è un tavolo

24
00:01:44,850 --> 00:01:46,900
e ci mostra le quattro diverse dimensioni.

25
00:01:47,130 --> 00:01:53,220
Quindi ci sono piccoli dispositivi extra come i telefoni rispetto ai piccoli dispositivi che sono dispositivi desktop tablet di

26
00:01:53,400 --> 00:01:59,190
grandi dimensioni o desktop più grandi di oltre 12.000 pixel e ognuno di essi ha un prefisso che

27
00:01:59,190 --> 00:02:02,940
possiamo usare in modo che l'accesso alla colonna sia davvero piccolo.

28
00:02:03,000 --> 00:02:08,630
S. M. è piccolo M. D. è medio e LG è grande che è quello che stavamo usando.

29
00:02:09,030 --> 00:02:14,170
Quindi diciamo che voglio che il mio layout rimanga lo stesso al grande punto di interruzione.

30
00:02:14,340 --> 00:02:22,020
E poi quando passiamo al medium qui voglio queste 12 colonne che ognuna prende una singola unità.

31
00:02:22,800 --> 00:02:25,320
Voglio che ognuno di loro occupi invece due unità.

32
00:02:25,320 --> 00:02:27,670
Quindi finiremo con sei che attraversano.

33
00:02:27,690 --> 00:02:29,510
E poi un ulteriore 6 sotto.

34
00:02:29,820 --> 00:02:32,880
Concentriamoci su questo e per semplificare le cose.

35
00:02:33,100 --> 00:02:36,360
Per ora mi libererò della seconda fila.

36
00:02:36,600 --> 00:02:39,170
Quindi tutto ciò che abbiamo è questo qui.

37
00:02:39,210 --> 00:02:43,730
Quindi, quando raggiungiamo questo breakpoint medio, non voglio che ciò accada.

38
00:02:43,740 --> 00:02:48,510
Invece voglio che passino sei colonne per farlo.

39
00:02:48,510 --> 00:02:50,740
Aggiungo solo in un'altra classe.

40
00:02:50,940 --> 00:02:58,120
Quindi lo farò a ciascuno e sarà un mezzo colonna.

41
00:02:58,200 --> 00:03:05,600
Quindi, quando questa griglia è impostata sulla dimensione media, desideriamo che ciascuna di esse occupi due unità e noi salveremo.

42
00:03:05,640 --> 00:03:07,200
Ora andiamo e aggiorniamo.

43
00:03:07,380 --> 00:03:09,120
Fallo a grandezza naturale.

44
00:03:09,120 --> 00:03:12,380
Nulla cambia perché siamo di grandi dimensioni.

45
00:03:12,570 --> 00:03:16,190
Ma ora quando passo al medium qui.

46
00:03:16,200 --> 00:03:21,380
Notate che ora occupano due unità e ne otteniamo sei.

47
00:03:21,630 --> 00:03:28,230
E se continuo a ridurlo, colpiamo il piccolo punto di interruzione ed è qui che passa

48
00:03:28,230 --> 00:03:33,480
dove ogni colonna ora attraversa 12 unità e si impilano l'una sull'altra.

49
00:03:33,900 --> 00:03:41,040
Quindi torniamo indietro e leggiamo torniamo al nostro sublime e facciamo rivivere la nostra vecchia griglia.

50
00:03:41,130 --> 00:03:46,410
Quindi ci sbarazzeremo di questo perché non è così comune in realtà avere 12 componenti diversi

51
00:03:46,410 --> 00:03:47,160
in corso.

52
00:03:47,160 --> 00:03:53,300
Di solito stai lavorando con tre o quattro volte sei ma 12 colonne singole è piuttosto raro.

53
00:03:53,400 --> 00:03:59,550
Quindi torniamo a questo e quello che faremo è provare a ricreare quella griglia che viene riprodotta dal programma del

54
00:03:59,550 --> 00:04:01,250
tour di Olafur Arnold qui.

55
00:04:01,590 --> 00:04:04,200
Quindi inizia alle quattro attraversando.

56
00:04:04,200 --> 00:04:05,400
Quindi ci riduciamo.

57
00:04:05,550 --> 00:04:12,060
C'è un punto di rottura medio e siamo ancora alle quattro e poi arriviamo al piccolo break point e

58
00:04:12,060 --> 00:04:13,100
andiamo a due.

59
00:04:13,140 --> 00:04:15,580
E poi mobile x o small è uno.

60
00:04:15,990 --> 00:04:20,530
Questo è ciò che tenteremo di ricreare non solo il contenuto della struttura.

61
00:04:20,790 --> 00:04:22,080
Quindi torneremo qui.

62
00:04:22,650 --> 00:04:25,740
E vogliamo iniziare con quattro che attraversano.

63
00:04:25,740 --> 00:04:31,860
Ciò significa che ognuno occupa tre unità e quindi possiamo cambiare il testo qui.

64
00:04:31,860 --> 00:04:35,510
E diciamo solo di dire o data.

65
00:04:35,610 --> 00:04:43,470
Quindi, se fossimo freschi dovremmo avere quattro colonne che attraversano ciò che facciamo, il che è esattamente

66
00:04:43,470 --> 00:04:46,320
ciò che inizia quando quattro attraversano.

67
00:04:46,320 --> 00:04:48,720
E l'unica differenza è davvero il contenuto reale.

68
00:04:48,720 --> 00:04:55,650
Quindi, invece di ogni colonna dovremmo semplicemente aggiungere un pulsante H a un paragrafo e qualunque altro contenuto abbiamo bisogno

69
00:04:55,650 --> 00:05:00,190
di un piccolo H. R. sembra e avremmo ancora la stessa spaziatura.

70
00:05:00,600 --> 00:05:01,200
Tutto ok.

71
00:05:01,200 --> 00:05:03,790
Quindi il prossimo punto di rottura è quando arriviamo alla media.

72
00:05:03,960 --> 00:05:05,840
Rimane alle quattro.

73
00:05:06,300 --> 00:05:12,570
Quindi quello che potresti pensare che dobbiamo fare è specificare il punto di rottura medio, così

74
00:05:12,570 --> 00:05:15,440
quando lo colpiamo dovrebbero comunque occuparne ciascuno tre.

75
00:05:15,600 --> 00:05:26,810
Possiamo tornare al sublime e aggiungerli e chiamarli di nuovo medium tre e salvare e ognuno di loro parte da tre unità che colpiscono mediamente e

76
00:05:26,840 --> 00:05:33,300
restano a tre unità e poi ci dirigiamo in piccolo e ora sono di nuovo

77
00:05:33,290 --> 00:05:34,190
12 unità.

78
00:05:34,310 --> 00:05:42,610
E quello che vogliamo per seguire questo è che quando raggiungiamo le dimensioni ridotte, ora occupano ciascuna

79
00:05:43,400 --> 00:05:49,140
sei unità, così possiamo entrare qui e aggiungerle nella colonna small 6.

80
00:05:49,400 --> 00:05:57,070
Quindi, le grandi dimensioni ciascuna di queste occupano il 25% di tre unità su 12 con dimensioni medie.

81
00:05:57,120 --> 00:05:57,920
Stessa cosa.

82
00:05:58,010 --> 00:06:04,730
Prendono il 25 percento e poi, alla piccola dimensione che è per i tablet, prendono ciascuno il 50 percento.

83
00:06:05,480 --> 00:06:12,980
Quindi rinnoviamo ogni ripresa tre minuti e poi tre unità, poi colpiamo piccola.

84
00:06:13,040 --> 00:06:17,880
E ora prendono ciascuno sei unità e poi abbiamo avuto un piccolo extra.

85
00:06:17,940 --> 00:06:21,620
Quindi prendono automaticamente le 12 unità complete che è ciò che vogliamo.

86
00:06:21,810 --> 00:06:27,350
Puoi vedere quando colpiamo in piccolo, vogliamo che prendano un'unità su tutta la superficie.

87
00:06:27,380 --> 00:06:28,010
Tutto ok.

88
00:06:28,010 --> 00:06:33,240
Quindi abbiamo questo, c'è un piccolo cambiamento che possiamo fare se torniamo al sublime.

89
00:06:33,770 --> 00:06:39,560
Vedrai che stiamo specificando queste tre unità due volte per il grande e il medio.

90
00:06:39,560 --> 00:06:46,700
Possiamo effettivamente sbarazzarci della colonna di tre grandi dimensioni e mettere semplicemente la media lì dentro e il bootstrap saprà che poiché stiamo

91
00:06:46,740 --> 00:06:51,650
impostando il medium come tre e non impostiamo esplicitamente il grande, sarà sufficiente prendere ciò che

92
00:06:51,650 --> 00:06:54,320
impostiamo per il medio e applicare a grande.

93
00:06:54,440 --> 00:06:55,880
Quindi funziona allo stesso modo.

94
00:06:55,880 --> 00:06:56,650
Niente è cambiato.

95
00:06:56,660 --> 00:07:02,420
Ho già un aspetto identico, il nostro breakpoint medio è ancora lì e le nostre piccole opere.

96
00:07:02,420 --> 00:07:04,800
Quindi non dobbiamo specificarlo due volte.

97
00:07:05,300 --> 00:07:10,460
Quindi lasciami venire N. Z. ci siamo sbarazzati di questo e funziona esattamente allo stesso modo.

98
00:07:10,520 --> 00:07:14,990
E infatti se diamo un'occhiata andiamo sul sito Web.

99
00:07:15,000 --> 00:07:19,770
Scommetto che se ispezioniamo ognuno di questi vedrai che ce ne andiamo.

100
00:07:19,780 --> 00:07:22,590
Colonna piccola sei colonne media tre.

101
00:07:22,790 --> 00:07:26,990
Esattamente quello che avevamo ora che abbiamo coperto quelle quattro diverse dimensioni.

102
00:07:27,070 --> 00:07:30,710
Spero che tu possa vedere quanto può essere versatile e utile il sistema di rete.

103
00:07:30,750 --> 00:07:31,520
Torniamo indietro.

104
00:07:31,740 --> 00:07:33,960
E ora parlerò alle griglie di nidificazione.

105
00:07:34,310 --> 00:07:40,130
Supponiamo che invece di questa prima colonna qui voglio dividerla a metà e avere qualcosa sul lato

106
00:07:40,130 --> 00:07:42,710
sinistro di quello e qualcosa sul lato destro.

107
00:07:42,800 --> 00:07:47,340
Posso effettivamente andare e aggiungere un'altra fila all'interno di lì.

108
00:07:47,370 --> 00:07:49,230
Quindi la classe è uguale alla riga.

109
00:07:49,740 --> 00:07:56,300
E poi all'interno di quella riga posso aggiungere un div con la classe uguale alla

110
00:07:56,300 --> 00:08:06,620
colonna e tutto appena troppo grande per ora la colonna large six e un'altra una colonna large 6 e scriverò solo del testo qui

111
00:08:06,710 --> 00:08:09,100
a metà strada e l'altra metà.

112
00:08:09,360 --> 00:08:18,170
Passiamo al primo semestre e all'altra metà e salveremo e diamo loro un classico rosa.

113
00:08:18,200 --> 00:08:24,000
Quindi, quello che abbiamo fatto ora è che avremo tre attraversamenti fermi o quattro.

114
00:08:24,000 --> 00:08:30,290
Uno due tre quattro e nel primo l'abbiamo diviso in altre 12 unità aggiungendo un'altra riga e stiamo

115
00:08:30,290 --> 00:08:35,420
usando i primi sei per dire qualcosa e stiamo usando il secondo sei per dire

116
00:08:36,330 --> 00:08:38,530
qualcos'altro che salva o aggiorna .

117
00:08:38,960 --> 00:08:41,770
Ecco fatto e rendilo ancora più ovvio.

118
00:08:41,780 --> 00:08:43,280
Lascia che io dia loro un'altra lezione.

119
00:08:43,400 --> 00:08:45,170
Chiamiamolo arancione.

120
00:08:45,370 --> 00:08:46,940
Non esiste ancora

121
00:08:46,940 --> 00:09:00,030
E definito questo appare arancione e avrà lo sfondo arancione e aggiungeremo in ordine un pixel rosso fisso

122
00:09:00,140 --> 00:09:04,870
e quindi effettivamente fare dasht OK.

123
00:09:05,540 --> 00:09:10,530
Aggiorna puoi vedere ora abbiamo ancora queste quattro cose in corso.

124
00:09:10,520 --> 00:09:16,880
Ciascuno occupa tre unità, ma dividiamo il primo in sei unità e sei unità aggiungendo

125
00:09:16,880 --> 00:09:19,160
quella riga e aggiungendo la riga.

126
00:09:19,160 --> 00:09:22,520
Non puoi semplicemente iniziare a farlo dove hai una colonna invece di una colonna.

127
00:09:22,520 --> 00:09:23,980
Ci deve essere una fila.

128
00:09:24,260 --> 00:09:25,520
E facciamo un altro.

129
00:09:25,910 --> 00:09:31,090
Mettiamo questo ultimo qui in sei piccoli pezzi all'interno.

130
00:09:31,500 --> 00:09:39,770
Quindi abbiamo bisogno di aggiungere una riga all'interno di quella classe div uguale alla riga anziché lì.

131
00:09:39,770 --> 00:09:48,770
Abbiamo bisogno di un altro div e ne avremo sei, in cui abbiamo due colonne di grandi dimensioni ciascuna occupando

132
00:09:48,770 --> 00:09:50,310
due su 12 unità.

133
00:09:50,310 --> 00:09:58,070
E ne vogliamo sei e poi andremo su ognuno di loro e aggiungiamo in quella classe arancione solo in modo

134
00:09:58,080 --> 00:09:59,370
che possiamo vederli.

135
00:10:00,440 --> 00:10:01,150
OK.

136
00:10:01,640 --> 00:10:06,540
Quindi abbiamo quattro grandi colonne che attraversano la prima che dividiamo a metà.

137
00:10:06,650 --> 00:10:12,410
L'ultimo che abbiamo diviso in sei pezzi e non puoi davvero vedere nulla, quindi non abbiamo inserito alcun testo.

138
00:10:12,920 --> 00:10:14,200
Quindi andiamo a farlo.

139
00:10:14,270 --> 00:10:20,100
O meglio, in realtà è solo dare un con o un'altezza alla classe arancione.

140
00:10:20,100 --> 00:10:22,950
Facciamo ognuno 50 pixel.

141
00:10:22,940 --> 00:10:29,330
E se ti aggiorno ti accorgi che ora tutto ciò che ha arancione quella classe arancione occupa un'altezza di

142
00:10:29,340 --> 00:10:29,960
50 pixel.

143
00:10:30,260 --> 00:10:37,640
Quindi abbiamo le nostre due colonne divise equamente e quindi le nostre sei colonne divise equamente all'interno di queste quattro

144
00:10:37,730 --> 00:10:40,880
colonne di livello superiore divise in modo uniforme.

145
00:10:40,880 --> 00:10:43,700
Quindi sono tutti pezzi importanti del sistema di griglia.

146
00:10:43,860 --> 00:10:46,420
In poche parole abbiamo 12 unità in ogni riga.

147
00:10:46,560 --> 00:10:48,300
Li dividi come preferisci.

148
00:10:48,360 --> 00:10:56,360
Esistono quattro taglie di dimensioni medio piccole e molto piccole e puoi riassegnare quelle 12 unità in uno di questi quattro

149
00:10:56,370 --> 00:10:58,900
punti di interruzione in quattro dimensioni diverse.

150
00:10:59,000 --> 00:11:03,050
Ed è così che ti ritrovi con questi bei layout reattivi e in generale il modello che

151
00:11:03,410 --> 00:11:04,870
vedi è quello sui siti mobili.

152
00:11:04,880 --> 00:11:10,700
la maggior parte dei siti avrà i propri contenuti semplicemente sovrapposti l'uno all'altro come faremmo qui se riducessi il problema.

153
00:11:10,700 --> 00:11:12,830
Quindi, per quanto riguarda le dimensioni ridotte,

154
00:11:12,840 --> 00:11:18,180
Questo è il layout comune su dispositivi mobili in cui non ci sono più contenuti nella stessa riga.

155
00:11:19,080 --> 00:11:19,540
OK.

156
00:11:19,700 --> 00:11:20,990
Torniamo al sublime.

157
00:11:21,090 --> 00:11:23,290
Assicurati di aver parlato dei tre obiettivi principali.

158
00:11:23,610 --> 00:11:28,160
Quindi abbiamo parlato dello scopo in cui il punto del sistema di griglia ci aiuta a deporre le cose.

159
00:11:28,160 --> 00:11:29,270
È meraviglioso.

160
00:11:29,660 --> 00:11:31,690
Comprendere le quattro diverse dimensioni.

161
00:11:31,700 --> 00:11:36,740
Quelli sono grandi piccoli di dimensioni medio-piccole e quindi griglie annidate a destra.

162
00:11:37,040 --> 00:11:42,450
Ed è quello che stiamo facendo qui dove aggiungiamo una riga invece di una colonna e quindi

163
00:11:42,600 --> 00:11:45,790
possiamo riempire quella riga con ulteriori sottocolonne nel prossimo video.

164
00:11:45,840 --> 00:11:48,650
Stiamo costruendo una semplice griglia di immagini usando il sistema di griglia