Bem-vindo nesta lição vamos continuar trabalhando em seu acampamento.
Já fizemos a configuração inicial.
Nós fizemos algum layout básico adicionado o cabeçalho e rodapé Parshall's, adicionamos bootstrap e
adicionamos a funcionalidade de criar novos campgrounds.
Agora vamos entrar em estilo na página de campground usando o bootstrap.
Então vamos começar.
A primeira coisa que farei é garantir que meus servidores estejam funcionando.
E apenas dê uma olhada no que temos agora.
Definitivamente um pouco decepcionante.
Então eu tenho dois objetivos principais.
O primeiro é que queremos um cabeçalho melhor no título aqui, então isso deve parecer melhor.
Nós vamos usar o que chamamos de jumbotron no Bootstrap e, em seguida, também os acampamentos, a
lista de campgrounds não deve ser exibida verticalmente assim.
Em vez disso, queremos que uma grade de imagens menores atravesse e essa grade deve ser sensível.
Vamos começar com o primeiro que está obtendo este texto do título para parecer um pouco mais agradável.
Então eu vou abrir acampamentos que sim vou trabalhar aqui.
Então, vou redimensionar isso um pouco porque estaremos escrevendo um pouco de correio HD e
não vamos fazer nada com um terminal.
Então, para trabalhar no cabeçalho, vamos usar uma tag de cabeçalho que não vimos antes.
Funcionalmente, funciona exatamente da mesma maneira como algo como uma div.
A única diferença é que isso tem um pouco de significado semântico para ele.
Usando o cabeçalho em vez de apenas uma div arbitrária, mas na verdade não importa, é apenas um recipiente.
E nós vamos dar uma aula de jumbotron e, em seguida, dentro disso, vamos adicionar bem, apenas copie
este H-1 na verdade e simplesmente deixá-lo e salvar Frigo e atualizar nossa página.
Agora temos o que chamamos de Jumbotron.
Ainda não é ótimo.
A próxima coisa que devemos fazer é fazer tudo dentro de um recipiente de bootstrap.
Então, tudo o que vemos aqui tudo isso, vou recuar e vou adicionar uma div com
a classe igual a um contêiner assim.
E então vamos colar tudo dentro disso e isso irá adicionar algumas especificações para nós nos lados.
Atualizar.
Você pode ver que não temos mais coisas no lado esquerdo aqui.
Temos algum espaço e nosso JumboTron está um pouco mais próximo e, eventualmente, aparecerá
uma barra naff.
Então, isso ficará um pouco mais agradável também.
Por enquanto, apenas temos o Jumbotron.
Agora vamos mudar o próprio texto.
Então, ao invés de esta é a página dos acampamentos, vamos colocar uma mensagem bem-vinda. Bem-vindo ao acampamento.
livre para colocar o conteúdo que você quiser e eu
também adicionarei um parágrafo no parágrafo. Vou adicionar apenas um pequeno tipo de tagline e eu vou apenas dizer que veja nossa mão e escolha campgrounds de todo o mundo.
Sinta-se
Algo assim não importa.
Vamos economizar a atualização.
OK, então agora temos uma pequena tag e a última coisa que queremos fazer é cuidar deste link.
O link adicionar novo campground.
Então eu vou copiar isso e também colocá-lo dentro do Jumbotron.
No entanto, eu vou fazer um botão.
bootstrap para fazer isso ou adicionar primeiro um parágrafo e, em seguida, colocar a marca de âncora dentro disso.
Um dos botões de
E eu estou fazendo isso apenas por espaçamento.
Você quer que este esteja na sua própria linha e então eu vou
dar ao botão classe múltiplas classes de PTEN ETN primário para a cor e entre o traço grande assim e salvará.
Agora, tivemos um novo botão de campground.
Nós clicamos nele e leva-nos ao formulário que está completamente desenhado.
Uma coisa menor é que se eu redimensionar esta janela aqui.
Observe como nosso texto vai direto contra a borda do Jumbotron, o que não é excelente.
Nós temos algum espaçamento aqui e eles querem manter esse espaçamento o que
precisamos fazer é apenas adicionar outro recipiente dentro do Jumbotron, de modo que a classe div é igual a um recipiente e depois aqui dentro do Jumbotron antes do
final na div de fechamento e, em seguida, apenas recuar tudo.
E agora, se atualizarmos.
Ela parecia igual, mas quando diminuímos, agora temos um espaço lá.
OK, então essa é a parte do cabeçalho.
Agora queremos trabalhar naquela grade de imagens e eu vou estar na frente com você.
É definitivamente um pouco mais de trabalho.
OK, vamos começar naquela grade e vamos começar criando uma linha, de modo que a classe div igual a linha exatamente assim
e vou começar com apenas uma pequena mensagem aqui.
Então, vamos adicionar um iguais de classe div e eu vou fazer isso apenas ocupando toda a largura e nós vamos
ter uma mensagem aqui e H-3 que diz que nossos sites mais populares são campgrounds que você
conhece não parecerá muito.
Por agora, vamos voltar e vamos começar adicionando na linha de classe div, que precisamos de tudo na nossa
escola primária seguidas.
É uma classe div igual a linha exatamente assim.
E agora temos que falar sobre isso para cada loop porque o que realmente queremos fazer é em vez
de nossa grade dentro da linha para cada acampamento, queremos fazer um div que tenha uma classe de coluna e uma coluna
usando a grade de bootstrap.
Então vou fazer isso agora, onde eu vou colocar todo esse código para cada loop que
vai sangrando assim.
E então precisamos da nossa tag div de fechamento aqui.
Então, isso é para a linha clássica e isso é para o contêiner.
ESTÁ BEM.
Então, a linha da classe ativa e, ao invés de apenas deixar esse conteúdo como ele div e
aqui com um H para uma imagem, ainda teremos uma imagem, mas vamos mudar essa div para que ela tenha uma classe
de coluna média três na coluna pequena 6 e isso é apenas para torná-lo receptivo para que possamos obter imagens maiores quando o
tamanho da tela é maior.
E então, quando diminuímos, isso diminuirá para apenas duas imagens por linha e então diminuirá ainda
mais para apenas uma imagem por linha.
miniatura que é uma classe de bootstrap que nos ajudará a fazer um pequeno cartão, ele fará um pequeno
item de grade dentro dessa miniatura irá adicionar o imagem para começar assim.
Então, dentro disso, nós realmente vamos adicionar em outra div e esta div vai ter uma classe de
Nós temos serviços de imagem iguais ao acampamento que você RL E nós vamos deixar isso com isso.
E vamos nos livrar disso por enquanto e salvar e ver o que recebemos se estivéssemos frescos.
Tudo bem.
Então, temos uma grade de imagens agora.
Há apenas três, mas estamos recebendo essa grade.
E eu vou mostrar o que eu quis dizer, tornando-o receptivo.
Então, como um psiquiatra, observe como ele muda para dois quadrados ou dois itens na tela.
Lembre-se que há 12 unidades.
Então, o que nós tivemos primeiro, estamos dividindo-o em quatro pedaços, onde cada um tirou três unidades e depois,
quando a grade se reduz, aqui cada uma delas ocupa seis unidades e, mesmo assim, ela
é automática.
E não precisamos escrever isso porque o padrão extra pequeno é usar 12 unidades.
Portanto, não precisamos especificar isso.
Agora, obtenhamos o título de volta neste nome do acampamento e, ao invés de apenas uma idade para
que alguém faça uma classe de bootstrap, a classe de div aborda é igual à legenda assim.
E então dentro, irá colocar um H para o nome do acampamento.
OK vamos salvar, vamos ver o que parece.
Aqui vamos nós.
Nós recebemos essas pequenas cartas agradáveis.
Esta é a classe de miniaturas que faz isso para nós.
Nós temos nossas imagens.
E vamos ver o que parece se tivermos um monte de imagens indo em um monte de itens.
Então você não precisa fazer isso, mas vou colar isso aqui.
Apenas nos dê mais alguns dados.
Serão dados duplicados, mas tudo bem.
E então precisamos nos certificar de que adicionamos as vírgulas corretas e, portanto, vírgula lá e para vir lá.
Agora, se atualizarmos Oh, precisamos reiniciar o servidor.
E cada vez que estamos com o aplicativo.
Sim.
E agora, se atualizarmos, ele verá que temos um pequeno problema.
Nossa grade está um pouco desarrumada.
E o que está acontecendo é que temos imagens que são de diferentes alturas.
Então este Salmon Creek é diferente do que estes.
Mesmo que a largura seja a mesma neste caso.
E isso está descartando a grade e há uma maneira fácil de corrigi-lo, embora seja um pouco vacilante.
E eu vou mostrar-lhe como fazemos isso em vez de nosso acampamento.
Sim.
No dia da linha da classe, eu vou adicionar um atributo de estilo e vou fazer isso temporariamente.
uma folha de estilos externa, mas eu vou apenas fazer isso na fila para tornar mais fácil para você ver.
Vamos mudar isso para
Então, criamos estilo para exibir flex e flex wrap para ser embrulhado.
E essas são duas propriedades que vão ajudar a nossa grade.
Então, se eu estivesse fresco Agora, acabamos com a grade onde é mais flexível.
Não importa que tenhamos algumas alturas diferentes, porque agora a grade se adapta Então, há mais espaço
entre estes dois e lá está aqui.
Basicamente, descobre a quantidade mínima de espaço necessário onde podemos ter tudo em sua
própria linha, onde podemos ter tudo alinhados perfeitamente.
E há uma outra mudança que podemos fazer, que é voltar e adicionar no Centro de texto, que é um bootstrap
para nós, que fará com que nosso texto seja centrado ali mesmo.
E acho que parece um pouco melhor.
Também é uma questão de preferência pessoal e agora terminamos com a página do acampamento por enquanto.
Espero que isso mostre a você como o bootstrap pode realmente nos ajudar a tornar as coisas bastante fáceis, especialmente
quando comparado a isso desde o início.
E deixe-me mostrar-lhe a nossa boa grade responsiva que temos.
Então, isso é no celular.
Nós conseguimos esse layout agradável todo o caminho até quatro imagens que atravessam.
OK, então estou muito feliz com a aparência desta.
Eu vou ver você no próximo vídeo