1
00:00:00,660 --> 00:00:05,550
Bentornato in questa lezione costruiremo un piccolo progetto usando quello che abbiamo imparato

2
00:00:05,550 --> 00:00:06,740
finora sul bootstrap.

3
00:00:06,770 --> 00:00:11,880
Comprenderà molti dei componenti di cui abbiamo parlato includendo ora il jumbotron e il

4
00:00:12,390 --> 00:00:13,590
sistema di griglia.

5
00:00:13,920 --> 00:00:17,370
Ho anche lanciato una o due nuove cose, incluse le icone qui.

6
00:00:17,370 --> 00:00:19,180
Non abbiamo ancora visto come farlo.

7
00:00:19,500 --> 00:00:25,590
E anche il fatto che questa barra di spostamento mentre lo scorrimento lo vedrà rimane fisso in alto in modo che non

8
00:00:25,590 --> 00:00:30,360
scorra il modo in cui abbiamo una barra di navigazione fissa che non abbiamo ancora visto ancora.

9
00:00:30,360 --> 00:00:34,800
E infine, stiamo cambiando alcuni dei colori dei componenti bootstrap predefiniti.

10
00:00:34,800 --> 00:00:37,290
Quindi questa è in realtà una sfumatura leggermente diversa di grigio.

11
00:00:37,380 --> 00:00:40,480
Questa è l'ombra del blu e la barra di navigazione ha alcuni colori diversi.

12
00:00:40,560 --> 00:00:44,250
Quindi ti mostrerò come fare tutto questo prima di iniziare a scrivere qualsiasi codice.

13
00:00:44,320 --> 00:00:49,420
Voglio solo prendere un momento per sottolineare il fatto che queste immagini per la maggior parte

14
00:00:49,420 --> 00:00:52,620
provengono da un sito Web una grande risorsa chiamata Splash.

15
00:00:52,920 --> 00:00:57,640
Quindi splash offre una miriade di bellissime foto in alta risoluzione che puoi fare quello che vuoi.

16
00:00:57,750 --> 00:01:00,630
Puoi leggere la licenza qui ma è praticamente quello che vuoi.

17
00:01:00,630 --> 00:01:05,610
È una licenza Creative Commons bla bla bla, sono sicuro che non mi interessa davvero, ma

18
00:01:05,610 --> 00:01:09,390
le foto sono davvero fantastiche e sto usando molti di questi otto.

19
00:01:09,390 --> 00:01:11,450
Infatti nella nostra galleria.

20
00:01:11,790 --> 00:01:17,280
E questo lascia un'immagine che è proprio qui che in realtà mi sono fatto prendere una classe di fotografia

21
00:01:17,280 --> 00:01:21,090
e questa è la prima cosa che ho preso che sembra abbastanza decente.

22
00:01:21,090 --> 00:01:24,780
Penso anche se rispetto a questi non sembra così caldo.

23
00:01:24,780 --> 00:01:28,650
Ad ogni modo se vuoi usare queste stesse identiche immagini che non è importante.

24
00:01:28,740 --> 00:01:30,430
Questo funzionerà con qualsiasi immagine.

25
00:01:30,450 --> 00:01:36,180
Ma se vuoi gli stessi identici ho incluso tutti i link in questa galleria di file M. D che sono stati caricati insieme a questo

26
00:01:36,210 --> 00:01:41,310
video e hanno incluso anche i due colori che utilizzeremo il blu scuro e

27
00:01:41,310 --> 00:01:42,570
il grigio chiaro.

28
00:01:42,740 --> 00:01:42,990
OK.

29
00:01:42,990 --> 00:01:46,790
Quindi, con tutto questo fuori mano, ora iniziamo il progetto.

30
00:01:47,100 --> 00:01:48,740
Quindi ho una galleria di file vuota.

31
00:01:48,750 --> 00:01:49,620
H m l.

32
00:01:49,860 --> 00:01:56,400
m l e chiameremo solo questa galleria di immagini e la prima cosa che dobbiamo fare è includere il bootstrap.

33
00:01:56,400 --> 00:01:58,670
Aggiungerò qui il mio scheletro h d

34
00:01:58,800 --> 00:02:06,490
E ho intenzione di copiare i CD da un vecchio progetto, quindi lo farò adesso.

35
00:02:06,900 --> 00:02:07,640
Eccoci qui.

36
00:02:07,710 --> 00:02:09,830
Sto collegando il CDN bootstrap.

37
00:02:10,200 --> 00:02:18,300
E mentre sono qui prenderò anche i bootstraps CSSA e Jay queery city e che abbiamo fatto nella lezione di nav bar e li abbiamo messi in

38
00:02:18,300 --> 00:02:23,580
fondo qui in modo che quando aggiungiamo la barra di navigazione non dobbiamo andare a caccia per

39
00:02:23,580 --> 00:02:25,990
questi file o per i tag di script.

40
00:02:26,250 --> 00:02:30,250
Quindi un salvataggio e la prima cosa che possiamo fare è aggiungere il nostro Jumbotron.

41
00:02:30,510 --> 00:02:32,160
È carino e facile.

42
00:02:32,400 --> 00:02:38,470
Quindi avremo un div e questa sarà la classe uguale a Jumbotron.

43
00:02:38,880 --> 00:02:47,520
E poi all'interno del Jumbotron inizierà con un H1 che dice solo la galleria di immagini.

44
00:02:47,670 --> 00:02:51,420
Eccoci e salveremo e assicuriamoci che funzioni.

45
00:02:51,720 --> 00:02:53,660
Quindi aprirà questo file.

46
00:02:54,060 --> 00:02:55,330
Quindi abbiamo incluso Boucek.

47
00:02:55,350 --> 00:02:56,780
Stiamo vedendo il cambiamento di carattere.

48
00:02:56,820 --> 00:02:58,980
Stiamo vedendo questo grigio dal Jumbotron.

49
00:02:58,980 --> 00:03:04,560
Ora assicuriamoci che si trovi all'interno di un contenitore come se fosse qui piuttosto che in quello

50
00:03:04,560 --> 00:03:07,040
che abbiamo dove va tutto attraverso lo schermo.

51
00:03:07,320 --> 00:03:12,850
Quindi faremo quella classe div uguale al contenitore.

52
00:03:14,010 --> 00:03:21,900
Eccoci, andiamo a farlo correttamente e aggiorniamo e torneremo indietro.

53
00:03:21,900 --> 00:03:25,140
Va bene, quindi abbiamo il Jumbotron ma aggiungiamo questo paragrafo.

54
00:03:25,140 --> 00:03:33,080
Ora torneremo e faremo l'icona ma questo è solo un tag di paragrafo sotto l'H-1 che salveremo.

55
00:03:33,090 --> 00:03:38,040
Sentiti libero di inserire qualsiasi testo tu voglia e ora abbiamo finito con il Jumbotron.

56
00:03:38,730 --> 00:03:43,950
facciamo ora la barra di navigazione e non inserirò abbastanza barre da zero per due motivi.

57
00:03:43,950 --> 00:03:45,190
Quindi torniamo indietro e

58
00:03:45,210 --> 00:03:46,970
Uno è che è un bel po 'di codice.

59
00:03:47,010 --> 00:03:48,000
Ci vorrà molto tempo.

60
00:03:48,010 --> 00:03:48,840
E questo video.

61
00:03:48,960 --> 00:03:52,870
Ma due è il fatto che non scrivo quasi mai in Ackbar da zero.

62
00:03:53,220 --> 00:03:58,800
Come ho accennato nel video di NASCAR il più delle volte il mio flusso di lavoro è che vado sul sito di bootstrap

63
00:03:58,800 --> 00:04:02,580
o su un sito precedente che ho creato con una barra NAV e lo copio.

64
00:04:02,580 --> 00:04:04,990
E l'ho appena controllato e mi sono sbarazzato dei pezzi che non voglio.

65
00:04:05,010 --> 00:04:06,530
Aggiungo alcuni nuovi pezzi in.

66
00:04:06,570 --> 00:04:08,020
Ecco dove farò qui.

67
00:04:08,160 --> 00:04:14,160
Ho già abbastanza parti che ho fatto nella barra di navigazione ha detto ogni applicazione HTML.

68
00:04:14,280 --> 00:04:19,570
È proprio qui e sto per copiarlo e poi lo modificheremo un po '.

69
00:04:19,620 --> 00:04:26,940
Quindi copiamolo e tornerò e lo metteremo proprio in cima al file proprio così.

70
00:04:27,330 --> 00:04:32,770
E vediamo cosa otteniamo sono freschi e abbiamo la barra di navigazione.

71
00:04:33,030 --> 00:04:34,010
È chiusa.

72
00:04:34,050 --> 00:04:36,410
Vogliamo cambiare il marchio qui.

73
00:04:36,420 --> 00:04:40,740
Vogliamo anche cambiare il colore alla fine e vogliamo assicurarci che sia corretto in alto che

74
00:04:40,760 --> 00:04:43,020
non è in questo momento ma ci arriveremo.

75
00:04:43,290 --> 00:04:45,500
Torniamo indietro e cambiamo solo il marchio.

76
00:04:45,690 --> 00:04:49,980
Quindi, al posto del caffè, ho chiamato le mie immagini, puoi chiamarlo come vuoi.

77
00:04:49,980 --> 00:04:53,970
Certo, assicurati che funzioni bene.

78
00:04:54,250 --> 00:05:00,490
La prossima cosa che ti mostrerò è un rapido cambiamento che possiamo fare per alterare il colore in cui appaiono invece

79
00:05:00,490 --> 00:05:01,690
di nap o default.

80
00:05:01,700 --> 00:05:06,880
Possiamo farlo ora se bar in versi e ti mostrerò come si presenta.

81
00:05:06,880 --> 00:05:11,770
Per ora otteniamo un oscuramento o i colori sono stati invertiti dove il testo è chiaro e otteniamo

82
00:05:11,770 --> 00:05:12,500
uno sfondo scuro.

83
00:05:12,750 --> 00:05:15,660
Non è ancora il colore blu che sto andando qui.

84
00:05:16,030 --> 00:05:19,740
E il carattere non è bianco, ma torneremo e sistemeremo tutto.

85
00:05:19,750 --> 00:05:21,650
Questo è abbastanza vicino per ora.

86
00:05:21,670 --> 00:05:26,100
Ora possiamo concentrarci sull'effettiva galleria di immagini su quella griglia quaggiù.

87
00:05:26,350 --> 00:05:29,640
E iniziamo osservando come si comporta sulla soluzione.

88
00:05:29,860 --> 00:05:39,160
scende a due e poi scende a due e infine alla piccola dimensione va a una come puoi vedere qui.

89
00:05:39,160 --> 00:05:44,480
Quindi inizia con tre immagini che attraversano e poi, quando ridimensiono,

90
00:05:44,720 --> 00:05:47,110
E abbiamo un'immagine che attraversa.

91
00:05:47,500 --> 00:05:52,780
Iniziamo impostando la griglia per questa grande dimensione in cui ne abbiamo attraversate tre.

92
00:05:52,780 --> 00:05:54,850
Ricorda che abbiamo 12 unità in totale.

93
00:05:54,910 --> 00:05:59,730
Quindi, se vogliamo che tre attraversino, designeremo ciascuno di essi come quattro unità.

94
00:06:00,160 --> 00:06:04,420
Quindi sistemiamolo appena sotto il nostro Jumbotron.

95
00:06:04,420 --> 00:06:13,900
Sempre all'interno del contenitore, però, faremo solo una riga div class equals, quindi all'interno di questo avremo div class

96
00:06:13,900 --> 00:06:17,680
uguali e vogliamo che siano quattro unità.

97
00:06:17,770 --> 00:06:27,120
Quindi faremo il grande trattino 4 della colonna e premiamo invio e possiamo iniziare semplicemente inserendo del testo qui e

98
00:06:27,120 --> 00:06:30,260
poi lo duplicherò perché ne vogliamo tre.

99
00:06:30,430 --> 00:06:35,170
E non mi preoccuperò di aggiustare ancora la rientranza perché faremo un cambiamento più grande in un

100
00:06:35,170 --> 00:06:35,770
solo momento.

101
00:06:36,100 --> 00:06:40,170
Ma rinnoviamo e otteniamo quelle tre colonne che attraversano.

102
00:06:40,180 --> 00:06:47,050
Quindi la prossima cosa che vogliamo fare è ottenere alcune immagini in corso e tutto parte ma basta prendere la

103
00:06:47,050 --> 00:06:52,860
L della mia foto del Golden Gate Bridge e aggiungeremo un tag immagine piuttosto che un testo.

104
00:06:52,910 --> 00:07:00,820
immagini equivale al fatto che il Golden Gate Bridge sei malato e io lo incollo per tre volte e salvo.

105
00:07:01,210 --> 00:07:02,620
Quindi la fonte di

106
00:07:02,620 --> 00:07:09,430
E se torniamo indietro abbiamo un problema che è che quell'immagine è enorme anche se abbiamo queste

107
00:07:09,430 --> 00:07:10,310
tre colonne.

108
00:07:10,360 --> 00:07:14,010
La nostra immagine non sta all'interno della nostra colonna, non si sta riducendo.

109
00:07:14,010 --> 00:07:19,010
Puoi vedere cosa faremo per risolvere questo problema aggiungendo un po 'più bootstrap.

110
00:07:19,030 --> 00:07:24,670
Non ti ho ancora mostrato di creare questo bel piccolo bordo attorno ad esso e si chiama miniatura.

111
00:07:24,700 --> 00:07:29,520
Tutto quello che dobbiamo fare è scrivere un div con la classe uguale alla miniatura e poi

112
00:07:29,530 --> 00:07:33,250
qualsiasi immagine che mettiamo al suo interno verrà ridimensionata per adattarsi alla colonna.

113
00:07:33,250 --> 00:07:37,090
E anche questo piccolo confine qui sembra molto carino.

114
00:07:37,090 --> 00:07:43,720
Quindi, per farlo, in realtà mi libererò di ciò che abbiamo con quelli

115
00:07:43,720 --> 00:07:52,600
per tornare a una singola immagine e aggiungere in una classe div uguale alla miniatura e fatto correttamente.

116
00:07:52,930 --> 00:07:57,880
E lo avvolgiamo attorno all'immagine e salviamo.

117
00:07:57,880 --> 00:08:00,350
Ora se ci aggiorniamo.

118
00:08:01,150 --> 00:08:06,470
Vedrai se otteniamo una singola immagine che occupa la giusta quantità di spazio all'interno di quella griglia.

119
00:08:06,730 --> 00:08:11,710
Questa è la colonna e ha un piccolo margine attorno e l'immagine non è gigantesca, il che è grande.

120
00:08:12,700 --> 00:08:15,980
Quindi assicuriamoci che funzioni se duplichiamo questo.

121
00:08:16,060 --> 00:08:22,430
Quindi questa è un'immagine, dupliciamola tre volte e vediamo cosa succede aggiornando.

122
00:08:22,780 --> 00:08:23,610
E noi andiamo.

123
00:08:23,710 --> 00:08:25,380
Abbiamo tre immagini.

124
00:08:25,380 --> 00:08:27,290
Andrò avanti e ne aggiungerò altri sei.

125
00:08:27,360 --> 00:08:29,790
Quindi abbiamo nove totali come facciamo qui.

126
00:08:30,490 --> 00:08:32,830
E in realtà non dobbiamo aggiungere righe separate.

127
00:08:33,040 --> 00:08:35,110
Possiamo semplicemente metterli tutti nella stessa riga.

128
00:08:35,200 --> 00:08:40,420
Quindi copia tutte e tre le cose che abbiamo finora a volte e risparmia.

129
00:08:40,480 --> 00:08:42,730
Questo ci darà nove immagini.

130
00:08:42,730 --> 00:08:46,950
E se aggiorno vedrai che si avvolgono automaticamente alla riga successiva.

131
00:08:47,230 --> 00:08:52,390
Quindi dobbiamo solo avere una riga e aggiungere quelle colonne che conosci medicalmente.

132
00:08:52,480 --> 00:08:57,820
Se vogliamo che ogni immagine occupi quattro unità, significa tre per riga e quindi abbiamo bisogno di tre

133
00:08:57,820 --> 00:08:58,720
file di immagini.

134
00:08:58,780 --> 00:09:02,150
Tornerò indietro e cambierò tutte queste immagini elfi alla fine del video.

135
00:09:02,160 --> 00:09:03,600
Non voglio farti guardare.

136
00:09:03,630 --> 00:09:08,580
Molto interessante solo copia e incolla, ma concentriamoci sul resto di questa griglia.

137
00:09:08,580 --> 00:09:16,360
In questo momento, non appena un mezzo di successo, passa a un'immagine su cui non è quello che

138
00:09:16,360 --> 00:09:21,420
vogliamo ciò che stiamo cercando sono due immagini in quel breakpoint medio.

139
00:09:21,700 --> 00:09:27,940
E poi, dopo il punto di rottura medio che è lì, colpiamo piccolo e vogliamo ancora che rimanga al 2.

140
00:09:28,750 --> 00:09:34,690
Quindi, per risolvere il problema nel nostro o va a uno immediatamente al punto di rottura grande o il

141
00:09:35,110 --> 00:09:39,310
punto di rottura medio e poi piccoli e piccoli extra rimane a 1.

142
00:09:39,460 --> 00:09:48,430
Possiamo tornare qui e cambieremo tutti quelli che conosci selezionare e premi il comando d seleziona tutte le istanze di chiamali per

143
00:09:48,880 --> 00:09:53,970
grandi e poi premo le frecce sinistra o destra per spostare il cursore.

144
00:09:53,990 --> 00:09:55,840
Ora posso modificarli tutti in una volta.

145
00:09:56,020 --> 00:10:04,240
E quello che voglio fare potrei aggiungere nella colonna medium six perché vogliamo Perrow e funzionerà.

146
00:10:04,410 --> 00:10:10,690
E se torno indietro e aggiorno vedrai che rimangono a 3 per fila e poi ho raggiunto il punto di interruzione mediano

147
00:10:10,720 --> 00:10:11,920
e vanno a 2.

148
00:10:12,280 --> 00:10:20,820
Ma poi colpisco piccolo e salta a uno e al nostro quando colpiamo piccolo la soluzione rimane a 2.

149
00:10:20,830 --> 00:10:31,830
Quindi per risolvere questo problema invece di fare il medium della colonna sei possiamo fare una piccola colonna 6 e tornare di nuovo ad

150
00:10:31,890 --> 00:10:33,390
aggiornare questa versione.

151
00:10:33,730 --> 00:10:34,680
Colpiamo media.

152
00:10:34,680 --> 00:10:35,590
Andiamo a due.

153
00:10:35,800 --> 00:10:36,750
Colpiamo piccolo.

154
00:10:36,760 --> 00:10:43,530
Rimaniamo alle 2 e poi passiamo a small extra e siamo a 1 1 immagine per riga.

155
00:10:43,810 --> 00:10:44,620
Perfezionare.

156
00:10:44,910 --> 00:10:49,060
Quindi questo è tutto ciò che dobbiamo fare per la griglia e abbiamo finito con la maggior parte delle funzionalità qui.

157
00:10:49,170 --> 00:10:51,050
Molto molto veloce per farlo funzionare.

158
00:10:51,220 --> 00:10:55,570
Ciò su cui vogliamo concentrarci ora sono alcuni dei colori e anche le icone.

159
00:10:55,870 --> 00:10:58,890
Inizierò mostrandoti come aggiungiamo icone utilizzando il bootstrap.

160
00:10:59,080 --> 00:11:06,180
se vai ai componenti ci sono queste icone di glifi in alto e ce ne sono un sacco da cui scegliere.

161
00:11:06,180 --> 00:11:07,670
Quindi, per ottenere il bootstrap

162
00:11:08,320 --> 00:11:11,840
E ne troveremo uno che vogliamo usare e quello che sto usando.

163
00:11:12,100 --> 00:11:14,710
Farò solo una ricerca, penso che sia una telecamera.

164
00:11:14,710 --> 00:11:17,920
Quindi c'è questa fotocamera qui e io non sto usando quella telecamera.

165
00:11:18,040 --> 00:11:19,310
È leggermente diverso.

166
00:11:19,330 --> 00:11:23,080
Quello che sto usando è una fotocamera più retrò e ti mostrerò come aggiungerla.

167
00:11:23,080 --> 00:11:28,220
In realtà non fa parte del bootstrap Ma iniziamo con la normale fotocamera che viene fornita con il bootstrap.

168
00:11:28,810 --> 00:11:32,040
Quindi scriviamo Clifford Kahn e poi usiamo la fotocamera del cruscotto.

169
00:11:32,160 --> 00:11:38,230
E se scorri più in basso puoi vedere dove spiegano come usarlo per creare un'estensione in cui una

170
00:11:38,230 --> 00:11:43,450
classe è uguale a Con e quindi glifo può scagliare il nome dell'icona del glifo.

171
00:11:43,480 --> 00:11:49,600
Quindi copiamo questo span e inizieremo a farlo all'interno dell'H-1, lo

172
00:11:49,600 --> 00:11:58,200
inseriamo proprio all'inizio dell'H-1 e vogliamo una rapida fotocamera A-Kon dash e salveremo e aggiorneremo.

173
00:11:58,600 --> 00:12:01,060
E proprio così puoi avere una macchina fotografica lì dentro.

174
00:12:01,410 --> 00:12:07,350
E se vogliamo spazio possiamo farlo attraverso il padding o possiamo semplicemente aggiungere uno spazio proprio lì.

175
00:12:08,260 --> 00:12:14,590
E otteniamo uno spazio in cui possiamo fare esattamente la stessa cosa per la barra di navigazione e ne ho usato uno che viene

176
00:12:15,050 --> 00:12:16,970
chiamato Photo go double check up qui.

177
00:12:16,980 --> 00:12:22,780
Puoi fare una ricerca su questa pagina per l'immagine fotografica.

178
00:12:22,890 --> 00:12:24,080
Eccolo.

179
00:12:24,260 --> 00:12:26,890
Può andare se può trattenere un'immagine.

180
00:12:27,730 --> 00:12:32,890
Quindi saliremo al marchio della barra di navigazione proprio qui e lo incolleremo di nuovo in quell'intervallo.

181
00:12:33,120 --> 00:12:41,420
E poi all'interno della classe dovrebbe essere cliccare sull'immagine e aggiungeremo anche lì uno spazio.

182
00:12:41,460 --> 00:12:45,880
Torniamo al nostro sito sono freschi e ora abbiamo una piccola immagine lì.

183
00:12:46,360 --> 00:12:47,930
E abbiamo anche la fotocamera.

184
00:12:48,150 --> 00:12:54,570
Quindi affrontiamo la barra di navigazione e inizieremo fissandola in alto in modo che tu possa vedere in questo momento.

185
00:12:54,790 --> 00:12:56,470
Quel pisolino i nostri pergamene.

186
00:12:56,950 --> 00:12:59,210
Ma sulla soluzione rimane lì.

187
00:12:59,640 --> 00:13:04,460
E per farlo è una singola classe che dobbiamo aggiungere alla nostra barra NAV.

188
00:13:04,480 --> 00:13:11,800
Quindi, qui sopra, vogliamo che il cruscotto del cruscotto nav sia in alto e salvare.

189
00:13:12,120 --> 00:13:16,570
E se siamo freschi vedrai che è fisso in alto.

190
00:13:16,570 --> 00:13:23,080
C'è un piccolo problema che è che il nostro contenuto è ora dietro un po 'e vogliamo che

191
00:13:23,230 --> 00:13:25,800
abbia una spaziatura normale sopra il Jumbotron.

192
00:13:25,810 --> 00:13:32,770
Quello che dobbiamo fare è aggiungere un po 'di imbottitura al nostro corpo e succede che sia 70 pixel.

193
00:13:32,770 --> 00:13:37,720
I documenti di bootstrap ti diranno che se mai dimentichi 70 pixel di padding è ciò che vogliamo

194
00:13:37,710 --> 00:13:39,320
è la larghezza del quarto ora.

195
00:13:39,490 --> 00:13:47,250
Quindi andremo qui e creeremo un foglio di stile ora e lo chiamerò galleria Dotsie SS

196
00:13:48,120 --> 00:13:58,300
e poi all'interno selezioneremo il riempimento del corpo con i primi 70 pixel e quindi dobbiamo aggiungerlo in quel foglio

197
00:13:58,410 --> 00:14:01,850
di stile che è Gallery CS S.

198
00:14:01,920 --> 00:14:03,760
Ora assicuriamoci che funzioni.

199
00:14:03,790 --> 00:14:04,330
Eccoci.

200
00:14:04,360 --> 00:14:10,860
Abbiamo la nostra spaziatura indietro e NFR è ancora fissato in alto come puoi vedere perfetto