Este vídeo, vamos continuar a marcar o campo.
Vamos adicionar uma barra de navegação a cada página e essa barra de navegação ficará bastante vazia por enquanto.
Mas, eventualmente, terá botões como fazer login e sair registrando toda essa funcionalidade.
Mas até então, vamos colocar algum texto de espaço reservado lá e então também vamos
definir a nova forma de acampamento, porque agora está em forma bastante áspera.
Então vamos começar o servidor e dar uma olhada no que temos.
Então, aqui está a nossa página de destino.
Aqui está a nossa visão de todos os campos alterar a lista de campgrounds.
Parece muito legal.
Queremos um bar de navegação aqui.
A mesma coisa é adicionar um novo acampamento.
Vamos centrar o formulário e vamos empilhar essas duas entradas em cima uma da outra em vez
de as terem lado a lado.
Mas vamos começar com a barra de navegação e vamos trabalhar no modelo de campground.
Então vamos voltar aqui e abrir o modelo de campground para começar.
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.
Eu vou abrir a caixa bootstrapped e vou abordar os componentes e, em seguida, a
barra de navegação e me encontrar nesta seção o tempo todo porque, embora o bootstrap facilite a navegação, você
pode ainda ver É um pouco de marcação e
Vamos começar agradável e simples, mas mesmo assim ainda é uma série de aulas que precisamos lembrar.
Então, definitivamente, não há vergonha em puxar os Darcs de bootstrap, como qualquer outra coisa nesta classe, você
não deveria se sentir envergonhado de procurar as coisas.
Mas, em particular, o bootstrap às vezes pode ser apenas uma bagunça dessas classes e elementos e
não há como fazê-lo sem olhar para os documentos.
OK, então vamos voltar e vou fazer algum espaço no topo do modelo dos
meus campgrounds e vamos começar definindo um Nav. que novamente, apenas como o cabeçalho.
Podemos simplesmente fazer uma div, mas uma Nav. é um pouco mais significativo.
É mais semântico.
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.
Existem diferentes tipos e cores diferentes ou podemos ter uma barra de navegação invertida, mas nós
apenas vamos usar o padrão.
vamos adicionar uma tag de âncora com classe igual a barra de barra de navegação para um final como esse.
E, em seguida, dentro, vai adicionar uma div com classe igual ao líquido do recipiente e isso
só nos fará um bom preenchimento e algum espaço lá e depois vamos adicionar em outro div com classe igual
ao cabeçalho da barra de navegação e, em seguida, dentro de a classe é igual a que nosso cabeçalho
E então, podemos definir o link para ser apenas uma barra e então vamos fechá-lo e adicionar no acampamento de
vontade assim.
E vamos ver o que obtemos com esta marcação simples.
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
item que é a marca da barra neph.
Vamos atualizar.
Ok, então, temos a barra de navegação e depois temos a nossa marca aqui e este é um
link que, quando clicarmos, nos levará de volta à horrível página de destino.
OK, então vamos adicionar alguns espaços reservados aqui para entrar e se inscrever.
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.
E. J. como modelo, então dentro da barra de navegação e do recipiente, mas não dentro do N. F. bar Hetter.
Nós vamos adicionar em outra div e esta div terá uma classe de colapso que verá o que isso
faz.
E apenas um momento e, em seguida, Neph bar Dasch colapso assim.
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
irá movê-lo para o lado direito e, em seguida, dentro do que vamos para Tenha três
links por agora e cada um será um aliado.
E, em seguida, dentro de que Ally terá uma marca de âncora e dará o primeiro log in.
E, por enquanto, o H ref só será configurado no nosso caminho de rota porque ainda não temos nenhum logon e
faremos o mesmo para se registrar.
Vamos fazer inscrição e, em seguida, também sair assim.
ESTÁ BEM.
Então vamos ver o que isso parece.
Antes de falar sobre o que o colapso faz se atualizarmos e não pareceu bom, perdemos
uma classe menor aqui na UL.
Parece que não adicionamos agora, então acabamos de adicionar a barra de navegação.
Agora eu nunca entendi certo, mas nós não adicionamos no próprio navegador, então vamos economizar, agora vamos atualizar e
acabamos com os três links no lado direito do NAV e também quando eu mudar o tamanho aqui.
Observe que aqui mesmo colapsou.
E, eventualmente, o que teremos é um pequeno ícone de hambúrguer.
Parece exatamente como você clicou e é o menu.
Por enquanto, apenas escondê-los quando chegarmos a esse tamanho.
ESTÁ BEM.
Então, é tudo o que precisamos fazer para a barra de navegação, exceto pelo fato de que é só nesta página.
Então, agora, adicione-o a todas as páginas.
Então, vamos copiá-lo ou cortá-lo e nós vamos movê-lo para o cabeçalho.
Então, mude para a cabeça ou parcial.
Eu vou abrir isso.
Usando as telas de linha de comando C9, barra o cabeçalho de barraca do Parshall Ijaw Sim.
E então, apenas no topo do corpo, vamos adicionar isso.
Vamos recuar isso corretamente.
Ok, vamos lá.
E nós temos nossa barra de navegação no cabeçalho para que qualquer arquivo que inclua o cabeçalho
parcial dentro agora tenha a barra de navegação, mas comece novamente o servidor.
Então ainda está aqui se adicionarmos um novo acampamento, nós também conseguimos esse bar.
E se vamos à página inicial, também temos a barra suficiente.
Ótimo.
Então, vamos seguir em frente para tornar este formulário um pouco melhor.
Então, como mencionei anteriormente, há duas grandes coisas que eu quero fazer nesse formulário.
O primeiro é centrá-lo no meio da página e o segundo é empilhar o formulário verticalmente
em vez de ter as três entradas ou as duas entradas e o botão alinhado
horizontalmente na tela.
Você quer levá-los e empilhá-los um sobre o outro.
Vamos começar abrindo o arquivo correto, que é o novo ponto.
Sim.
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.
Vamos começar fácil e adicionar algumas das classes de bootstrap aos formulários ou às entradas e esse
é o controle do dash.
E queremos isso em ambas as entradas e no botão.
Vamos adicionar na classe Bootstrap PTEN ETN grande assim.
E também fazemos a culpa e vejamos o que parece.
Então, nó após J.
Sim, atualize.
OK, então estamos recebendo os controles bootstrap aqui e o botão bootstrap embora seja definitivamente enorme e
não queremos isso.
Então, para corrigir isso, há algumas coisas que podemos fazer.
O primeiro é que vamos colocar tudo dentro de um recipiente.
Então fomos na div classe igual
a contêiner e vou simplesmente mover isso para o fundo.
Lá vamos e vamos recuar isso corretamente.
Salve mudanças muito pequenas.
Nós conseguimos algum espaçamento agora, mas isso ainda é uma forma maciça.
Então, a próxima coisa que vou fazer é usar o sistema de grade.
Então vamos adicionar em outro div e este terá uma classe igual à linha exatamente assim.
Vamos pegar isso e copiá-lo para a linha.
Então, o formulário inteiro entra em uma fileira agora.
E isso também é feito isso.
OK, salve a atualização ainda não é uma grande diferença.
E o que vamos fazer é usar o CSSA e realmente escrever nossos próprios estilos em cima do bootstrap
para centralizar isso, dando margem.
Auto tudo isso aqui mesmo no lado esquerdo e direito.
E nós só queríamos ocupar cerca de 30% desse recipiente em que está.
Então, fizemos isso antes de voltarmos e vou quebrar uma das regras, então eles
lhe contaram cedo. Não faça estilos inline.
E essa é definitivamente uma boa idéia para não fazer isso.
Mas, por enquanto, até chegar a uma nova versão onde criamos nossos próprios estilos, eu vou fazer isso
na linha.
Então eu vou fazer uma nova div que colocamos a forma dentro de.
Bem desse jeito.
E então eu vou dar esse estilo de div e eu vou começar dizendo com 30 por cento.
E deixe-o assim e não vejo que nós recebemos uma forma menor.
Agora queremos centralizar isso.
Então vamos voltar aqui.
Diga margem zero na parte superior e inferior e Otto à esquerda e à direita.
Agora temos a forma centrada.
A próxima coisa que faremos é fazer com que o botão ocupe toda a largura, que ainda é bastante longo.
Mas o que faremos é dar-lhe o bloco DTN, que é construído no modo Bootstrap para torná-lo um elemento de bloco.
E agora ocupa toda a linha.
Em seguida, vamos dar algum espaçamento entre todos esses elementos para fazer isso.
Usaremos bootstraps construídos em classe de grupo de formulários.
Então, precisamos de um grupo de divisão de formas de div classe ECOs e vamos precisar disso para cada entrada.
Então, cada entrada vai dentro de uma daquelas assim e então eu vou apenas duplicar
isso e teremos outro aqui e isso vai entrar dentro disso.
E então temos mais um para o botão.
Então, temos um grupo de forma clássico três vezes e também precisamos do fechamento de tags div.
Lá vamos nós, há um e precisamos do outro tag de div. De fechamento aqui.
ESTÁ BEM.
Então, esse grupo de formulário apenas grps coisas juntas.
Mas também nos dá um pouco de espaço.
Agora, temos esse botão aqui.
A próxima coisa em que podemos focar é centralizar o texto e fazer isso, embora tenhamos que fazer
é dar-lhe o centro de alinhamento de texto.
E novamente eu vou fazer isso na fila.
Não é uma boa idéia, no longo prazo, pelo menos, mas é um ótimo uso para fazer algo rapidamente.
Então, estilo e nós faremos o centro de alinhamento de texto.
Salve agora aquele centrado no meio.
A próxima coisa que devemos fazer é mudar a cor desse botão.
O branco não parece muito bem.
Vamos fazer o botão primário primário, o que o tornará azul, economize a atualização.
Sim, isso parece muito melhor.
Vamos também mover este link, o link voltar para o meio também.
Então, vamos copiar isso e tudo o que precisamos fazer é colocá-lo dentro dessa margem.
Auto div para que esta div aqui depois do formulário assim e salve.
Aqui vamos nós.
fazer é adicionar um pouco de preenchimento ou margem, de modo que não seja correto contra este H-1 para fazer isso.
Nós temos o nosso voltar e a última coisa que realmente devemos
Vamos voltar e já temos essa div que selecionamos.
Então, em vez de zero marginado, podemos dar uma margem de 20 pixels para começar.
Vamos ver como isso parece.
Ok, isso parece um pouco melhor.
Vamos fazer algo mais como 50.
E isso pode ser um pouco demais.
Definitivamente, sua própria preferência.
Vamos voltar e fazer 25.
Tudo bem.
Isso é bom o suficiente por enquanto.
Jogue com isso tanto quanto você quiser e você pode fazer isso formar as entradas mais amplas, se você
gosta delas ou mais estreitas, mas você pode ver que é receptivo que vai ficar no meio
e encolher um pouco.
A última coisa, vamos nos livrar dessa marca registrada.
Você definitivamente não precisa disso mais.
No final do nosso rodapé, então iremos para o arquivo do rodapé e eu vou trapacear.
Basta fazer isso por enquanto e acabaremos por nos livrar desse salvamento.
Agora, nós temos o nosso formulário, não parece muito ruim, podemos voltar, temos uma lista de acampamentos que temos
bar suficiente, podemos adicionar um.
Também podemos voltar e ver a página de destino que ainda não foi feita.
Aquele provavelmente tem mais trabalho e será bem diferente das outras páginas que ficará
muito melhor e terá estilos muito mais personalizados.
Então é por isso que estou guardando isso até mais tarde.
E então também temos nosso número aqui com nossos botões fofos que não fazem nada.
Tudo bem