1
00:00:00,240 --> 00:00:04,170
Bentornato in questa lezione, continueremo a lavorare nel tuo campo.

2
00:00:04,170 --> 00:00:06,070
Abbiamo già completato la configurazione iniziale.

3
00:00:06,180 --> 00:00:11,430
Abbiamo aggiunto alcuni elementi di base aggiunti l'intestazione e il piè di pagina Parshall's abbiamo aggiunto il bootstrap

4
00:00:11,430 --> 00:00:13,990
e abbiamo aggiunto la funzionalità di creare nuovi campeggi.

5
00:00:14,010 --> 00:00:17,550
Ora andremo in stile nella pagina dei campeggi usando il bootstrap.

6
00:00:17,550 --> 00:00:18,600
Quindi iniziamo.

7
00:00:18,600 --> 00:00:21,230
La prima cosa che farò è assicurarsi che i miei server siano in esecuzione.

8
00:00:22,000 --> 00:00:25,260
E dai un'occhiata a quello che abbiamo adesso.

9
00:00:25,350 --> 00:00:26,740
Sicuramente un po 'travolgente.

10
00:00:26,850 --> 00:00:28,110
Quindi ho due obiettivi principali.

11
00:00:28,170 --> 00:00:34,150
Il primo è che vogliamo una migliore intestazione nel titolo qui, quindi questo dovrebbe apparire più bello.

12
00:00:34,170 --> 00:00:40,050
Useremo quello che viene chiamato un jumbotron in Bootstrap e quindi anche nei campeggi l'elenco dei campeggi

13
00:00:40,050 --> 00:00:43,000
non dovrebbe essere visualizzato in verticale come questo.

14
00:00:43,020 --> 00:00:48,200
Invece vogliamo una griglia di immagini più piccole che attraversi e quella griglia dovrebbe essere reattiva.

15
00:00:48,480 --> 00:00:52,850
Iniziamo con il primo che sta facendo apparire un po 'più bello questo testo del titolo.

16
00:00:53,100 --> 00:00:58,440
Quindi aprirò i campeggi che sì, sto solo andando a lavorare qui.

17
00:00:58,590 --> 00:01:04,010
Quindi ho intenzione di ridimensionarlo un po 'perché scriveremo un bel po' di HD mail

18
00:01:04,020 --> 00:01:06,390
e non faremo nulla con un terminale.

19
00:01:06,440 --> 00:01:12,510
Quindi, per lavorare sull'intestazione, useremo un tag header che non abbiamo mai visto prima.

20
00:01:12,510 --> 00:01:15,740
Funzionalmente funziona allo stesso modo di qualcosa come un div.

21
00:01:15,780 --> 00:01:20,080
L'unica differenza è che questo ha un po 'di significato semantico ad esso.

22
00:01:20,400 --> 00:01:25,850
Usare l'intestazione piuttosto che un semplice div arbitrario ma non importa che sia solo un contenitore.

23
00:01:26,010 --> 00:01:35,340
E gli daremo una classe di jumbotron e quindi al suo interno andremo ad aggiungere la copia di

24
00:01:35,340 --> 00:01:42,540
questo H-1 e lasceremo solo quello e salveremo Frigo e aggiorneremo la nostra pagina.

25
00:01:42,570 --> 00:01:44,890
Ora abbiamo quello che viene chiamato il Jumbotron.

26
00:01:45,130 --> 00:01:46,280
Non è ancora bello.

27
00:01:46,290 --> 00:01:50,720
La prossima cosa che dovremmo fare è creare tutto all'interno di un container di bootstrap.

28
00:01:51,030 --> 00:01:57,690
Quindi tutto ciò che vediamo qui tutto ciò che ho intenzione di indentare e ho intenzione di aggiungere un div

29
00:01:58,110 --> 00:02:01,260
con il contenitore di classi uguali proprio come quello.

30
00:02:01,460 --> 00:02:07,670
E poi ci metteremo tutto dentro e questo aggiungerà un po 'di speculazione per noi ai lati.

31
00:02:07,830 --> 00:02:08,710
Ricaricare.

32
00:02:08,880 --> 00:02:13,800
Puoi vedere che non abbiamo più cose contro il lato sinistro qui.

33
00:02:13,830 --> 00:02:19,200
Abbiamo un po 'di spazio e il nostro JumboTron sembra un po' più vicino e alla fine

34
00:02:19,200 --> 00:02:20,330
apparirà una barra naff.

35
00:02:20,520 --> 00:02:22,890
Quindi questo sembrerà un po 'più bello.

36
00:02:22,890 --> 00:02:25,530
Per ora abbiamo solo il Jumbotron.

37
00:02:25,590 --> 00:02:27,570
Ora cambiamo il testo stesso.

38
00:02:27,600 --> 00:02:34,530
Quindi, piuttosto che questa è la pagina dei campeggi, mettiamo un messaggio di benvenuto Benvenuto nel campo.

39
00:02:34,710 --> 00:02:40,140
libero di inserire qualsiasi contenuto desideri e aggiungerò anche

40
00:02:40,140 --> 00:02:55,470
un paragrafo nel paragrafo Aggiungerò solo un piccolo tipo di tagline e dirò semplicemente di vedere la nostra mano e scegliere campeggi da tutto il mondo.

41
00:02:55,800 --> 00:02:56,550
Sentiti

42
00:02:56,670 --> 00:02:58,940
Qualcosa del genere non ha molta importanza.

43
00:02:58,950 --> 00:03:00,850
Salveremo l'aggiornamento.

44
00:03:01,170 --> 00:03:06,650
OK, ora abbiamo una piccola riga di tag e l'ultima cosa che vogliamo fare è prenderci cura di questo link.

45
00:03:06,690 --> 00:03:08,280
Il link aggiungi nuovo campeggio.

46
00:03:08,580 --> 00:03:12,640
Quindi ho intenzione di copiarlo e anche di inserirlo nel Jumbotron.

47
00:03:12,650 --> 00:03:15,070
Comunque lo trasformerò in un pulsante.

48
00:03:15,150 --> 00:03:23,190
bootstrap per farlo o per aggiungere un paragrafo e poi inserire il tag di ancoraggio all'interno di esso.

49
00:03:23,190 --> 00:03:24,780
Uno dei pulsanti di

50
00:03:24,780 --> 00:03:26,680
E lo sto facendo solo per la spaziatura.

51
00:03:26,730 --> 00:03:32,820
Si desidera che questo sia sulla propria linea e quindi si assegnerà

52
00:03:32,850 --> 00:03:43,320
alla classe button più classi di PTEN ETN primarie per il colore e tra trattini grandi come quello e verranno salvate.

53
00:03:43,330 --> 00:03:45,420
Ora abbiamo avuto un nuovo pulsante per il campeggio.

54
00:03:45,510 --> 00:03:49,930
Facciamo clic su di esso e ci porta al modulo completamente in stile.

55
00:03:50,220 --> 00:03:54,050
Una cosa minore è che se ridimensiono questa finestra qui.

56
00:03:55,320 --> 00:04:01,740
Nota come il nostro testo va dritto contro il bordo del Jumbotron che non è eccezionale.

57
00:04:01,860 --> 00:04:07,380
Abbiamo una certa spaziatura qui e vogliono mantenere quella spaziatura ciò che dovremo

58
00:04:07,380 --> 00:04:19,680
fare è semplicemente aggiungere un altro contenitore all'interno del Jumbotron in modo tale che la classe div sia uguale al contenitore e quindi quaggiù all'interno del Jumbotron prima della fine

59
00:04:19,680 --> 00:04:24,330
al div di chiusura e quindi solo il rientro qualunque cosa.

60
00:04:24,420 --> 00:04:26,040
E ora se ci aggiorniamo.

61
00:04:26,210 --> 00:04:30,860
Sembrava la stessa, ma quando la riduciamo ora abbiamo un po 'di spazio.

62
00:04:31,230 --> 00:04:33,790
OK, questa è la parte dell'intestazione.

63
00:04:33,840 --> 00:04:37,680
Ora vogliamo lavorare su quella griglia di immagini e sarò in prima linea con te.

64
00:04:37,680 --> 00:04:39,770
È decisamente un po 'più di lavoro.

65
00:04:40,020 --> 00:04:49,200
OK, iniziamo con questa griglia e inizieremo creando una riga in modo tale che la classe div sia uguale alla

66
00:04:49,800 --> 00:04:53,520
riga e inizierò con un piccolo messaggio qui.

67
00:04:53,580 --> 00:05:03,210
Quindi aggiungeremo un equipo di classe div e farò in modo che occupi l'intera larghezza e avremo solo un messaggio

68
00:05:03,210 --> 00:05:11,040
qui e H-3 che dice che i nostri siti più popolari sono i campeggi che conosci

69
00:05:14,270 --> 00:05:15,790
non sembrerà molto

70
00:05:15,790 --> 00:05:24,160
Per ora torniamo indietro e iniziamo aggiungendo in una riga di classe div che abbiamo bisogno di tutto nella nostra scuola

71
00:05:24,160 --> 00:05:25,470
elementare di fila.

72
00:05:25,560 --> 00:05:28,820
È una classe div uguale alla fila proprio così.

73
00:05:28,970 --> 00:05:34,780
E ora dobbiamo parlare di questo per ogni ciclo perché ciò che vogliamo fare è invece che la nostra

74
00:05:34,780 --> 00:05:41,380
griglia all'interno della riga per ogni campeggio che vogliamo creare un div che abbia una classe di colonna e una colonna

75
00:05:41,800 --> 00:05:43,380
con la griglia di bootstrap.

76
00:05:43,420 --> 00:05:50,110
Quindi lo farò ora dove metterò tutto questo codice per ogni loop che andrà a

77
00:05:52,390 --> 00:05:53,580
rientrare proprio così.

78
00:05:53,830 --> 00:05:57,180
E poi abbiamo bisogno del nostro tag div di chiusura qui.

79
00:05:57,490 --> 00:06:01,500
Quindi questo è per la riga classica e questo è per il contenitore.

80
00:06:02,020 --> 00:06:02,470
OK.

81
00:06:02,730 --> 00:06:09,370
Quindi, la riga di una classe e piuttosto che lasciare questo contenuto come div e qui con una

82
00:06:09,870 --> 00:06:17,770
H per un'immagine avremo ancora un'immagine, ma stiamo andando a cambiare questo div in modo che abbia una classe di colonne medium

83
00:06:18,310 --> 00:06:26,740
tre in column small 6 e questo è solo per renderlo reattivo in modo da ottenere delle immagini più grandi quando le dimensioni

84
00:06:26,740 --> 00:06:28,270
dello schermo sono maggiori.

85
00:06:28,300 --> 00:06:34,090
E poi quando lo riduciamo, scenderà a due sole immagini per fila e poi si ridurrà ancora più in

86
00:06:34,090 --> 00:06:36,400
basso a una sola immagine per riga.

87
00:06:36,610 --> 00:06:44,080
è una classe di bootstrap che ci aiuterà a fare una piccola carta che farà sì che una

88
00:06:44,110 --> 00:06:49,270
piccola griglia all'interno di quella miniatura aggiunga il immagine per iniziare proprio così.

89
00:06:49,270 --> 00:06:56,560
Quindi all'interno di questo aggiungeremo in un altro div e questo div avrà una classe di miniature che

90
00:06:56,680 --> 00:07:02,210
Abbiamo servizi di immagine pari al campeggio che RL e lasceremo a questo.

91
00:07:02,230 --> 00:07:08,580
E per ora ci sbarazzeremo di questo e basta salvare e vediamo cosa otterremo se siamo freschi.

92
00:07:09,280 --> 00:07:09,820
Tutto ok.

93
00:07:09,910 --> 00:07:11,850
Quindi abbiamo una griglia di immagini ora.

94
00:07:11,890 --> 00:07:14,860
Ce ne sono solo tre, ma stiamo ottenendo questa griglia.

95
00:07:15,220 --> 00:07:18,580
E ti mostrerò cosa intendevo rendendolo reattivo.

96
00:07:18,580 --> 00:07:25,270
Quindi, come un rimpicciolimento, noti come cambia in due quadrati o due elementi sullo schermo.

97
00:07:25,280 --> 00:07:26,910
Ricorda che ci sono 12 unità.

98
00:07:27,040 --> 00:07:35,980
Quindi, per prima cosa lo abbiamo diviso in quattro blocchi in cui ognuno ha tirato fuori tre unità e poi quando

99
00:07:35,980 --> 00:07:43,390
la griglia diventa più piccola qui ognuno di loro occupa sei unità e anche più piccola diventa

100
00:07:43,390 --> 00:07:44,190
automaticamente una.

101
00:07:44,350 --> 00:07:49,130
E non abbiamo dovuto scriverlo perché il default extra piccolo è di usare 12 unità.

102
00:07:49,180 --> 00:07:52,050
Quindi non abbiamo dovuto specificarlo.

103
00:07:52,090 --> 00:07:59,950
Ora riprendiamo il titolo in questo nome del campeggio e non solo un'età in cui

104
00:08:00,460 --> 00:08:07,550
uno può fare una nuova classe di bootstrap. Una classe div equivale alla didascalia.

105
00:08:07,780 --> 00:08:13,080
E poi dentro ci sarà una H per il nome del campeggio.

106
00:08:14,070 --> 00:08:18,670
OK salviamo vediamo come appare.

107
00:08:18,670 --> 00:08:19,270
Eccoci.

108
00:08:19,300 --> 00:08:21,030
Riceviamo queste belle piccole carte.

109
00:08:21,040 --> 00:08:23,700
Questa è la classe delle miniature che lo ha fatto per noi.

110
00:08:23,840 --> 00:08:25,030
Abbiamo le nostre immagini.

111
00:08:25,210 --> 00:08:30,480
E vediamo cosa succede se abbiamo un sacco di immagini che vanno in un mucchio di oggetti.

112
00:08:30,760 --> 00:08:34,160
Quindi non devi farlo ma inserirò questo qui.

113
00:08:34,600 --> 00:08:36,860
Dacci qualche altro dato.

114
00:08:36,880 --> 00:08:38,800
Saranno dati duplicati ma va bene.

115
00:08:38,940 --> 00:08:46,250
E poi dobbiamo assicurarci di aggiungere le virgole corrette e quindi virgola lì e di venire lì.

116
00:08:46,300 --> 00:08:49,840
Ora, se aggiorniamo, dobbiamo riavviare il server.

117
00:08:50,170 --> 00:08:52,060
E ogni volta che abbiamo problemi con l'app.

118
00:08:52,120 --> 00:08:53,330
Sì.

119
00:08:53,590 --> 00:08:58,070
E ora, se ci aggiorniamo, vedremo che abbiamo un piccolo problema.

120
00:08:58,120 --> 00:09:00,040
La nostra griglia è un po 'incasinata.

121
00:09:00,170 --> 00:09:03,810
E quello che sta succedendo è che abbiamo immagini di differenti altezze.

122
00:09:04,090 --> 00:09:07,940
Quindi questo Salmon Creek è diverso da questi.

123
00:09:08,410 --> 00:09:10,710
Anche se la larghezza è la stessa in questo caso.

124
00:09:10,930 --> 00:09:16,150
E questo sta buttando giù dalla griglia e c'è un modo semplice per risolverlo anche se è un po 'vistoso.

125
00:09:16,270 --> 00:09:19,130
E ti mostrerò come lo facciamo al posto del nostro campeggio.

126
00:09:19,270 --> 00:09:19,960
Sì.

127
00:09:20,320 --> 00:09:26,860
Il giorno della riga della lezione aggiungerò un attributo di stile e lo farò solo temporaneamente.

128
00:09:27,010 --> 00:09:31,600
un foglio di stile esterno, ma lo farò semplicemente in linea per renderlo più semplice da vedere.

129
00:09:31,600 --> 00:09:32,530
Lo sposteremo su

130
00:09:32,530 --> 00:09:37,360
Quindi abbiamo impostato lo stile per visualizzare il flex e l'involucro flessibile da avvolgere.

131
00:09:37,480 --> 00:09:39,900
E quelle sono due proprietà che aiuteranno la nostra rete.

132
00:09:39,910 --> 00:09:44,810
Quindi, se fossi fresco Ora finiamo con la griglia dove è più flessibile.

133
00:09:44,860 --> 00:09:50,980
Non importa che abbiamo altezze diverse perché ora la griglia si adatta Quindi c'è più spazio

134
00:09:50,980 --> 00:09:53,400
tra questi due ed eccolo qui.

135
00:09:53,470 --> 00:09:59,500
Fondamentalmente calcola la quantità minima di spazio necessaria dove possiamo avere tutto su una linea

136
00:09:59,500 --> 00:10:02,750
tutta insieme dove possiamo avere tutto perfettamente allineato.

137
00:10:02,800 --> 00:10:09,460
E c'è un altro cambiamento che possiamo fare, che è quello di tornare indietro e aggiungere il centro del testo, che

138
00:10:09,460 --> 00:10:13,370
è un bootstrap per noi che renderà il nostro testo centrato proprio lì.

139
00:10:13,540 --> 00:10:15,410
E penso che sembra un po 'meglio.

140
00:10:15,490 --> 00:10:20,500
Anche una questione di preferenze personali e ora abbiamo finito con la pagina del campeggio per il momento.

141
00:10:20,620 --> 00:10:25,630
Speriamo che questo ti mostri come il bootstrap può davvero aiutarci a rendere le cose abbastanza facili,

142
00:10:25,630 --> 00:10:27,550
soprattutto rispetto a farlo da zero.

143
00:10:27,550 --> 00:10:31,900
E lascia che ti mostri la nostra bella griglia reattiva che abbiamo.

144
00:10:31,900 --> 00:10:33,260
Quindi questo è su cellulare.

145
00:10:33,310 --> 00:10:38,890
Otteniamo questo bel layout fino a quattro immagini che attraversano.

146
00:10:39,160 --> 00:10:41,140
OK, quindi sono abbastanza felice di come sembra.

147
00:10:41,140 --> 00:10:42,020
Ci vediamo nel prossimo video