1
00:00:00,330 --> 00:00:05,740
Bentornati in questa lezione useremo il bootstrap per creare una landing page per una startup fittizia.

2
00:00:06,070 --> 00:00:08,760
La nostra startup si chiama Perfect Match.

3
00:00:08,760 --> 00:00:09,210
Molto divertente.

4
00:00:09,210 --> 00:00:15,300
So che si tratta di un'app di datazione umana felina e lascerò a te il compito di interpretare

5
00:00:15,300 --> 00:00:21,750
quale datazione umana felina potrebbe essere relativamente innocua, potrebbe semplicemente essere l'abbinamento di gatti Sheldrick con umani soli che potrebbero

6
00:00:21,750 --> 00:00:22,430
essere qualcos'altro.

7
00:00:22,440 --> 00:00:23,260
Non lo so.

8
00:00:23,550 --> 00:00:27,690
Iniziamo facendo un breve tour del sito e scrivendole.

9
00:00:27,690 --> 00:00:29,920
Intendo davvero solo sottolineando alcune caratteristiche.

10
00:00:29,970 --> 00:00:31,250
Non c'è molto qui.

11
00:00:31,290 --> 00:00:33,780
In realtà non abbiamo questo collegato, non fa ancora niente.

12
00:00:33,840 --> 00:00:37,770
Quindi sono solo i mounseers in HD, ma questo è tutto ciò che abbiamo trattato finora.

13
00:00:38,100 --> 00:00:42,510
Quindi abbiamo abbastanza la nostra perfetta corrispondenza per quanto riguarda le lunghezze di incontattazione.

14
00:00:42,510 --> 00:00:50,100
In realtà non vanno da nessuna parte e registrano sul lato destro due piccole icone là dove prendiamo il

15
00:00:50,100 --> 00:00:51,030
suo hamburger.

16
00:00:51,180 --> 00:00:52,320
Posso cliccarci sopra.

17
00:00:52,380 --> 00:00:55,980
Tutti quei link sono ora dentro quell'hamburger.

18
00:00:55,980 --> 00:01:01,650
Quindi abbiamo una grande immagine di sfondo che rimane centrata e copre l'intero sfondo.

19
00:01:01,740 --> 00:01:07,590
Quindi nel mezzo abbiamo il nome del nostro start up perfetto con il nostro e poi abbiamo la nostra

20
00:01:07,650 --> 00:01:09,750
didascalia L'unico feed umano sull'app di appuntamenti.

21
00:01:09,750 --> 00:01:15,420
E poi abbiamo una piccola regola orizzontale qui e poi un pulsante per iniziare con un'icona.

22
00:01:15,810 --> 00:01:21,990
E mentre mi riduco, tutto rimane nel mezzo e si muove anche un po 'in modo che non abbiamo una sorta

23
00:01:21,990 --> 00:01:26,960
di layout scomodo sul tuo dispositivo mobile in cui il testo inizia a metà della pagina.

24
00:01:27,060 --> 00:01:29,690
Quindi lo spostiamo un po 'e rimane centrato.

25
00:01:29,700 --> 00:01:33,900
Questo layout è davvero facile da fare e bootstrap, ma è relativamente efficace per la pagina di destinazione.

26
00:01:33,900 --> 00:01:38,180
Tutto ciò che abbiamo è una singola colonna che occupa l'intera larghezza.

27
00:01:38,220 --> 00:01:40,850
Quindi questa colonna ha 12 unità in tutto.

28
00:01:40,860 --> 00:01:46,890
Non lo dividiamo in nessuna sezione solo per una colonna di 12 unità e poi centriamo tutto

29
00:01:46,890 --> 00:01:48,510
all'interno di quella colonna.

30
00:01:48,540 --> 00:01:49,860
Quindi iniziamo.

31
00:01:49,860 --> 00:01:52,350
La prima cosa che dobbiamo fare è creare un file.

32
00:01:52,440 --> 00:01:54,640
Ne ho uno chiamato index su DML.

33
00:01:54,720 --> 00:01:58,890
Aggiungerò questo nella mia partita perfetta standard calda e

34
00:02:01,700 --> 00:02:04,950
poi aggiungo in Bootstrap e userò un

35
00:02:08,580 --> 00:02:10,410
CDN Bitstrips CDN.

36
00:02:11,490 --> 00:02:14,350
Facciamo le SS e Javascript qui.

37
00:02:14,400 --> 00:02:16,860
Avremo bisogno di quel javascript per la barra delle applicazioni.

38
00:02:17,220 --> 00:02:19,130
Quindi dobbiamo collegare il tag.

39
00:02:19,710 --> 00:02:22,770
Quindi otteniamo il javascript.

40
00:02:22,770 --> 00:02:24,030
Copia questo.

41
00:02:24,090 --> 00:02:32,030
Mettilo giù in fondo che è un tag script e quindi impostiamo la sorgente uguale a quella che sei.

42
00:02:32,520 --> 00:02:41,040
Ora se apriamo questa finestra, OK, apriamo la console, abbiamo un piccolo problema che è che abbiamo bisogno anche della query

43
00:02:41,040 --> 00:02:43,390
di Jay per il bootstrap javascript.

44
00:02:43,450 --> 00:02:46,290
Ricordati di nuovo dalla lezione sulla barra di navigazione, dobbiamo richiedere J.

45
00:02:46,290 --> 00:02:46,750
Querrey.

46
00:02:46,860 --> 00:02:52,500
Quindi otterremo un CDN per questo.

47
00:02:53,730 --> 00:02:55,290
Faremo la versione modificata.

48
00:02:55,290 --> 00:02:57,500
Copia questo URL.

49
00:02:57,600 --> 00:03:04,110
E finalmente torniamo qui e dobbiamo farlo prima di collegarci al bootstrap con javascript.

50
00:03:04,440 --> 00:03:09,360
Altrimenti non saprà ancora della tua query, quindi deve prima caricare la query.

51
00:03:09,360 --> 00:03:10,650
Ora proviamo di nuovo.

52
00:03:10,870 --> 00:03:11,960
Aggiornamento del fuoco.

53
00:03:12,520 --> 00:03:17,490
OK, non vediamo nulla che sia un buon segno perché non vediamo errori.

54
00:03:18,570 --> 00:03:20,850
Iniziamo con il testo nel mezzo.

55
00:03:20,850 --> 00:03:22,480
Tutto questo contenuto qui.

56
00:03:22,620 --> 00:03:29,570
ECOs per una riga per div class e quindi all'interno di questo abbiamo un altro div che abbiamo sempre bisogno di quella riga.

57
00:03:30,870 --> 00:03:35,870
Quindi abbiamo bisogno di creare un container e quindi all'interno del contenitore abbiamo bisogno di un contenitore

58
00:03:35,930 --> 00:03:45,780
Ogni volta che usiamo il sistema di grid e quindi il nostro div che sarà di classe uguale a dash di colonna

59
00:03:46,230 --> 00:03:47,220
large 12.

60
00:03:48,240 --> 00:03:50,750
E questo attraverserà tutto quel container.

61
00:03:51,210 --> 00:03:59,330
E poi dentro se avranno un H1 che dirà solo match perfetto e salvataggio.

62
00:03:59,520 --> 00:04:02,280
E lasciamo a quel refresh.

63
00:04:02,580 --> 00:04:06,660
E non è proprio quello che vogliamo ancora e questo perché ci sono alcune cose che dobbiamo fare.

64
00:04:06,660 --> 00:04:09,010
Il primo è che dobbiamo centrare tutto in quella colonna.

65
00:04:09,300 --> 00:04:16,700
Quindi, se ispezioniamo con cosa abbiamo a che fare qui, potremmo vedere che l'H1 attraversa tutto e

66
00:04:16,710 --> 00:04:19,190
dobbiamo solo centrarlo all'interno di quello.

67
00:04:19,410 --> 00:04:21,680
E il secondo è che dobbiamo abbassarlo un po '.

68
00:04:21,720 --> 00:04:26,250
Abbiamo bisogno di aggiungere un po 'di padding o margine in modo che non vada in cima alla nostra pagina.

69
00:04:26,250 --> 00:04:28,480
Iniziamo aggiungendo il resto del contenuto.

70
00:04:28,830 --> 00:04:36,180
Quindi abbiamo anche l'unica app per appuntamenti umani felini e che sarà solo una H 3

71
00:04:36,180 --> 00:04:46,110
e potremmo davvero giocare con quello che potrebbe essere qualsiasi elemento che vogliamo, ma lo renderò un H-3 l'unica app di

72
00:04:46,590 --> 00:04:47,730
datazione umana.

73
00:04:48,090 --> 00:04:54,060
E poi possiamo aggiungere quella regola orizzontale che non assomiglierà molto ma la modificheremo dopo

74
00:04:54,060 --> 00:04:59,180
il fatto e poi aggiungeremo anche un pulsante nella classe su quel pulsante.

75
00:04:59,240 --> 00:05:01,680
Diamo un'occhiata.

76
00:05:02,100 --> 00:05:06,010
Questo è un pulsante di avvio predefinito ed è un pulsante di grandi dimensioni.

77
00:05:06,330 --> 00:05:07,830
Torniamo indietro.

78
00:05:07,830 --> 00:05:18,120
Quindi abbiamo bisogno di PTEN e quindi del colore predefinito e quindi della dimensione tra LG per grande e

79
00:05:18,120 --> 00:05:20,520
qui aggiungeremo semplicemente il

80
00:05:24,290 --> 00:05:29,320
testo che è iniziato e salviamo vediamo cosa finiamo.

81
00:05:29,340 --> 00:05:30,330
Tutto ok.

82
00:05:30,330 --> 00:05:34,270
Quindi ora abbiamo il nostro contenuto ma Centro all'interno della griglia.

83
00:05:34,470 --> 00:05:36,920
E poi ci concentreremo sul padding e lo sposteremo verso il basso.

84
00:05:36,930 --> 00:05:41,430
Ma per iniziare con il centro all'interno di questa griglia e per renderlo più facile, raggrupperò tutto

85
00:05:41,430 --> 00:05:44,720
all'interno di un div in modo da non dover centrare ogni cosa individualmente.

86
00:05:44,760 --> 00:05:49,680
Dobbiamo centrare l'H-1 e poi i tre e poi il pulsante, piuttosto possiamo raggruppare un div e solo

87
00:05:49,680 --> 00:05:51,430
centrare quel div con una linea.

88
00:05:51,750 --> 00:06:01,490
Facciamo un div e io gli darò un ID di Cantet e poi metteremo tutto dentro di lì.

89
00:06:01,560 --> 00:06:08,340
Quindi l'H-1 di 3 anni l'H. R. e il pulsante rientrerà e salverà correttamente.

90
00:06:08,580 --> 00:06:13,420
Quindi niente dovrebbe apparire diverso se aggiorno la pagina prima di fare ciò aggiungiamo nel nostro foglio di stile.

91
00:06:14,340 --> 00:06:18,840
Così ho aggiunto un tag link e chiamerò la mia app per fogli di stile.

92
00:06:18,920 --> 00:06:20,920
SS Non esiste ancora.

93
00:06:21,120 --> 00:06:24,220
Quindi ho bisogno di farlo salvare.

94
00:06:24,230 --> 00:06:27,060
Vedo SS nella stessa directory.

95
00:06:27,420 --> 00:06:31,550
E iniziamo con qualcosa di semplice come tutti quelli che sono viola.

96
00:06:31,680 --> 00:06:35,030
Solo per assicurarsi che funzioni OK.

97
00:06:35,400 --> 00:06:37,060
Ritorniamo al refresh.

98
00:06:37,390 --> 00:06:39,100
Andrew prende un viola H-1.

99
00:06:39,180 --> 00:06:39,670
Grande.

100
00:06:39,870 --> 00:06:44,970
Quindi ora selezioniamo che Dave abbiamo aggiunto l'idea del contenuto e lo centriamo.

101
00:06:45,030 --> 00:06:53,620
Quindi sbarazzatevi di questo e abbiamo bisogno di un contenuto ID e omettendo di fare è allineare il testo Centro.

102
00:06:54,210 --> 00:06:56,430
Torniamo indietro.

103
00:06:56,430 --> 00:06:57,110
Eccoci.

104
00:06:57,120 --> 00:06:59,490
Quindi le cose sono allineate al Centro ora.

105
00:06:59,490 --> 00:07:06,720
Poi lo spingeremo giù di un po 'del 25 percento verso il basso per essere precisi con il padding uguale al 25 percento.

106
00:07:07,470 --> 00:07:15,270
Quindi qui faremo il padding del 25%.

107
00:07:16,270 --> 00:07:21,720
E invece di dargli un numero duro di pixel se lo manteniamo in percentuale è un

108
00:07:21,720 --> 00:07:22,870
po 'più reattivo.

109
00:07:22,890 --> 00:07:24,790
Quindi è proprio al centro.

110
00:07:25,230 --> 00:07:29,940
E poi il 25% cambia mentre ridimensioniamo lo schermo.

111
00:07:29,940 --> 00:07:30,540
Grande.

112
00:07:30,540 --> 00:07:32,480
Ora aggiungiamo l'immagine di sfondo.

113
00:07:32,670 --> 00:07:38,460
Quindi l'immagine che sto usando è adorabile, e l'interazione umana che sta succedendo qui è da questo sul sito di

114
00:07:38,460 --> 00:07:43,280
Splash Web che ho introdotto nell'ultimo video in cui abbiamo creato la griglia dell'immagine di bootstrap.

115
00:07:43,680 --> 00:07:48,300
E hanno tutti i tipi di immagini di alta qualità davvero grandi che è possibile utilizzare senza alcun problema.

116
00:07:48,480 --> 00:07:54,110
E quello che uso è proprio qui, cerco anche i link dei gatti in quella descrizione.

117
00:07:54,450 --> 00:08:00,230
Ecco il tuo Aro di questa immagine con il tasto destro del mouse copia l'immagine che sei.

118
00:08:00,360 --> 00:08:06,310
Ora torniamo indietro e lo aggiungerò al corpo come immagine di sfondo.

119
00:08:06,800 --> 00:08:13,830
Quindi sfondo e poi dargli un URL che è quel gigante Tu sei proprio lì.

120
00:08:13,830 --> 00:08:22,530
o l'aggiornamento, otteniamo un'immagine di sfondo gigantesca e tutto quello che possiamo dire è che questa è una sorta di avvio per le unghie.

121
00:08:22,530 --> 00:08:26,010
E se lasciamo che sia la forma a questo livello

122
00:08:26,010 --> 00:08:36,060
Quindi abbiamo bisogno di ridimensionarlo e per farlo usiamo le dimensioni dello sfondo e cambiamo di nuovo l'argomento.

123
00:08:36,060 --> 00:08:39,230
Di nuovo ci stiamo avvicinando.

124
00:08:39,270 --> 00:08:44,430
Ciò renderà l'immagine più piccola possibile mentre copre ancora l'intera larghezza e altezza dello

125
00:08:44,430 --> 00:08:44,950
schermo.

126
00:08:45,240 --> 00:08:50,820
Quindi non cambierà le proporzioni che non obbligherà l'immagine in alcun modo, ma si estenderà in entrambe le

127
00:08:50,850 --> 00:08:52,240
direzioni tanto quanto è necessario.

128
00:08:52,350 --> 00:08:57,060
Ma l'importo minimo che è necessario per adattarsi al nostro schermo e non è ancora perfetto.

129
00:08:57,210 --> 00:09:01,900
E quello che vogliamo fare non è cambiarne le dimensioni, ma cambiare la posizione.

130
00:09:02,190 --> 00:09:10,280
Ci concentreremo sul centro di posizione in background, ma evitiamo di essere più vicini.

131
00:09:10,290 --> 00:09:13,320
Ma non è ancora una corrispondenza perfetta per quanto riguarda l'immagine.

132
00:09:13,800 --> 00:09:15,510
E quei cambiamenti verranno dopo.

133
00:09:15,510 --> 00:09:21,540
Per ora voglio concentrarmi sull'aggiunta nella barra di navigazione e farlo quando vai ai documenti di Boucek e

134
00:09:21,540 --> 00:09:24,650
vai ai componenti e ho già detto questo prima.

135
00:09:25,080 --> 00:09:27,690
Lo faccio sempre se aggiungo una barra di navigazione bootstrap.

136
00:09:27,810 --> 00:09:29,850
È troppa roba da ricordare altrimenti.

137
00:09:30,230 --> 00:09:32,070
E lo copio proprio qui.

138
00:09:32,370 --> 00:09:39,630
Prenderò l'intero nav per iniziare a tornare alla nostra app qui e metterlo appena in cima.

139
00:09:39,630 --> 00:09:46,110
Questo non è sicuramente il NAF che vogliamo ma contiene i pezzi che vogliamo aggiornare.

140
00:09:46,380 --> 00:09:47,380
È abbastanza vicino

141
00:09:47,610 --> 00:09:49,360
Quindi ci sono alcuni cambiamenti che vogliamo apportare.

142
00:09:49,470 --> 00:09:55,890
Il primo e il più semplice è che il nostro contenuto della soluzione si trova in un contenitore, quindi

143
00:09:55,890 --> 00:09:58,570
non va fino ai bordi come fa qui.

144
00:09:59,100 --> 00:10:05,670
che, poiché abbiamo aggiunto in quel contenitore, ora abbiamo un po 'di spazio proprio come facciamo qui sopra sulla soluzione.

145
00:10:07,290 --> 00:10:13,020
Quindi possiamo tornare indietro e inserire o semplicemente cambiarlo in contenitore di classe div e se torniamo

146
00:10:13,260 --> 00:10:14,250
ora puoi vedere

147
00:10:14,250 --> 00:10:16,920
Ora iniziamo a lavorare sul contenuto reale del Nev. Quindi, la cosa più semplice è cambiare il marchio

148
00:10:17,070 --> 00:10:26,520
che in questo momento dice semplicemente che Brand in questa classe di linea è uguale al marchio neth bar e lo cambieremo in corrispondenza di una corrispondenza fissa e di un salvataggio.

149
00:10:26,550 --> 00:10:33,950
Provalo.

150
00:10:33,940 --> 00:10:34,990
Ok bene.

151
00:10:35,490 --> 00:10:37,500
Ora sbarazzarsi di questo modulo.

152
00:10:37,500 --> 00:10:39,050
Non ne abbiamo affatto bisogno.

153
00:10:39,060 --> 00:10:41,150
Quindi il nostro modulo inizia tutto qui.

154
00:10:41,310 --> 00:10:45,030
Sbarazzati di quell'intera cosa aggiorna.

155
00:10:45,030 --> 00:10:50,490
Eliminiamo anche il menu a discesa.

156
00:10:50,860 --> 00:10:52,560
Non ne hai bisogno.

157
00:10:52,560 --> 00:10:54,570
Quindi inizia proprio qui.

158
00:10:54,570 --> 00:10:56,680
Questa menzogna che finisce

159
00:10:56,680 --> 00:10:58,680
è di nuovo fresca.

160
00:11:01,770 --> 00:11:02,810
Ora abbiamo un singolo link.

161
00:11:03,120 --> 00:11:04,540
Quindi inizieremo con questi due collegamenti che dovrebbero essere registrati e registrarlo.

162
00:11:04,710 --> 00:11:10,910
Questo è il link qui, quindi possiamo cambiarlo per essere registrato e quindi duplicarlo.

163
00:11:11,360 --> 00:11:18,110
Solo un alleato con un tag di ancoraggio al suo interno.

164
00:11:18,390 --> 00:11:21,450
E questo verrà registrato.

165
00:11:21,450 --> 00:11:23,840
Controlliamolo.

166
00:11:24,750 --> 00:11:26,640
Grande.

167
00:11:26,700 --> 00:11:27,260
Quindi le icone arriveranno alla fine.

168
00:11:27,270 --> 00:11:29,100
Abbiamo i due collegamenti.

169
00:11:29,100 --> 00:11:30,380
Ora abbiamo bisogno di tre link qui.

170
00:11:30,450 --> 00:11:32,320
Ne abbiamo già due e ci libereremo di questo menu a discesa.

171
00:11:32,340 --> 00:11:35,500
Quindi abbiamo bisogno di casa in contatto.

172
00:11:35,610 --> 00:11:38,560
Quindi individuare quel menu a discesa che è proprio qui.

173
00:11:38,600 --> 00:11:41,490
Classe uguale a discesa.

174
00:11:41,490 --> 00:11:43,100
Liberiamolo e ora sono molto semplificati da Akbar.

175
00:11:43,140 --> 00:11:49,070
Ora abbiamo due lunghezze diverse.

176
00:11:49,080 --> 00:11:50,370
Ci libereremo di entrambi e lo faremo da zero.

177
00:11:50,390 --> 00:11:53,760
Quindi aggiungeremo un alleato con un tag di ancoraggio e lo faremo tre volte.

178
00:11:53,760 --> 00:12:00,120
Questo primo dovrebbe dire casa.

179
00:12:00,120 --> 00:12:02,260
Il prossimo è circa.

180
00:12:02,550 --> 00:12:04,100
E l'ultimo è il contatto.

181
00:12:04,320 --> 00:12:06,530
Controlliamolo.

182
00:12:07,020 --> 00:12:08,760
Ci andiamo sono tre lunghezze.

183
00:12:08,760 --> 00:12:11,050
Una cosa minore.

184
00:12:11,070 --> 00:12:11,970
La casa dovrebbe essere attiva e un bootstrap davvero facile.

185
00:12:11,970 --> 00:12:16,830
Tutto ciò che dobbiamo fare è aggiungere l'uguaglianza di classe attiva all'alleato

186
00:12:16,980 --> 00:12:24,860
non il tag di ancoraggio ma l'alleato genitore e ora finiamo con il fatto che il collegamento attivo è home.

187
00:12:26,220 --> 00:12:29,390
Grande.

188
00:12:29,400 --> 00:12:29,960
OK,

189
00:12:30,200 --> 00:12:36,900
questa è la nostra barra di navigazione e se ridimensioni vedremo che questo hamburger funziona già bene.

190
00:12:36,900 --> 00:12:37,940
Abbiamo un problema che è che la nostra immagine di sfondo è incasinata.

191
00:12:38,520 --> 00:12:42,420
Ne parleremo tra poco, ma abbiamo l'hamberger che funziona bene.

192
00:12:42,420 --> 00:12:45,750
Tutto sembra a posto.

193
00:12:45,750 --> 00:12:47,400
Adesso parliamo del font in modo che il font che ho usato qui sia Ledo L. UN. Proviene dai caratteri di Google, quindi andrò su Google font e cercherò Ledo.

194
00:12:47,430 --> 00:12:53,360
LA T-O tutti vanno alla collezione.

195
00:12:53,430 --> 00:12:57,900
Usiamolo se diventerà normale e audace.

196
00:12:58,010 --> 00:13:02,720
Inoltre vogliamo che il nostro H-1 sia audace.

197
00:13:03,180 --> 00:13:06,820
Va bene.

198
00:13:06,840 --> 00:13:10,050
E poi aggiungeremo questo link direttamente nella sua applicazione.

199
00:13:10,590 --> 00:13:11,040
In alto qui risparmia ora inserisci le app. Valuteremo che applicheremo quel font a tutto.

200
00:13:11,070 --> 00:13:16,290
Quindi selezionerò all'interno della famiglia di caratteri del corpo è Ledo e assicuriamoci che si carichi correttamente.

201
00:13:16,290 --> 00:13:24,090
Guarda cosa abbiamo aggiornato.

202
00:13:24,270 --> 00:13:33,720
E i nostri cambiamenti frontali sono difficili da vedere perché il testo è scuro ma cambiato, puoi

203
00:13:34,050 --> 00:13:36,780
anche vederlo sulla NFR qui.

204
00:13:37,520 --> 00:13:43,000
È cambiato

205
00:13:43,000 --> 00:13:43,990
Corrisponde a ciò che abbiamo in questa soluzione.

206
00:13:44,160 --> 00:13:44,790
 

207
00:13:44,790 --> 00:13:47,510