Bem-vindo, volte nesta lição, vamos nos concentrar no estilo da página do show.
Então, agora, nossa página de exibição parece assim.
Nós temos um pequeno bar naff aqui com os botões que não fazem nada.
Temos um H-1 com o nome do acampamento.
E temos uma imagem e uma descrição e temos um botão para adicionar um novo comentário e todos
os comentários são exibidos.
Cada um um pequeno parágrafo.
Então, nosso objetivo aqui é fazer com que pareça um pouco mais assim.
Então eu tenho uma barra lateral aqui.
Ainda não vamos ter o mapa, mas vamos abrir espaço para o mapa e teremos
o nosso conteúdo principal com a descrição.
Alguns texto o título que nós não vamos fazer as avaliações ainda, mas também teremos uma lista de comentários
que se parecem com isto.
Seu próprio pequeno recipiente lá embaixo, eu vou ter um pequeno botão para alavancar alguns.
Geralmente é um pouco mais desenhado.
Podemos adicionar isso e aquilo diz quantos comentários foram deixados.
Então, é por isso que estamos apontando.
E para começar, vamos nos concentrar apenas na grade de inicialização.
Lembre-se de que a grade de inicialização é de 12 unidades.
Nós vamos designar três desses 12 para essa pequena barra lateral e então vamos
adicionar nove para o conteúdo principal.
Antes de começar a mudar qualquer coisa, quero salientar que estou trabalhando na v 5 agora.
Então, se você quiser acompanhar todas essas mudanças, estará na V 5.
E a razão pela qual eu estou fazendo isso é que teremos que criar uma folha de estilo personalizada.
Vamos ter que servir o diretório público e algumas outras coisas que são mudanças substanciais.
Então eu queria fazer uma versão separada.
Mas antes de fazer isso, a primeira coisa que vamos fazer é adicionar um contêiner em torno de
todo esse container bootstrap.
Então mostre que E. J. vai adicionar uma div com a classe do recipiente assim, e
vamos colocar tudo dentro disso.
E vou começar por adicionar a barra lateral e nós vamos preenchê-lo com alguns dados falsos, como nós temos aqui.
pro e nessa linha vamos ter outra div onde uma classe é coluna média três exatamente assim.
Então DIVX e isso precisa ser de classe igual a
E então dentro daqui vamos adicionar um parágrafo e vamos pegar esse texto que diz Joachim.
Então, esse é um parágrafo onde a aula é liderada e, em seguida, só vamos colocá-lo no acampamento por agora,
vamos mudar isso eventualmente.
Mas sim, acampamento e, em seguida, para adicionar esses pequenos itens de lista, nós faremos um div com a classe
é grupo de lista e depois aqui vamos adicionar um monte de aliados em cada aliado tem uma classe de item de grupo de lista.
E dentro, vamos apenas adicionar alguns dados falsos e nós apenas chamaremos de informação 1 e
depois vou duplicar essa informação para a informação 3.
E então vamos ver o que parece por enquanto.
Então, para atualizar a página, temos uma barra lateral aqui e vou selecionar um desses itens para começar.
E tudo o que temos a fazer é adicionar um direito ativo ali.
Se estamos frescos, agora vemos que um deles está ativo.
E este é realmente apenas um espaço reservado para ter algo lá, então não temos muito
espaço em branco, mas novamente vamos adicionar dados reais lá e um mapa eventualmente.
E apenas para apontar para fora o mapa irá aqui mesmo aqui dentro deste terceiro terceiro, mas
não apenas ainda.
OK, então é uma barra lateral.
Agora, vamos adicionar o conteúdo principal.
Então, precisamos de outra coluna e esta é a coluna de classe no meio 9.
E em vez de lá, precisamos ter o H-1, precisamos ter a imagem, mas antes de tudo, você
notará que é realmente tudo em uma dessas miniaturas exatamente como temos na página inicial.
Cada uma delas é uma miniatura.
Vamos fazer o mesmo em toda a imagem no título e nos comentários e tudo isso.
Então vamos adicionar uma div e essa div terá classe igual à miniatura.
E então dentro de que vamos adicionar a imagem e ainda vou continuar a imagem que já escrevemos e
simplesmente colocá-la bem lá.
Então essa será a nossa imagem de acampamento.
E então, também queremos adicionar uma aula para que o bootstrapped nos dê qual a imagem que a Dasch responde.
Aqui vamos nós.
Salve isso.
E se olharmos o que temos agora e atualizamos, pelo menos temos a imagem e o
conteúdo no lugar certo.
Nós temos um problema em que isso não está acontecendo com aquilo que queremos.
Eu quero que isso vá todo o caminho e nós teremos que lidar com isso com algum C Ss personalizado no final.
E agora vamos voltar e adicionar isso aqui onde temos o nome do terreno do acampamento e, em seguida, o preço por
noite, que na verdade não temos no banco de dados.
Então, vamos apenas codificar.
Então vamos fazer isso agora.
E essa é outra div e esta tem uma classe de legenda cheia.
E então dentro de lá vamos adicionar um H para.
E nós vamos puxar isso para a direita e nós fazemos a classe igual a puxar direita e então o que quer
que colocamos aqui será o preço.
E vou começar com US $ 9 por noite novamente, isso virá do banco de dados eventualmente.
Se estamos frescos Agora, recebemos $ 9 por noite no lado direito e então queremos obter o nome
do acampamento que vou copiar aqui do lado esquerdo.
Então, vamos colocá-lo bem abaixo e se não adicionarmos puxar direito, ele irá automaticamente para a esquerda,
embora seja maior do que o que eu tinha em mente e eu vou transformar isso em um H menor e eu vou para
adicionar uma marca de âncora dentro de lá, assim como colocar o nome do acampamento dentro da marca de âncora.
E a idéia por trás disso é que eventualmente eu volto.
Este deve ser um link para o acampamento real ou a página do Serviço de parques onde podemos ir para reservar algo.
Por enquanto, é apenas o link para lugar nenhum.
ESTÁ BEM.
Então, temos isso.
Temos um preço.
Agora vamos adicionar a descrição de volta.
será uma tag de parágrafo e, em seguida, adicionaremos a nossa descrição, que é a descrição do acampamento ali mesmo.
Então, isso só
E vai ser um pouco decepcionante porque não temos uma grande assinatura agora, então, podemos querer fazer é
ir e ver o banco de dados com alguns Lorem Ipsum e eu só vou roubar isso
e eu vou copiar e volte para o arquivo de semente.
E, em seguida, em vez do arquivo da nossa semente e vou mudar a descrição em todos os três.
Basta fazer o mesmo em vez de blá blá blá.
Agora temos um pouco mais de Lorem Ipsum e economizaremos.
E então, para fazer isso entrar em vigor, temos que reiniciar o servidor porque isso receberá o banco de dados.
E então vamos voltar e voltar para a página dos acampamentos.
Temos três campgrounds.
No entanto, eles agora têm uma descrição mais legítima algum texto.
Certo, ótimo.
Então vamos dar uma olhada agora no que precisamos trabalhar.
Há algumas coisas menores.
Nós deixaremos as estrelas na contagem de críticas por enquanto e passaremos para os comentários.
Voltemos ao show que E. J. que ele esteja na mesma coluna aqui.
Sim arquivo podemos fechar sem sementes por agora o que vamos fazer é adicionar um bem dar classe bem dentro da coluna nove
médio porque queremos
Tomando a mesma quantidade de espaço.
Então, para fazer isso, vá aqui mesmo após a miniatura, então esta e legenda aqui é a miniatura.
Então é certo que eles vão adicionar a classe div.
Igual bem.
E, em seguida, dentro de que vai abri-lo e é aí que ele irá fazer o loop para adicionar
os comentários.
Mas vou começar por adicionar no botão a alavanca do seu botão e nós vamos simplesmente fazer
uma div simples e esta div terá uma classe de texto a direita.
E, em seguida, dentro de lá, vamos adicionar nossa marca de âncora aqui que já temos que criar
um novo comentário.
Basta colocar isso aqui.
É uma longa, mas lembre-se de que é uma marca de âncoras que tem uma classe de botão botão que
o torna verde.
Mas a referência é uma parte muito longa.
Está indo para acampamentos cortar os comentários de barramento de ID do acampamento cortar novos, mas salvar e atualizar.
ESTÁ BEM.
Então, você pode ver que agora temos o bem que nos dá o bom fundo cinza na fronteira.
É aqui que vamos adicionar os comentários.
Então, precisamos fazer o próximo passo para fazer os comentários e já fazemos isso.
Mas em vez de apenas fazer um parágrafo para cada um, realmente vamos fazer uma linha separada.
Então, eu vou mostrar o que isso parece quando ele copiar isso ou cortá-lo.
E podemos excluir este parágrafo extra e vamos colocar isso logo depois do texto.
E vamos fazer isso de forma adequada.
Então, temos o nosso loop e, em seguida, vamos fazer um loop para cada comentário
e vamos adicionar dentro daqui uma linha de classe div para cada uma classe div divisa uma linha.
E, em seguida, dentro de cada Nós vamos adicionar outra classe div igual a coluna 12 e salvar isso.
E se olharmos o que temos aqui, acabamos com o nome de usuário e o nome de usuário do slash que
chamamos de autor.
E então, à direita, há desta vez 10 dias atrás, que será apenas um código rígido, por enquanto, o
próximo comentário vem depois.
Então, para que isso funcione, precisamos fazer algum texto e, em seguida, fazer algo no lado direito da
direita e, então, precisamos adicionar um parágrafo para o próprio comentário propriamente dito.
Então vamos tentar isso e entrar aqui.
Nós temos nosso meio de coluna 12.
E dentro disso, vamos começar com apenas adicionar o autor do comentário.
Então, vamos apenas acrescentar isso.
E, em seguida, abaixo, vamos adicionar um período e isso será à direita.
Então, vamos adicionar o clássico à direita.
E então aqui vamos adicionar apenas dez dias por agora.
Bem, apenas um código rígido que em.
E então, a última coisa que eles querem fazer é mostrar o texto do comentário.
Então eu vou pegar este texto de comentário aqui e vamos colocar isso dentro de seu próprio
parágrafo, que já temos aqui, exceto que queremos movê-lo dentro da coluna aqui, assim como nós temos o autor e os
10 dias vão .
Queremos que estejam juntos na mesma coluna e agora, mas salve e volte.
Veja o que recebemos.
Tudo bem.
Então, temos um comentário.
É isso aí.
Mas você pode ver que temos um botão adicionar um novo comentário.
Certifique-se de que funciona.
E os comentários são exibidos aqui.
Estamos perdendo a classificação.
Então parece um pouco estranho, mas está bem por enquanto.
O que podemos querer fazer é adicionar um ou dois comentários adicionais.
Então volte aqui e vamos usar mais um lorem ipsum.
Então, vou copiar partes deste e adicioná-las como comentários.
Basta usar um pouco disso e o autor aqui estará acampando.
Vovô.
Enviar.
ESTÁ BEM.
Então, agora estamos recebendo nossos comentários aqui bem.
Isso está funcionando.
Tenho algum espaço que queremos adicionar.
Se você der uma olhada no que temos aqui há uma linha muito fraca, eu não sei se
você aparecerá na tela.
Há uma linha realmente fraca que adiciona algum espaçamento e tudo o que precisamos fazer para fazer isso funcionar
é adicionar um h r.
Então, logo após este texto direito que é o botão, apenas adicionamos uma regra horizontal e, se atualizarmos, agora
temos algum espaço lá.
Você tem um botão e todos os nossos comentários estão sendo exibidos no curto prazo.
Por que não criamos o nome do usuário.
Então vamos voltar aqui e já tínhamos isso e eles se livraram disso, mas vamos voltar e adicionar
novamente uma marca forte com o autor e eles vão tornar isso um pouco mais fácil de ver.
Aqui vamos nós.
Ainda não ótimo, mas bom o suficiente por enquanto.
Então, na verdade, é tudo o bootstrap que precisamos fazer por enquanto.
Mas ainda não terminamos.
Se voltar e dar uma olhada na versão final do ish, verá que a imagem ocupa toda a
miniatura e não está fazendo isso.
Mesmo que eu fizesse questão de usar exatamente a mesma imagem, não é sobre a própria imagem real.
O problema se resume ao nosso estilo.
E o que queremos fazer é entrar e dizer a esta imagem que ocupe 100% com o contêiner.
Então eu vou mostrar que podemos apenas inspecioná-lo e este é um ótimo uso para o inspetor aqui.
Podemos selecioná-lo aqui e depois por aqui, podemos adicionar um estilo com 100 por cento.
E nós vamos lá.
Então, essa é uma coisa que queremos fazer.
Ainda há uma diferença muito pequena, que há um pouco de espaço lá que
não temos nessa.
E para se livrar de tudo o que queremos fazer é entrar na miniatura
real e selecionar a miniatura que está aqui e vamos dar esse preenchimento zero.
E agora, se olharmos, parece que queremos que olhe ou que pareça ser assim quando
olhar.
Nós também vamos adicionar alguns espaçamentos.
Você pode ver que há algum espaçamento feito aqui e podemos consertar isso agora.
Além disso, inspecionando-o e lembre-se de que não estamos realmente corrigindo isso, estamos testando-o no navegador
e depois voltaremos a fazer essas mudanças em nossa própria folha de estilos.
Então, o que queremos fazer é adicionar um pouco de preenchimento no potro de legenda, que é esta caixa aqui.
E o Padam que queremos é na parte esquerda direita da parte superior e inferior e será nove ou 10 pixels.
Então, vamos fazer o preenchimento nove x.
E nós vamos lá.
Acabamos com um bom espaçamento lá.
Não é o que queremos fazer é pegar esse estilo e realmente adicionado em uma folha de estilo que
vamos escrever