1
00:00:00,410 --> 00:00:06,720
Torneremo in questa lezione e dimostreremo il sistema di griglia di bootstrap e il sistema di rete è probabilmente la

2
00:00:06,720 --> 00:00:11,310
ragione numero uno per cui le persone usano il bootstrap per le ore di lavoro.

3
00:00:11,310 --> 00:00:16,500
I pulsanti sono belle modifiche stilistiche che possiamo fare con il bootstrap, ma il sistema

4
00:00:16,500 --> 00:00:19,290
di griglia bootstrap fungerà da scheletro dell'intera applicazione.

5
00:00:19,440 --> 00:00:23,980
È davvero un modo facile per noi di aggiungere una struttura e di strutturare la nostra applicazione.

6
00:00:24,000 --> 00:00:27,480
Quindi lascia che ti mostri alcuni esempi di cosa puoi fare con il sistema di griglia.

7
00:00:27,480 --> 00:00:33,990
Ho alcuni siti aperti da Bootstrap ex-beau il primo qui è una pagina di prodotto per un lanciatore d'acqua

8
00:00:34,380 --> 00:00:36,140
e scorrere verso il basso.

9
00:00:36,240 --> 00:00:37,530
Notare il lay out qui.

10
00:00:37,560 --> 00:00:46,740
Abbiamo tre elementi affiancati e poi notiamo anche che cambiano dimensione, quindi si ridimensionano e quando colpiscono le dimensioni

11
00:00:46,890 --> 00:00:50,310
del tablet si impilano uno sopra l'altro.

12
00:00:51,090 --> 00:00:56,940
Quindi questo è il sistema di griglia di bootstrap al lavoro, proprio come qui, dove abbiamo un altro effetto simile.

13
00:00:57,270 --> 00:01:02,100
Si scala e quindi si impilano su tablet e dimensioni mobili.

14
00:01:02,880 --> 00:01:04,110
Ecco un altro esempio.

15
00:01:04,140 --> 00:01:10,440
Questo è il musicista islandese e Olafur Arnolds e questo è scorrere verso il basso su questo sito.

16
00:01:10,560 --> 00:01:19,260
di griglia in modo da poter vedere un layout simile, ma non è solo che sia stato realizzato con un sistema di grid.

17
00:01:19,260 --> 00:01:23,150
Abbiamo alcuni contenuti che sono stati creati con il sistema

18
00:01:23,160 --> 00:01:25,210
Questo qui questo contenuto.

19
00:01:26,100 --> 00:01:28,350
Queste date del tour qui.

20
00:01:28,350 --> 00:01:33,930
In pratica, usando il sistema di griglia possiamo dire che vogliamo che alcuni contenuti occupino il 100% dello schermo,

21
00:01:34,950 --> 00:01:39,870
quindi possiamo anche usarlo per dire che vogliamo che ognuno di questi occupi il 25% della larghezza

22
00:01:39,870 --> 00:01:46,620
dello schermo fino a quando non colpiamo il lato mobile o la dimensione del tablet per ogni take up 50 ora e poi

23
00:01:46,620 --> 00:01:49,220
quando colpiamo Mobile prendono ciascuno il 100 percento.

24
00:01:49,860 --> 00:01:50,850
Stessa cosa fatta qui.

25
00:01:50,850 --> 00:01:56,660
Ci permette di dividerlo con lo schermo in pezzi e scegliere quanti pezzi vogliamo.

26
00:01:56,790 --> 00:02:00,660
Ognuno dei nostri elementi da prendere ed ecco l'ultimo che abbiamo già visto.

27
00:02:00,660 --> 00:02:05,670
Si chiama creativo deserto del deserto scorrere qui contenuti simili.

28
00:02:05,680 --> 00:02:09,530
Ecco il sistema di griglia e anche qui.

29
00:02:09,570 --> 00:02:11,430
Quindi questo è tutto fatto con il sistema di griglia.

30
00:02:11,430 --> 00:02:15,590
Tutto questo è davvero molto importante e molto eccitante.

31
00:02:15,760 --> 00:02:20,640
Ci aiuta a sistemare le cose così facilmente rispetto a quello che dovremmo fare senza bootstrap.

32
00:02:20,670 --> 00:02:25,660
Quindi utilizzeremo il sistema di griglia di bootstrap e praticamente tutte le applicazioni che utilizziamo con il bootstrap.

33
00:02:25,890 --> 00:02:27,500
E lascia che ti mostri uno di loro.

34
00:02:27,540 --> 00:02:33,940
Questa è la nostra applicazione del campo yo e notiamo che abbiamo una griglia di campeggi per across.

35
00:02:33,960 --> 00:02:39,750
E mentre ridimensiono lo schermo, notiamo che si scala e quindi passiamo a due attraverso e poi giù a Mobile.

36
00:02:40,050 --> 00:02:44,480
Andiamo da una parte ed è un layout mobile davvero bello e facile da usare.

37
00:02:44,760 --> 00:02:47,840
Quindi questo è solo un posto dove useremo un sistema di grid.

38
00:02:47,850 --> 00:02:54,060
Ora cominciamo a scrivere del codice usando il sistema di griglia in modo tale a schermo intero questa

39
00:02:54,060 --> 00:02:57,800
finestra e torniamo indietro per ottenere dotcom bootstrap nella scheda Valutati.

40
00:02:58,050 --> 00:03:00,850
Puoi cliccare sul sistema di griglia.

41
00:03:00,850 --> 00:03:05,670
C'è un bel po 'nel sistema di rete, ma comincerò semplicemente indicando un singolo

42
00:03:06,130 --> 00:03:07,300
numero qui 12.

43
00:03:07,470 --> 00:03:09,890
Questo è molto importante per il funzionamento del sistema di rete.

44
00:03:09,900 --> 00:03:15,930
Quindi ogni contenitore e bootstrap può essere diviso in 12 diverse colonne e quindi usando il sistema

45
00:03:16,230 --> 00:03:21,150
a griglia possiamo scegliere quante di quelle 12 unità ogni elemento dovrebbe occupare.

46
00:03:21,150 --> 00:03:27,050
Quindi in questo caso sembra che abbiano qualcosa che occupa circa 10 unità su 12.

47
00:03:27,060 --> 00:03:33,420
E poi qui due su 12 unità o potrebbero essere nove e tre, ma hanno qualche rapporto in

48
00:03:33,420 --> 00:03:40,320
cui hanno più di quei 12 sul lato sinistro e poi una piccola frazione dei 12 sul lato destro.

49
00:03:40,770 --> 00:03:46,510
Quindi se torniamo al campo qui questo è il nostro contenitore proprio qui.

50
00:03:46,890 --> 00:03:51,670
E ciascuno di questi su 12 unità ciascuno occupa tre unità.

51
00:03:51,810 --> 00:03:56,850
Quindi finiamo con quattro colonne uguali e poi lo riduciamo qui.

52
00:03:56,880 --> 00:04:00,040
Ora prendono ciascuno sei unità su 12.

53
00:04:00,240 --> 00:04:02,840
Quindi, di nuovo quel numero 12 è molto importante.

54
00:04:02,850 --> 00:04:03,660
Ora andiamo a destra.

55
00:04:03,660 --> 00:04:05,130
La nostra primissima griglia.

56
00:04:05,250 --> 00:04:12,710
un file. H t m l è vuoto tranne che per i bootstrap del file SS e per iniziare dobbiamo definire un container.

57
00:04:12,870 --> 00:04:14,640
Quindi ho una griglia creata da

58
00:04:14,860 --> 00:04:18,180
Ogni volta che usiamo una griglia Boucek deve essere all'interno di un contenitore.

59
00:04:18,210 --> 00:04:22,230
Quindi la classe è uguale al contenitore.

60
00:04:22,290 --> 00:04:28,950
E la prima cosa che dobbiamo fare è trovare un altro div con la classe uguale alla riga invece di ogni riga.

61
00:04:29,220 --> 00:04:31,100
Abbiamo 12 unità tra cui scegliere.

62
00:04:31,350 --> 00:04:37,110
Quindi, quello che inizieremo facendo è solo una divisione 50 50, avremo 1 div che occupa 6 su

63
00:04:37,110 --> 00:04:40,730
12 e quindi un altro div che occupa 6 su 12.

64
00:04:41,070 --> 00:04:42,050
Quindi facciamolo ora.

65
00:04:42,120 --> 00:04:48,060
Aggiungeremo un div e poi aggiungerò anche la mia seconda divisione e al momento sono solo due dispositivi vuoti.

66
00:04:48,330 --> 00:04:49,430
Non hai intenzione di lavorare.

67
00:04:49,650 --> 00:04:57,000
Ma quello che farò è aggiungere una classe al primo e questa sembrerà una colonna un po 'strana Un grande

68
00:04:57,670 --> 00:05:00,300
sei e faremo la stessa cosa qui.

69
00:05:00,300 --> 00:05:03,520
La classe è uguale alla colonna sei.

70
00:05:03,630 --> 00:05:05,200
Quindi aggiungeremo del contenuto qui.

71
00:05:05,210 --> 00:05:10,880
Diranno solo colonne di sei grandi dimensioni.

72
00:05:10,950 --> 00:05:12,140
La stessa cosa qui.

73
00:05:12,210 --> 00:05:18,950
E mentre lo faccio risparmiamo e in realtà non vedremo molto che non vediamo la griglia stessa.

74
00:05:19,020 --> 00:05:24,300
Quindi per renderlo più chiaro definirò qui una classe invece di un tag di stile.

75
00:05:24,300 --> 00:05:26,670
Quello che farò è definire una classe.

76
00:05:26,730 --> 00:05:31,350
Lo chiamerò semplicemente rosa e applicherò questa classe a due o due div in modo che possiamo vederli.

77
00:05:31,490 --> 00:05:32,820
Quindi adesso sono solo bianchi.

78
00:05:32,820 --> 00:05:33,660
Senza frontiere

79
00:05:33,750 --> 00:05:34,840
Solo un po 'di testo.

80
00:05:35,010 --> 00:05:36,050
Ma se aggiungiamo questo.

81
00:05:36,180 --> 00:05:37,010
Così rosa

82
00:05:37,140 --> 00:05:45,660
E poi vogliamo che lo sfondo sia rosa e faremo un bordo viola di un pixel solido viola e

83
00:05:45,660 --> 00:05:49,950
poi applicheremo la classe rosa a queste due div.

84
00:05:49,950 --> 00:05:52,660
Ciascuno occupa sei unità.

85
00:05:52,680 --> 00:05:54,570
Ora torniamo indietro e aggiorniamo.

86
00:05:54,900 --> 00:05:55,580
Eccoci.

87
00:05:55,800 --> 00:05:59,640
Puoi vedere che abbiamo due div che occupano esattamente la metà del contenitore.

88
00:05:59,670 --> 00:06:01,930
Il contenitore inizia qui e qui.

89
00:06:02,460 --> 00:06:04,530
E ci siamo divisi in due.

90
00:06:04,620 --> 00:06:10,110
Quindi ora possiamo tornare indietro e giocare un po 'di più e proviamo ad aggiungere una terza colonna.

91
00:06:10,410 --> 00:06:16,150
E questa volta la colonna centrale sarà composta da otto unità, quindi la sinistra e la destra saranno due.

92
00:06:16,170 --> 00:06:21,270
Quindi finisco e cambierò questi numeri qui.

93
00:06:21,280 --> 00:06:22,200
Eccoci.

94
00:06:22,200 --> 00:06:27,960
Finiremo con una bella colonna centrata nel mezzo e poi due colonne più piccole a sinistra ea destra che

95
00:06:27,960 --> 00:06:30,900
potremmo usare per una barra laterale o qualcosa del genere.

96
00:06:30,900 --> 00:06:34,860
Quindi questo è un concetto molto basilare che sta alla base di tutto il sistema di griglia di bootstrap.

97
00:06:34,920 --> 00:06:40,290
Abbiamo 12 unità che attraversano qualsiasi contenitore in cui stiamo lavorando e possiamo progettare quelle

98
00:06:40,290 --> 00:06:42,210
12 unità nel modo che vogliamo.

99
00:06:42,240 --> 00:06:49,830
Quindi potremmo fare 12 singole colonne ciascuna una colonna più grande e potremmo farlo

100
00:06:49,830 --> 00:06:52,170
12 volte proprio così.

101
00:06:52,290 --> 00:06:53,600
Assicurati di non perdere il conto.

102
00:06:54,090 --> 00:06:54,670
Eccoci.

103
00:06:54,690 --> 00:06:56,620
E poi ci libereremo di questi due per ora.

104
00:06:56,820 --> 00:07:01,630
E se fossi fresco vedrai in una fila che abbiamo 12 colonne di dimensioni uguali.

105
00:07:01,650 --> 00:07:07,570
Ognuno prende una unità e poi ti mostrerò anche che possiamo aggiungere altre righe.

106
00:07:07,740 --> 00:07:14,390
Quindi facciamolo ora che la classe div è uguale alla riga e andrà solo sotto questa prima riga che abbiamo.

107
00:07:14,730 --> 00:07:18,870
Quindi all'interno di questo facciamo div.

108
00:07:19,020 --> 00:07:23,350
La classe è uguale alla colonna Dasch grande e facciamo quattro.

109
00:07:23,370 --> 00:07:27,280
Quindi lo divideremo in tre unità di dimensioni uguali.

110
00:07:27,360 --> 00:07:36,260
Quindi la colonna si arresta per lei andare così.

111
00:07:36,420 --> 00:07:44,190
Andiamo a dare un'occhiata ora e puoi vedere che non abbiamo applicato la classe rosa, ma abbiamo creato tre colonne di

112
00:07:44,190 --> 00:07:49,260
dimensioni uguali che scendono al di sotto delle 12 colonne di dimensioni uguali.

113
00:07:49,470 --> 00:07:53,240
Quindi potremmo aggiungere alla classe rosa solo per rendere più facile vedere cosa sta succedendo.

114
00:07:53,940 --> 00:07:54,800
E noi andiamo.

115
00:07:55,140 --> 00:07:57,350
Quindi questo è solo un semplice esempio.

116
00:07:57,420 --> 00:08:01,470
In realtà non avresti queste scatole rosa molto probabilmente sul nostro sito.

117
00:08:01,710 --> 00:08:08,730
Ma come puoi vedere qui abbiamo una griglia in cui abbiamo file e ogni riga ha quattro colonne che attraversano.

118
00:08:08,760 --> 00:08:15,830
Ognuno è largo tre unità o qui su questo sito Tim creativo.

119
00:08:15,900 --> 00:08:19,830
Abbiamo tre colonne che attraversano ciascuna una larghezza di quattro unità.

120
00:08:20,070 --> 00:08:20,900
La stessa cosa qui.

121
00:08:20,900 --> 00:08:23,860
Tre colonne che attraversano qui.

122
00:08:23,910 --> 00:08:24,960
Abbiamo quattro colonne.

123
00:08:24,960 --> 00:08:26,840
Ognuno ha tre unità di larghezza.

124
00:08:27,390 --> 00:08:30,650
Ecco le basi della griglia nel prossimo video.

125
00:08:30,660 --> 00:08:35,850
Parleremo di come rendere la griglia reattiva e avere layout diversi a diverse dimensioni.

126
00:08:35,850 --> 00:08:38,230
In questo momento abbiamo lavorato con una colonna di grandi dimensioni.

127
00:08:38,250 --> 00:08:43,050
dimensioni e vedremo quelle nel prossimo video e vedremo anche come possiamo scrivere griglie annidate

128
00:08:43,050 --> 00:08:49,080
in cui possiamo aggiungere un'altra riga all'interno di una di queste colonne e dividere quella in ulteriori 12 pezzi.

129
00:08:49,080 --> 00:08:52,290
Ho spiegato con molti mezzi e ci sono altre tre