1
00:00:00,250 --> 00:00:03,150
Este vídeo, vamos continuar a marcar o campo.

2
00:00:03,360 --> 00:00:08,590
Vamos adicionar uma barra de navegação a cada página e essa barra de navegação ficará bastante vazia por enquanto.

3
00:00:08,700 --> 00:00:14,780
Mas, eventualmente, terá botões como fazer login e sair registrando toda essa funcionalidade.

4
00:00:15,030 --> 00:00:19,710
Mas até então, vamos colocar algum texto de espaço reservado lá e então também vamos

5
00:00:19,710 --> 00:00:23,510
definir a nova forma de acampamento, porque agora está em forma bastante áspera.

6
00:00:23,580 --> 00:00:28,860
Então vamos começar o servidor e dar uma olhada no que temos.

7
00:00:28,890 --> 00:00:31,150
Então, aqui está a nossa página de destino.

8
00:00:31,680 --> 00:00:36,250
Aqui está a nossa visão de todos os campos alterar a lista de campgrounds.

9
00:00:36,290 --> 00:00:38,180
Parece muito legal.

10
00:00:38,430 --> 00:00:40,490
Queremos um bar de navegação aqui.

11
00:00:40,890 --> 00:00:43,370
A mesma coisa é adicionar um novo acampamento.

12
00:00:43,740 --> 00:00:49,290
Vamos centrar o formulário e vamos empilhar essas duas entradas em cima uma da outra em vez

13
00:00:49,290 --> 00:00:51,050
de as terem lado a lado.

14
00:00:51,360 --> 00:00:56,400
Mas vamos começar com a barra de navegação e vamos trabalhar no modelo de campground.

15
00:00:56,610 --> 00:01:00,990
Então vamos voltar aqui e abrir o modelo de campground para começar.

16
00:01:00,990 --> 00:01:08,220
o nosso não será tão longo, pelo menos, não para começar quando não temos todos os botões nos drop downs.

17
00:01:08,220 --> 00:01:13,440
Eu vou abrir a caixa bootstrapped e vou abordar os componentes e, em seguida, a

18
00:01:13,440 --> 00:01:19,890
barra de navegação e me encontrar nesta seção o tempo todo porque, embora o bootstrap facilite a navegação, você

19
00:01:19,890 --> 00:01:22,910
pode ainda ver É um pouco de marcação e

20
00:01:22,950 --> 00:01:27,690
Vamos começar agradável e simples, mas mesmo assim ainda é uma série de aulas que precisamos lembrar.

21
00:01:28,140 --> 00:01:32,700
Então, definitivamente, não há vergonha em puxar os Darcs de bootstrap, como qualquer outra coisa nesta classe, você

22
00:01:32,710 --> 00:01:35,040
não deveria se sentir envergonhado de procurar as coisas.

23
00:01:35,100 --> 00:01:40,320
Mas, em particular, o bootstrap às vezes pode ser apenas uma bagunça dessas classes e elementos e

24
00:01:40,320 --> 00:01:42,860
não há como fazê-lo sem olhar para os documentos.

25
00:01:42,870 --> 00:01:48,870
OK, então vamos voltar e vou fazer algum espaço no topo do modelo dos

26
00:01:48,870 --> 00:01:55,180
meus campgrounds e vamos começar definindo um Nav. que novamente, apenas como o cabeçalho.

27
00:01:55,320 --> 00:01:59,450
Podemos simplesmente fazer uma div, mas uma Nav. é um pouco mais significativo.

28
00:01:59,460 --> 00:02:00,870
É mais semântico.

29
00:02:01,050 --> 00:02:09,580
Então, eu vou fazer uma navegação com a barra de navegação da classe e, em seguida, o padrão da barra barra barra.

30
00:02:09,600 --> 00:02:14,640
Existem diferentes tipos e cores diferentes ou podemos ter uma barra de navegação invertida, mas nós

31
00:02:14,640 --> 00:02:16,240
apenas vamos usar o padrão.

32
00:02:16,410 --> 00:02:25,500
vamos adicionar uma tag de âncora com classe igual a barra de barra de navegação para um final como esse.

33
00:02:25,590 --> 00:02:33,570
E, em seguida, dentro, vai adicionar uma div com classe igual ao líquido do recipiente e isso

34
00:02:36,480 --> 00:02:45,570
só nos fará um bom preenchimento e algum espaço lá e depois vamos adicionar em outro div com classe igual

35
00:02:45,570 --> 00:02:54,090
ao cabeçalho da barra de navegação e, em seguida, dentro de a classe é igual a que nosso cabeçalho

36
00:02:54,330 --> 00:03:03,870
E então, podemos definir o link para ser apenas uma barra e então vamos fechá-lo e adicionar no acampamento de

37
00:03:03,870 --> 00:03:04,850
vontade assim.

38
00:03:04,980 --> 00:03:07,750
E vamos ver o que obtemos com esta marcação simples.

39
00:03:07,920 --> 00:03:14,430
Então, temos o nosso NAV com um recipiente dentro com o cabeçalho da barra de navegação e o cabeçalho da barra de navegação tem apenas um

40
00:03:14,820 --> 00:03:16,730
item que é a marca da barra neph.

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

42
00:03:18,780 --> 00:03:24,060
Ok, então, temos a barra de navegação e depois temos a nossa marca aqui e este é um

43
00:03:24,060 --> 00:03:27,710
link que, quando clicarmos, nos levará de volta à horrível página de destino.

44
00:03:28,200 --> 00:03:34,320
OK, então vamos adicionar alguns espaços reservados aqui para entrar e se inscrever.

45
00:03:34,320 --> 00:03:40,500
Eles não funcionarão ou não farão nada além de ficar bem, então vamos fazer isso agora, vá ao nosso campo.

46
00:03:40,890 --> 00:03:47,710
E. J. como modelo, então dentro da barra de navegação e do recipiente, mas não dentro do N. F. bar Hetter.

47
00:03:47,970 --> 00:03:55,950
Nós vamos adicionar em outra div e esta div terá uma classe de colapso que verá o que isso

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

49
00:03:56,220 --> 00:04:01,810
E apenas um momento e, em seguida, Neph bar Dasch colapso assim.

50
00:04:01,890 --> 00:04:13,710
E, em seguida, dentro, vamos adicionar uma UL e esta UL terá uma classe de nav bar dash nav e, em seguida, também nav bar dash direito que

51
00:04:13,770 --> 00:04:20,430
irá movê-lo para o lado direito e, em seguida, dentro do que vamos para Tenha três

52
00:04:20,430 --> 00:04:24,520
links por agora e cada um será um aliado.

53
00:04:25,170 --> 00:04:32,820
E, em seguida, dentro de que Ally terá uma marca de âncora e dará o primeiro log in.

54
00:04:32,850 --> 00:04:40,830
E, por enquanto, o H ref só será configurado no nosso caminho de rota porque ainda não temos nenhum logon e

55
00:04:40,830 --> 00:04:42,940
faremos o mesmo para se registrar.

56
00:04:42,980 --> 00:04:49,540
Vamos fazer inscrição e, em seguida, também sair assim.

57
00:04:49,910 --> 00:04:50,680
ESTÁ BEM.

58
00:04:51,210 --> 00:04:52,580
Então vamos ver o que isso parece.

59
00:04:52,590 --> 00:04:59,550
Antes de falar sobre o que o colapso faz se atualizarmos e não pareceu bom, perdemos

60
00:04:59,550 --> 00:05:02,090
uma classe menor aqui na UL.

61
00:05:02,290 --> 00:05:06,470
Parece que não adicionamos agora, então acabamos de adicionar a barra de navegação.

62
00:05:06,470 --> 00:05:13,680
Agora eu nunca entendi certo, mas nós não adicionamos no próprio navegador, então vamos economizar, agora vamos atualizar e

63
00:05:13,680 --> 00:05:20,430
acabamos com os três links no lado direito do NAV e também quando eu mudar o tamanho aqui.

64
00:05:20,430 --> 00:05:25,130
Observe que aqui mesmo colapsou.

65
00:05:25,680 --> 00:05:29,300
E, eventualmente, o que teremos é um pequeno ícone de hambúrguer.

66
00:05:29,340 --> 00:05:32,610
Parece exatamente como você clicou e é o menu.

67
00:05:33,050 --> 00:05:36,180
Por enquanto, apenas escondê-los quando chegarmos a esse tamanho.

68
00:05:36,450 --> 00:05:36,690
ESTÁ BEM.

69
00:05:36,690 --> 00:05:42,240
Então, é tudo o que precisamos fazer para a barra de navegação, exceto pelo fato de que é só nesta página.

70
00:05:42,240 --> 00:05:45,390
Então, agora, adicione-o a todas as páginas.

71
00:05:45,390 --> 00:05:50,030
Então, vamos copiá-lo ou cortá-lo e nós vamos movê-lo para o cabeçalho.

72
00:05:50,460 --> 00:05:52,400
Então, mude para a cabeça ou parcial.

73
00:05:52,680 --> 00:05:53,790
Eu vou abrir isso.

74
00:05:53,790 --> 00:06:00,130
Usando as telas de linha de comando C9, barra o cabeçalho de barraca do Parshall Ijaw Sim.

75
00:06:00,570 --> 00:06:03,840
E então, apenas no topo do corpo, vamos adicionar isso.

76
00:06:04,320 --> 00:06:06,080
Vamos recuar isso corretamente.

77
00:06:06,570 --> 00:06:09,230
Ok, vamos lá.

78
00:06:09,900 --> 00:06:15,840
E nós temos nossa barra de navegação no cabeçalho para que qualquer arquivo que inclua o cabeçalho

79
00:06:15,840 --> 00:06:20,550
parcial dentro agora tenha a barra de navegação, mas comece novamente o servidor.

80
00:06:20,850 --> 00:06:25,790
Então ainda está aqui se adicionarmos um novo acampamento, nós também conseguimos esse bar.

81
00:06:26,160 --> 00:06:31,270
E se vamos à página inicial, também temos a barra suficiente.

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

83
00:06:32,130 --> 00:06:36,950
Então, vamos seguir em frente para tornar este formulário um pouco melhor.

84
00:06:36,990 --> 00:06:40,840
Então, como mencionei anteriormente, há duas grandes coisas que eu quero fazer nesse formulário.

85
00:06:40,860 --> 00:06:46,470
O primeiro é centrá-lo no meio da página e o segundo é empilhar o formulário verticalmente

86
00:06:46,950 --> 00:06:52,320
em vez de ter as três entradas ou as duas entradas e o botão alinhado

87
00:06:52,320 --> 00:06:53,270
horizontalmente na tela.

88
00:06:53,370 --> 00:06:56,120
Você quer levá-los e empilhá-los um sobre o outro.

89
00:06:56,370 --> 00:07:00,820
Vamos começar abrindo o arquivo correto, que é o novo ponto.

90
00:07:00,960 --> 00:07:01,510
Sim.

91
00:07:01,650 --> 00:07:11,470
Então, vamos fazer as verificações de C9, sabia que Ejay nos e, em seguida, aqui está a nossa forma que temos até agora.

92
00:07:11,970 --> 00:07:18,750
Vamos começar fácil e adicionar algumas das classes de bootstrap aos formulários ou às entradas e esse

93
00:07:19,020 --> 00:07:20,810
é o controle do dash.

94
00:07:21,150 --> 00:07:25,390
E queremos isso em ambas as entradas e no botão.

95
00:07:25,500 --> 00:07:33,290
Vamos adicionar na classe Bootstrap PTEN ETN grande assim.

96
00:07:33,570 --> 00:07:39,090
E também fazemos a culpa e vejamos o que parece.

97
00:07:39,090 --> 00:07:40,920
Então, nó após J.

98
00:07:41,030 --> 00:07:42,830
Sim, atualize.

99
00:07:43,300 --> 00:07:49,770
OK, então estamos recebendo os controles bootstrap aqui e o botão bootstrap embora seja definitivamente enorme e

100
00:07:50,100 --> 00:07:51,060
não queremos isso.

101
00:07:51,210 --> 00:07:54,840
Então, para corrigir isso, há algumas coisas que podemos fazer.

102
00:07:54,840 --> 00:07:57,900
O primeiro é que vamos colocar tudo dentro de um recipiente.

103
00:07:58,110 --> 00:08:01,520
Então fomos na div classe igual

104
00:08:04,680 --> 00:08:09,960
a contêiner e vou simplesmente mover isso para o fundo.

105
00:08:10,930 --> 00:08:13,690
Lá vamos e vamos recuar isso corretamente.

106
00:08:13,950 --> 00:08:16,450
Salve mudanças muito pequenas.

107
00:08:16,530 --> 00:08:19,850
Nós conseguimos algum espaçamento agora, mas isso ainda é uma forma maciça.

108
00:08:20,220 --> 00:08:23,280
Então, a próxima coisa que vou fazer é usar o sistema de grade.

109
00:08:23,520 --> 00:08:30,710
Então vamos adicionar em outro div e este terá uma classe igual à linha exatamente assim.

110
00:08:30,720 --> 00:08:33,750
Vamos pegar isso e copiá-lo para a linha.

111
00:08:33,780 --> 00:08:36,630
Então, o formulário inteiro entra em uma fileira agora.

112
00:08:36,810 --> 00:08:39,220
E isso também é feito isso.

113
00:08:39,610 --> 00:08:44,930
OK, salve a atualização ainda não é uma grande diferença.

114
00:08:44,970 --> 00:08:51,150
E o que vamos fazer é usar o CSSA e realmente escrever nossos próprios estilos em cima do bootstrap

115
00:08:51,150 --> 00:08:52,880
para centralizar isso, dando margem.

116
00:08:52,880 --> 00:08:56,580
Auto tudo isso aqui mesmo no lado esquerdo e direito.

117
00:08:56,700 --> 00:09:01,110
E nós só queríamos ocupar cerca de 30% desse recipiente em que está.

118
00:09:01,110 --> 00:09:06,960
Então, fizemos isso antes de voltarmos e vou quebrar uma das regras, então eles

119
00:09:06,960 --> 00:09:10,120
lhe contaram cedo. Não faça estilos inline.

120
00:09:10,230 --> 00:09:13,930
E essa é definitivamente uma boa idéia para não fazer isso.

121
00:09:14,010 --> 00:09:20,010
Mas, por enquanto, até chegar a uma nova versão onde criamos nossos próprios estilos, eu vou fazer isso

122
00:09:20,010 --> 00:09:20,500
na linha.

123
00:09:20,580 --> 00:09:24,130
Então eu vou fazer uma nova div que colocamos a forma dentro de.

124
00:09:24,270 --> 00:09:26,130
Bem desse jeito.

125
00:09:26,760 --> 00:09:34,760
E então eu vou dar esse estilo de div e eu vou começar dizendo com 30 por cento.

126
00:09:34,980 --> 00:09:39,650
E deixe-o assim e não vejo que nós recebemos uma forma menor.

127
00:09:39,660 --> 00:09:41,820
Agora queremos centralizar isso.

128
00:09:41,820 --> 00:09:43,080
Então vamos voltar aqui.

129
00:09:43,110 --> 00:09:49,730
Diga margem zero na parte superior e inferior e Otto à esquerda e à direita.

130
00:09:50,430 --> 00:09:52,790
Agora temos a forma centrada.

131
00:09:52,800 --> 00:09:58,750
A próxima coisa que faremos é fazer com que o botão ocupe toda a largura, que ainda é bastante longo.

132
00:09:58,790 --> 00:10:05,760
Mas o que faremos é dar-lhe o bloco DTN, que é construído no modo Bootstrap para torná-lo um elemento de bloco.

133
00:10:05,790 --> 00:10:08,370
E agora ocupa toda a linha.

134
00:10:08,400 --> 00:10:13,530
Em seguida, vamos dar algum espaçamento entre todos esses elementos para fazer isso.

135
00:10:13,710 --> 00:10:17,300
Usaremos bootstraps construídos em classe de grupo de formulários.

136
00:10:17,370 --> 00:10:25,250
Então, precisamos de um grupo de divisão de formas de div classe ECOs e vamos precisar disso para cada entrada.

137
00:10:25,470 --> 00:10:34,440
Então, cada entrada vai dentro de uma daquelas assim e então eu vou apenas duplicar

138
00:10:34,560 --> 00:10:41,240
isso e teremos outro aqui e isso vai entrar dentro disso.

139
00:10:41,850 --> 00:10:44,080
E então temos mais um para o botão.

140
00:10:44,610 --> 00:10:50,860
Então, temos um grupo de forma clássico três vezes e também precisamos do fechamento de tags div.

141
00:10:50,850 --> 00:10:54,810
Lá vamos nós, há um e precisamos do outro tag de div. De fechamento aqui.

142
00:10:55,190 --> 00:10:56,060
ESTÁ BEM.

143
00:10:56,220 --> 00:10:59,140
Então, esse grupo de formulário apenas grps coisas juntas.

144
00:10:59,160 --> 00:11:01,530
Mas também nos dá um pouco de espaço.

145
00:11:01,530 --> 00:11:03,300
Agora, temos esse botão aqui.

146
00:11:03,390 --> 00:11:08,730
A próxima coisa em que podemos focar é centralizar o texto e fazer isso, embora tenhamos que fazer

147
00:11:08,730 --> 00:11:11,010
é dar-lhe o centro de alinhamento de texto.

148
00:11:11,490 --> 00:11:13,680
E novamente eu vou fazer isso na fila.

149
00:11:13,680 --> 00:11:19,710
Não é uma boa idéia, no longo prazo, pelo menos, mas é um ótimo uso para fazer algo rapidamente.

150
00:11:20,160 --> 00:11:24,290
Então, estilo e nós faremos o centro de alinhamento de texto.

151
00:11:25,650 --> 00:11:31,470
Salve agora aquele centrado no meio.

152
00:11:31,980 --> 00:11:35,030
A próxima coisa que devemos fazer é mudar a cor desse botão.

153
00:11:35,070 --> 00:11:37,000
O branco não parece muito bem.

154
00:11:37,230 --> 00:11:44,730
Vamos fazer o botão primário primário, o que o tornará azul, economize a atualização.

155
00:11:44,760 --> 00:11:46,430
Sim, isso parece muito melhor.

156
00:11:46,800 --> 00:11:51,700
Vamos também mover este link, o link voltar para o meio também.

157
00:11:51,900 --> 00:11:56,850
Então, vamos copiar isso e tudo o que precisamos fazer é colocá-lo dentro dessa margem.

158
00:11:56,880 --> 00:12:07,200
Auto div para que esta div aqui depois do formulário assim e salve.

159
00:12:07,200 --> 00:12:07,810
Aqui vamos nós.

160
00:12:07,860 --> 00:12:14,310
fazer é adicionar um pouco de preenchimento ou margem, de modo que não seja correto contra este H-1 para fazer isso.

161
00:12:14,970 --> 00:12:18,750
Nós temos o nosso voltar e a última coisa que realmente devemos

162
00:12:19,080 --> 00:12:22,460
Vamos voltar e já temos essa div que selecionamos.

163
00:12:22,530 --> 00:12:28,050
Então, em vez de zero marginado, podemos dar uma margem de 20 pixels para começar.

164
00:12:28,050 --> 00:12:29,750
Vamos ver como isso parece.

165
00:12:30,580 --> 00:12:32,140
Ok, isso parece um pouco melhor.

166
00:12:32,340 --> 00:12:36,070
Vamos fazer algo mais como 50.

167
00:12:36,600 --> 00:12:38,280
E isso pode ser um pouco demais.

168
00:12:38,280 --> 00:12:40,230
Definitivamente, sua própria preferência.

169
00:12:40,350 --> 00:12:43,570
Vamos voltar e fazer 25.

170
00:12:44,700 --> 00:12:44,940
Tudo bem.

171
00:12:44,940 --> 00:12:46,420
Isso é bom o suficiente por enquanto.

172
00:12:46,440 --> 00:12:51,990
Jogue com isso tanto quanto você quiser e você pode fazer isso formar as entradas mais amplas, se você

173
00:12:51,990 --> 00:12:57,060
gosta delas ou mais estreitas, mas você pode ver que é receptivo que vai ficar no meio

174
00:12:57,060 --> 00:12:58,160
e encolher um pouco.

175
00:12:58,170 --> 00:13:00,420
A última coisa, vamos nos livrar dessa marca registrada.

176
00:13:00,420 --> 00:13:01,920
Você definitivamente não precisa disso mais.

177
00:13:02,070 --> 00:13:06,570
No final do nosso rodapé, então iremos para o arquivo do rodapé e eu vou trapacear.

178
00:13:06,620 --> 00:13:11,530
Basta fazer isso por enquanto e acabaremos por nos livrar desse salvamento.

179
00:13:11,700 --> 00:13:17,670
Agora, nós temos o nosso formulário, não parece muito ruim, podemos voltar, temos uma lista de acampamentos que temos

180
00:13:18,180 --> 00:13:19,800
bar suficiente, podemos adicionar um.

181
00:13:19,920 --> 00:13:24,000
Também podemos voltar e ver a página de destino que ainda não foi feita.

182
00:13:24,210 --> 00:13:28,740
Aquele provavelmente tem mais trabalho e será bem diferente das outras páginas que ficará

183
00:13:28,740 --> 00:13:31,360
muito melhor e terá estilos muito mais personalizados.

184
00:13:31,380 --> 00:13:33,280
Então é por isso que estou guardando isso até mais tarde.

185
00:13:33,570 --> 00:13:38,550
E então também temos nosso número aqui com nossos botões fofos que não fazem nada.

186
00:13:38,550 --> 00:13:38,890
Tudo bem