1
00:00:00,250 --> 00:00:03,150
Questo video continueremo a disegnare il campo.

2
00:00:03,360 --> 00:00:08,590
Aggiungeremo una barra di navigazione ad ogni singola pagina e quella barra di navigazione sarà abbastanza vuota per ora.

3
00:00:08,700 --> 00:00:14,780
Ma alla fine avrà pulsanti come login e disconnessione registra tutte quelle funzionalità.

4
00:00:15,030 --> 00:00:19,710
Ma fino ad allora inseriremo solo un testo segnaposto e poi modificheremo anche la

5
00:00:19,710 --> 00:00:23,510
forma del nuovo campeggio perché al momento è in forma piuttosto approssimativa.

6
00:00:23,580 --> 00:00:28,860
Quindi iniziamo il server e diamo un'occhiata a ciò che abbiamo.

7
00:00:28,890 --> 00:00:31,150
Quindi, ecco la nostra pagina di destinazione.

8
00:00:31,680 --> 00:00:36,250
Ecco la nostra visione di tutto il campo cambia la lista dei campeggi.

9
00:00:36,290 --> 00:00:38,180
Sembra piuttosto okay.

10
00:00:38,430 --> 00:00:40,490
Vogliamo una barra di navigazione qui.

11
00:00:40,890 --> 00:00:43,370
Stessa cosa per aggiungere un nuovo campeggio.

12
00:00:43,740 --> 00:00:49,290
Concentreremo il modulo e impileremo questi due input uno sopra l'altro piuttosto che farli

13
00:00:49,290 --> 00:00:51,050
stare fianco a fianco.

14
00:00:51,360 --> 00:00:56,400
Ma inizieremo con la barra di navigazione e lavoriamo sul modello del campeggio.

15
00:00:56,610 --> 00:01:00,990
Quindi torneremo qui e apriremo il modello dei campeggi per iniziare.

16
00:01:00,990 --> 00:01:08,220
markup e la nostra non sarà così lunga almeno per non cominciare quando non abbiamo tutti i pulsanti nel menu a discesa.

17
00:01:08,220 --> 00:01:13,440
Aprirò la casella bootstrapped e passerò ai componenti e quindi alla barra di navigazione e

18
00:01:13,440 --> 00:01:19,890
mi ritroverò su questa sezione tutto il tempo, anche se bootstrap rende davvero facile aggiungere la barra di navigazione

19
00:01:19,890 --> 00:01:22,910
che puoi ancora vedere è un bel po 'di

20
00:01:22,950 --> 00:01:27,690
Cominceremo in modo semplice e semplice, ma anche in questo caso ci sono ancora molte classi che dobbiamo ricordare.

21
00:01:28,140 --> 00:01:32,700
Quindi non c'è da vergognarsi nel tirare su il bootstrap Darcs proprio come qualsiasi altra cosa in questa

22
00:01:32,710 --> 00:01:35,040
classe che non dovresti vergognarti di cercare le cose.

23
00:01:35,100 --> 00:01:40,320
Ma in particolare bootstrap a volte può essere solo un casino di queste classi ed elementi e

24
00:01:40,320 --> 00:01:42,860
non c'è modo di farlo senza guardare i documenti.

25
00:01:42,870 --> 00:01:48,870
OK, torneremo indietro e creerò un po 'di spazio nella parte superiore del mio modello

26
00:01:48,870 --> 00:01:55,180
di campeggio e inizieremo a definire un Nav. che di nuovo proprio come l'intestazione.

27
00:01:55,320 --> 00:01:59,450
Potremmo fare solo un div ma un Nav. è un po 'più significativo.

28
00:01:59,460 --> 00:02:00,870
È più semantico.

29
00:02:01,050 --> 00:02:09,580
Quindi eseguirò un nav con la barra di navigazione della classe e quindi il dash dash predefinito.

30
00:02:09,600 --> 00:02:14,640
Ci sono diversi tipi e colori diversi o possiamo avere una barra di navigazione invertita,

31
00:02:14,640 --> 00:02:16,240
ma andiamo con quella predefinita.

32
00:02:16,410 --> 00:02:25,500
tag di ancoraggio con la classe uguale al trattino della barra di navigazione per una fine del genere.

33
00:02:25,590 --> 00:02:33,570
E poi dentro aggiungeremo un div con una classe uguale a container fluid e questo ci renderà

34
00:02:36,480 --> 00:02:45,570
solo un bel padding e un po 'di spazio e poi aggiungeremo un altro div con la classe uguale

35
00:02:45,570 --> 00:02:54,090
all'intestazione della barra di navigazione e poi all'interno di la classe è uguale alla nostra intestazione, aggiungiamo un

36
00:02:54,330 --> 00:03:03,870
E poi possiamo impostare il link per essere solo una barra e poi chiuderemo quella e aggiungeremo nel campo yelper

37
00:03:03,870 --> 00:03:04,850
proprio così.

38
00:03:04,980 --> 00:03:07,750
E vediamo cosa otteniamo con questo semplice markup.

39
00:03:07,920 --> 00:03:14,430
Quindi abbiamo il nostro NAV con un container all'interno con l'intestazione della barra di navigazione e l'intestazione della barra di navigazione ha solo un elemento che

40
00:03:14,820 --> 00:03:16,730
è il marchio della barra di neph.

41
00:03:17,010 --> 00:03:18,290
Rinnova.

42
00:03:18,780 --> 00:03:24,060
OK, quindi abbiamo la barra di navigazione e quindi abbiamo il nostro marchio qui e questo è

43
00:03:24,060 --> 00:03:27,710
un link che quando clicciamo ci ricondurrà alla pagina di atterraggio orribile.

44
00:03:28,200 --> 00:03:34,320
OK, quindi aggiungiamo alcuni segnaposti qui per l'accesso e la registrazione.

45
00:03:34,320 --> 00:03:40,500
Non funzioneranno o non faranno nulla se non a noi sembra buono, quindi facciamolo ora andare al nostro campo.

46
00:03:40,890 --> 00:03:47,710
E. J. come modello quindi all'interno della barra di navigazione e del contenitore ma non all'interno del N. F. bar Hetter.

47
00:03:47,970 --> 00:03:55,950
Aggiungiamo un altro div e questo div avrà una classe di collasso che vedrà cosa

48
00:03:55,950 --> 00:03:56,220
farà.

49
00:03:56,220 --> 00:04:01,810
E solo un momento e poi Neph bar Dasch crolla proprio così.

50
00:04:01,890 --> 00:04:13,710
E poi all'interno aggiungeremo un UL e questo UL avrà una classe di barra di navigazione nav e poi anche barra di navigazione a destra che

51
00:04:13,770 --> 00:04:20,430
la sposterà sul lato destro e poi all'interno di quello che stiamo per avere

52
00:04:20,430 --> 00:04:24,520
tre collegamenti per ora e ognuno sarà un alleato.

53
00:04:25,170 --> 00:04:32,820
E poi all'interno che Ally avrà un tag di ancoraggio e darà il primo accesso.

54
00:04:32,850 --> 00:04:40,830
E per ora l'H ref sarà impostato sul nostro percorso di instradamento perché non abbiamo ancora alcun accesso e faremo la

55
00:04:40,830 --> 00:04:42,940
stessa cosa per il registro.

56
00:04:42,980 --> 00:04:49,540
Facciamo Sign-Up e poi disconnettiamo proprio così.

57
00:04:49,910 --> 00:04:50,680
OK.

58
00:04:51,210 --> 00:04:52,580
Quindi vediamo come si presenta.

59
00:04:52,590 --> 00:04:59,550
Prima di parlare di ciò che fa il collasso se ci aggiorniamo e non sembra buono, abbiamo

60
00:04:59,550 --> 00:05:02,090
perso una classe secondaria qui sull'UL.

61
00:05:02,290 --> 00:05:06,470
Sembra che non abbiamo aggiunto ora, quindi abbiamo aggiunto la barra di navigazione.

62
00:05:06,470 --> 00:05:13,680
Ora non ho mai capito bene, ma non abbiamo aggiunto in nav stesso, quindi il salvataggio ora verrà aggiornato e

63
00:05:13,680 --> 00:05:20,430
finiremo con tutti e tre i collegamenti sul lato destro del NAV e anche quando cambio la dimensione qui.

64
00:05:20,430 --> 00:05:25,130
Si noti che proprio qui proprio lì è crollato.

65
00:05:25,680 --> 00:05:29,300
E alla fine quello che avremo è una piccola icona di hamburger.

66
00:05:29,340 --> 00:05:32,610
Sembra proprio quello in cui si fa clic e si tratta del menu.

67
00:05:33,050 --> 00:05:36,180
Per ora li nascondiamo solo quando arriviamo a quelle dimensioni.

68
00:05:36,450 --> 00:05:36,690
OK.

69
00:05:36,690 --> 00:05:42,240
Quindi questo è tutto ciò che dobbiamo fare per la barra di navigazione ad eccezione del fatto che è solo su questa pagina.

70
00:05:42,240 --> 00:05:45,390
Quindi aggiungiamolo a tutte le pagine.

71
00:05:45,390 --> 00:05:50,030
Quindi copiamolo o tagliandolo e lo sposteremo nell'intestazione.

72
00:05:50,460 --> 00:05:52,400
Quindi spostati in testa o in parte.

73
00:05:52,680 --> 00:05:53,790
Lo aprirò.

74
00:05:53,790 --> 00:06:00,130
Utilizzando la riga di comando C9 visualizza la barra di intestazione di Parshall. Ijaw Sì.

75
00:06:00,570 --> 00:06:03,840
E poi proprio nella parte superiore del corpo lo aggiungeremo.

76
00:06:04,320 --> 00:06:06,080
Facciamo un rientro corretto.

77
00:06:06,570 --> 00:06:09,230
OK, andiamo.

78
00:06:09,900 --> 00:06:15,840
E abbiamo la nostra barra di navigazione nell'intestazione in modo che qualsiasi file che includiamo

79
00:06:15,840 --> 00:06:20,550
l'intestazione parziale ora avrà la barra di navigazione ma riavvierà il server.

80
00:06:20,850 --> 00:06:25,790
Quindi è ancora qui se aggiungiamo un nuovo campeggio abbiamo anche quel bar.

81
00:06:26,160 --> 00:06:31,270
E se andiamo alla home page abbiamo anche la barra sufficiente.

82
00:06:31,530 --> 00:06:32,110
Grande.

83
00:06:32,130 --> 00:06:36,950
Quindi passiamo a rendere questo aspetto un po 'migliore.

84
00:06:36,990 --> 00:06:40,840
Quindi, come ho detto prima, ci sono due grandi cose che voglio fare in questa forma.

85
00:06:40,860 --> 00:06:46,470
Il primo consiste nel centrarlo al centro della pagina e il secondo è impilare il modulo

86
00:06:46,950 --> 00:06:52,320
verticalmente piuttosto che avere i tre input oi due input e il pulsante allineato orizzontalmente

87
00:06:52,320 --> 00:06:53,270
sullo schermo.

88
00:06:53,370 --> 00:06:56,120
Vuoi prenderli e impilarli uno sull'altro.

89
00:06:56,370 --> 00:07:00,820
Iniziamo aprendo il file corretto che è il nuovo punto.

90
00:07:00,960 --> 00:07:01,510
Sì.

91
00:07:01,650 --> 00:07:11,470
Quindi faremo le battute di C9 sapendo che Ejay noi e poi ecco la nostra forma che abbiamo finora.

92
00:07:11,970 --> 00:07:18,750
Cominciamo in modo semplice e aggiungiamo alcune classi di bootstrap ai moduli o agli input e questo è il

93
00:07:19,020 --> 00:07:20,810
controllo del dash di forma.

94
00:07:21,150 --> 00:07:25,390
E lo vogliamo su entrambi gli input e sul pulsante.

95
00:07:25,500 --> 00:07:33,290
Aggiungiamo nella classe Bootstrap PTEN ETN grande proprio così.

96
00:07:33,570 --> 00:07:39,090
E facciamo anche tra l'errore e vediamo come appare.

97
00:07:39,090 --> 00:07:40,920
Quindi nodo dopo J.

98
00:07:41,030 --> 00:07:42,830
Si aggiorna.

99
00:07:43,300 --> 00:07:49,770
OK, quindi stiamo ottenendo i controlli di bootstrap qui e il pulsante bootstrap anche se è decisamente enorme e

100
00:07:50,100 --> 00:07:51,060
non lo vogliamo.

101
00:07:51,210 --> 00:07:54,840
Quindi per risolvere questo ci sono alcune cose che possiamo fare.

102
00:07:54,840 --> 00:07:57,900
Il primo è che metteremo tutto all'interno di un contenitore.

103
00:07:58,110 --> 00:08:01,520
Quindi siamo entrati in un contenitore div

104
00:08:04,680 --> 00:08:09,960
class equals e mi limiterò a spostarlo verso il basso.

105
00:08:10,930 --> 00:08:13,690
Eccoci e facciamo un rientro corretto.

106
00:08:13,950 --> 00:08:16,450
Salva modifiche molto minori.

107
00:08:16,530 --> 00:08:19,850
Ora otteniamo una certa spaziatura, ma è ancora una forma massiccia.

108
00:08:20,220 --> 00:08:23,280
Quindi la prossima cosa che farò è usare il sistema di griglia.

109
00:08:23,520 --> 00:08:30,710
Quindi aggiungeremo un altro div e questo avrà una classe uguale a row proprio così.

110
00:08:30,720 --> 00:08:33,750
Prendiamo questo e copialo nella riga.

111
00:08:33,780 --> 00:08:36,630
Quindi l'intero modulo va in fila ora.

112
00:08:36,810 --> 00:08:39,220
E anche questo è fatto.

113
00:08:39,610 --> 00:08:44,930
OK salva l'aggiornamento non è ancora una grande differenza.

114
00:08:44,970 --> 00:08:51,150
Quello che andremo a fare è usare il CSSA e scrivere effettivamente i nostri stili in cima al

115
00:08:51,150 --> 00:08:52,880
bootstrap per centrarlo dando margine.

116
00:08:52,880 --> 00:08:56,580
Auto tutto questo qui sul lato sinistro e destro.

117
00:08:56,700 --> 00:09:01,110
E volevamo solo prendere circa il 30 percento di questo container in cui si trova.

118
00:09:01,110 --> 00:09:06,960
Quindi l'abbiamo fatto prima di tornare indietro e ho intenzione di infrangere una delle regole, così ti

119
00:09:06,960 --> 00:09:10,120
hanno detto poco fa "Non fare stili in linea".

120
00:09:10,230 --> 00:09:13,930
E questa è sicuramente una buona idea non farlo.

121
00:09:14,010 --> 00:09:20,010
Ma per ora fino a quando non avremo una nuova versione in cui creeremo i nostri fogli di stile, lo farò

122
00:09:20,010 --> 00:09:20,500
in linea.

123
00:09:20,580 --> 00:09:24,130
Quindi creerò un nuovo div in cui inseriremo la forma.

124
00:09:24,270 --> 00:09:26,130
Proprio così.

125
00:09:26,760 --> 00:09:34,760
E poi darò quello stile div e inizierò col dire che è del 30 percento.

126
00:09:34,980 --> 00:09:39,650
E lasciamo perdere e non vediamo più una forma più piccola.

127
00:09:39,660 --> 00:09:41,820
Ora vogliamo centrarlo.

128
00:09:41,820 --> 00:09:43,080
Quindi torniamo qui.

129
00:09:43,110 --> 00:09:49,730
Dire margine zero in alto e in basso e Otto a sinistra ea destra.

130
00:09:50,430 --> 00:09:52,790
Ora abbiamo la forma centrata.

131
00:09:52,800 --> 00:09:58,750
La prossima cosa che faremo è fare in modo che il pulsante occupi l'intera larghezza, che è ancora piuttosto lunga.

132
00:09:58,790 --> 00:10:05,760
Ma quello che faremo è dargli un blocco DTN che è un modo costruito in Bootstrap per renderlo un elemento di blocco.

133
00:10:05,790 --> 00:10:08,370
E ora occupa l'intera linea.

134
00:10:08,400 --> 00:10:13,530
Diamo ora una spaziatura tra tutti questi elementi per farlo.

135
00:10:13,710 --> 00:10:17,300
Useremo i bootstrap costruiti nella classe del gruppo di moduli.

136
00:10:17,370 --> 00:10:25,250
Quindi abbiamo bisogno di un gruppo di dash di tipo ECO di classe div e ne avremo bisogno per ogni input.

137
00:10:25,470 --> 00:10:34,440
Quindi ogni input va all'interno di uno di quelli proprio così e poi lo duplicherò

138
00:10:34,560 --> 00:10:41,240
e ne avremo un altro qui e questo entrerà in quello.

139
00:10:41,850 --> 00:10:44,080
E poi ne abbiamo ancora uno per il pulsante.

140
00:10:44,610 --> 00:10:50,860
Quindi abbiamo tre volte il gruppo di forme classiche e abbiamo anche bisogno dei tag div di chiusura.

141
00:10:50,850 --> 00:10:54,810
Ce ne andiamo oh ce n'è uno e abbiamo bisogno dell'altra tag div di chiusura qui.

142
00:10:55,190 --> 00:10:56,060
OK.

143
00:10:56,220 --> 00:10:59,140
In questo modo, il gruppo di forma fa semplicemente un salto di qualità.

144
00:10:59,160 --> 00:11:01,530
Ma ci dà anche un po 'di spazio.

145
00:11:01,530 --> 00:11:03,300
Ora abbiamo questo pulsante qui.

146
00:11:03,390 --> 00:11:08,730
La prossima cosa su cui potremmo concentrarci è centrare il testo e farlo, anche se dobbiamo fare è

147
00:11:08,730 --> 00:11:11,010
dargli un centro di allineamento del testo.

148
00:11:11,490 --> 00:11:13,680
E di nuovo ho intenzione di farlo in linea.

149
00:11:13,680 --> 00:11:19,710
Non è una buona idea a lungo termine, ma questo è un ottimo modo per fare solo qualcosa velocemente.

150
00:11:20,160 --> 00:11:24,290
Quindi, stile e faremo centro di allineamento del testo.

151
00:11:25,650 --> 00:11:31,470
Salva ora quello centrato nel mezzo.

152
00:11:31,980 --> 00:11:35,030
La prossima cosa che dovremmo fare è cambiare il colore di questo pulsante.

153
00:11:35,070 --> 00:11:37,000
Il bianco non sta andando molto bene.

154
00:11:37,230 --> 00:11:44,730
Facciamo in modo che sia il pulsante primario primario che lo renderà blu.

155
00:11:44,760 --> 00:11:46,430
Sì, sembra molto meglio.

156
00:11:46,800 --> 00:11:51,700
Spostiamo anche questo link sul link indietro fino al centro pure.

157
00:11:51,900 --> 00:11:56,850
Quindi lo copiamo e tutto ciò che dobbiamo fare è metterlo all'interno di questo margine.

158
00:11:56,880 --> 00:12:07,200
Auto div in modo che questo div qui dopo il modulo sia proprio così e salva.

159
00:12:07,200 --> 00:12:07,810
Eccoci.

160
00:12:07,860 --> 00:12:14,310
è aggiungere un po 'di padding o margine in modo che non sia giusto contro questo H-1 farlo.

161
00:12:14,970 --> 00:12:18,750
Abbiamo il nostro ritorno e l'ultima cosa che dovremmo fare

162
00:12:19,080 --> 00:12:22,460
Torneremo indietro e abbiamo già questo div che abbiamo selezionato.

163
00:12:22,530 --> 00:12:28,050
Quindi, piuttosto che lo zero a margine, possiamo solo dargli un margine di 20 pixel per iniziare.

164
00:12:28,050 --> 00:12:29,750
Vediamo come sembra.

165
00:12:30,580 --> 00:12:32,140
Ok, sembra un po 'meglio.

166
00:12:32,340 --> 00:12:36,070
Facciamo qualcosa di più simile a 50.

167
00:12:36,600 --> 00:12:38,280
E potrebbe essere un po 'troppo.

168
00:12:38,280 --> 00:12:40,230
Sicuramente la tua preferenza.

169
00:12:40,350 --> 00:12:43,570
Torniamo indietro e facciamo 25.

170
00:12:44,700 --> 00:12:44,940
Tutto ok.

171
00:12:44,940 --> 00:12:46,420
Questo è abbastanza buono per ora.

172
00:12:46,440 --> 00:12:51,990
Gioca con questo quanto vuoi e puoi rendere gli input più ampi se ti piacciono o sono

173
00:12:51,990 --> 00:12:57,060
più ristretti, ma puoi vedere che è reattivo che rimarrà nel mezzo e si restringerà

174
00:12:57,060 --> 00:12:58,160
un po '.

175
00:12:58,170 --> 00:13:00,420
Ultima cosa liberiamoci di questo marchio.

176
00:13:00,420 --> 00:13:01,920
Sicuramente non ne hai più bisogno.

177
00:13:02,070 --> 00:13:06,570
Nella parte inferiore del nostro footer, andremo al file del footer e io baro.

178
00:13:06,620 --> 00:13:11,530
Basta fare questo per ora e ci libereremo di quel salvataggio.

179
00:13:11,700 --> 00:13:17,670
Ora abbiamo la nostra forma non sembra troppo male può tornare indietro otteniamo una lista di campeggi abbiamo abbastanza

180
00:13:18,180 --> 00:13:19,800
barra che possiamo aggiungere uno.

181
00:13:19,920 --> 00:13:24,000
Possiamo anche tornare indietro e visualizzare la pagina di destinazione che non è ancora stata eseguita.

182
00:13:24,210 --> 00:13:28,740
Quello probabilmente ha più lavoro e sarà molto diverso rispetto alle altre pagine, sarà molto

183
00:13:28,740 --> 00:13:31,360
più bello e avrà molti più stili personalizzati.

184
00:13:31,380 --> 00:13:33,280
Ecco perché lo sto salvando fino a dopo.

185
00:13:33,570 --> 00:13:38,550
E poi abbiamo anche il nostro numero qui con i nostri finti pulsanti che non fanno nulla.

186
00:13:38,550 --> 00:13:38,890
Tutto ok