1
00:00:00,240 --> 00:00:04,170
Bem-vindo nesta lição vamos continuar trabalhando em seu acampamento.

2
00:00:04,170 --> 00:00:06,070
Já fizemos a configuração inicial.

3
00:00:06,180 --> 00:00:11,430
Nós fizemos algum layout básico adicionado o cabeçalho e rodapé Parshall's, adicionamos bootstrap e

4
00:00:11,430 --> 00:00:13,990
adicionamos a funcionalidade de criar novos campgrounds.

5
00:00:14,010 --> 00:00:17,550
Agora vamos entrar em estilo na página de campground usando o bootstrap.

6
00:00:17,550 --> 00:00:18,600
Então vamos começar.

7
00:00:18,600 --> 00:00:21,230
A primeira coisa que farei é garantir que meus servidores estejam funcionando.

8
00:00:22,000 --> 00:00:25,260
E apenas dê uma olhada no que temos agora.

9
00:00:25,350 --> 00:00:26,740
Definitivamente um pouco decepcionante.

10
00:00:26,850 --> 00:00:28,110
Então eu tenho dois objetivos principais.

11
00:00:28,170 --> 00:00:34,150
O primeiro é que queremos um cabeçalho melhor no título aqui, então isso deve parecer melhor.

12
00:00:34,170 --> 00:00:40,050
Nós vamos usar o que chamamos de jumbotron no Bootstrap e, em seguida, também os acampamentos, a

13
00:00:40,050 --> 00:00:43,000
lista de campgrounds não deve ser exibida verticalmente assim.

14
00:00:43,020 --> 00:00:48,200
Em vez disso, queremos que uma grade de imagens menores atravesse e essa grade deve ser sensível.

15
00:00:48,480 --> 00:00:52,850
Vamos começar com o primeiro que está obtendo este texto do título para parecer um pouco mais agradável.

16
00:00:53,100 --> 00:00:58,440
Então eu vou abrir acampamentos que sim vou trabalhar aqui.

17
00:00:58,590 --> 00:01:04,010
Então, vou redimensionar isso um pouco porque estaremos escrevendo um pouco de correio HD e

18
00:01:04,020 --> 00:01:06,390
não vamos fazer nada com um terminal.

19
00:01:06,440 --> 00:01:12,510
Então, para trabalhar no cabeçalho, vamos usar uma tag de cabeçalho que não vimos antes.

20
00:01:12,510 --> 00:01:15,740
Funcionalmente, funciona exatamente da mesma maneira como algo como uma div.

21
00:01:15,780 --> 00:01:20,080
A única diferença é que isso tem um pouco de significado semântico para ele.

22
00:01:20,400 --> 00:01:25,850
Usando o cabeçalho em vez de apenas uma div arbitrária, mas na verdade não importa, é apenas um recipiente.

23
00:01:26,010 --> 00:01:35,340
E nós vamos dar uma aula de jumbotron e, em seguida, dentro disso, vamos adicionar bem, apenas copie

24
00:01:35,340 --> 00:01:42,540
este H-1 na verdade e simplesmente deixá-lo e salvar Frigo e atualizar nossa página.

25
00:01:42,570 --> 00:01:44,890
Agora temos o que chamamos de Jumbotron.

26
00:01:45,130 --> 00:01:46,280
Ainda não é ótimo.

27
00:01:46,290 --> 00:01:50,720
A próxima coisa que devemos fazer é fazer tudo dentro de um recipiente de bootstrap.

28
00:01:51,030 --> 00:01:57,690
Então, tudo o que vemos aqui tudo isso, vou recuar e vou adicionar uma div com

29
00:01:58,110 --> 00:02:01,260
a classe igual a um contêiner assim.

30
00:02:01,460 --> 00:02:07,670
E então vamos colar tudo dentro disso e isso irá adicionar algumas especificações para nós nos lados.

31
00:02:07,830 --> 00:02:08,710
Atualizar.

32
00:02:08,880 --> 00:02:13,800
Você pode ver que não temos mais coisas no lado esquerdo aqui.

33
00:02:13,830 --> 00:02:19,200
Temos algum espaço e nosso JumboTron está um pouco mais próximo e, eventualmente, aparecerá

34
00:02:19,200 --> 00:02:20,330
uma barra naff.

35
00:02:20,520 --> 00:02:22,890
Então, isso ficará um pouco mais agradável também.

36
00:02:22,890 --> 00:02:25,530
Por enquanto, apenas temos o Jumbotron.

37
00:02:25,590 --> 00:02:27,570
Agora vamos mudar o próprio texto.

38
00:02:27,600 --> 00:02:34,530
Então, ao invés de esta é a página dos acampamentos, vamos colocar uma mensagem bem-vinda. Bem-vindo ao acampamento.

39
00:02:34,710 --> 00:02:40,140
livre para colocar o conteúdo que você quiser e eu

40
00:02:40,140 --> 00:02:55,470
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.

41
00:02:55,800 --> 00:02:56,550
Sinta-se

42
00:02:56,670 --> 00:02:58,940
Algo assim não importa.

43
00:02:58,950 --> 00:03:00,850
Vamos economizar a atualização.

44
00:03:01,170 --> 00:03:06,650
OK, então agora temos uma pequena tag e a última coisa que queremos fazer é cuidar deste link.

45
00:03:06,690 --> 00:03:08,280
O link adicionar novo campground.

46
00:03:08,580 --> 00:03:12,640
Então eu vou copiar isso e também colocá-lo dentro do Jumbotron.

47
00:03:12,650 --> 00:03:15,070
No entanto, eu vou fazer um botão.

48
00:03:15,150 --> 00:03:23,190
bootstrap para fazer isso ou adicionar primeiro um parágrafo e, em seguida, colocar a marca de âncora dentro disso.

49
00:03:23,190 --> 00:03:24,780
Um dos botões de

50
00:03:24,780 --> 00:03:26,680
E eu estou fazendo isso apenas por espaçamento.

51
00:03:26,730 --> 00:03:32,820
Você quer que este esteja na sua própria linha e então eu vou

52
00:03:32,850 --> 00:03:43,320
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á.

53
00:03:43,330 --> 00:03:45,420
Agora, tivemos um novo botão de campground.

54
00:03:45,510 --> 00:03:49,930
Nós clicamos nele e leva-nos ao formulário que está completamente desenhado.

55
00:03:50,220 --> 00:03:54,050
Uma coisa menor é que se eu redimensionar esta janela aqui.

56
00:03:55,320 --> 00:04:01,740
Observe como nosso texto vai direto contra a borda do Jumbotron, o que não é excelente.

57
00:04:01,860 --> 00:04:07,380
Nós temos algum espaçamento aqui e eles querem manter esse espaçamento o que

58
00:04:07,380 --> 00:04:19,680
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

59
00:04:19,680 --> 00:04:24,330
final na div de fechamento e, em seguida, apenas recuar tudo.

60
00:04:24,420 --> 00:04:26,040
E agora, se atualizarmos.

61
00:04:26,210 --> 00:04:30,860
Ela parecia igual, mas quando diminuímos, agora temos um espaço lá.

62
00:04:31,230 --> 00:04:33,790
OK, então essa é a parte do cabeçalho.

63
00:04:33,840 --> 00:04:37,680
Agora queremos trabalhar naquela grade de imagens e eu vou estar na frente com você.

64
00:04:37,680 --> 00:04:39,770
É definitivamente um pouco mais de trabalho.

65
00:04:40,020 --> 00:04:49,200
OK, vamos começar naquela grade e vamos começar criando uma linha, de modo que a classe div igual a linha exatamente assim

66
00:04:49,800 --> 00:04:53,520
e vou começar com apenas uma pequena mensagem aqui.

67
00:04:53,580 --> 00:05:03,210
Então, vamos adicionar um iguais de classe div e eu vou fazer isso apenas ocupando toda a largura e nós vamos

68
00:05:03,210 --> 00:05:11,040
ter uma mensagem aqui e H-3 que diz que nossos sites mais populares são campgrounds que você

69
00:05:14,270 --> 00:05:15,790
conhece não parecerá muito.

70
00:05:15,790 --> 00:05:24,160
Por agora, vamos voltar e vamos começar adicionando na linha de classe div, que precisamos de tudo na nossa

71
00:05:24,160 --> 00:05:25,470
escola primária seguidas.

72
00:05:25,560 --> 00:05:28,820
É uma classe div igual a linha exatamente assim.

73
00:05:28,970 --> 00:05:34,780
E agora temos que falar sobre isso para cada loop porque o que realmente queremos fazer é em vez

74
00:05:34,780 --> 00:05:41,380
de nossa grade dentro da linha para cada acampamento, queremos fazer um div que tenha uma classe de coluna e uma coluna

75
00:05:41,800 --> 00:05:43,380
usando a grade de bootstrap.

76
00:05:43,420 --> 00:05:50,110
Então vou fazer isso agora, onde eu vou colocar todo esse código para cada loop que

77
00:05:52,390 --> 00:05:53,580
vai sangrando assim.

78
00:05:53,830 --> 00:05:57,180
E então precisamos da nossa tag div de fechamento aqui.

79
00:05:57,490 --> 00:06:01,500
Então, isso é para a linha clássica e isso é para o contêiner.

80
00:06:02,020 --> 00:06:02,470
ESTÁ BEM.

81
00:06:02,730 --> 00:06:09,370
Então, a linha da classe ativa e, ao invés de apenas deixar esse conteúdo como ele div e

82
00:06:09,870 --> 00:06:17,770
aqui com um H para uma imagem, ainda teremos uma imagem, mas vamos mudar essa div para que ela tenha uma classe

83
00:06:18,310 --> 00:06:26,740
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

84
00:06:26,740 --> 00:06:28,270
tamanho da tela é maior.

85
00:06:28,300 --> 00:06:34,090
E então, quando diminuímos, isso diminuirá para apenas duas imagens por linha e então diminuirá ainda

86
00:06:34,090 --> 00:06:36,400
mais para apenas uma imagem por linha.

87
00:06:36,610 --> 00:06:44,080
miniatura que é uma classe de bootstrap que nos ajudará a fazer um pequeno cartão, ele fará um pequeno

88
00:06:44,110 --> 00:06:49,270
item de grade dentro dessa miniatura irá adicionar o imagem para começar assim.

89
00:06:49,270 --> 00:06:56,560
Então, dentro disso, nós realmente vamos adicionar em outra div e esta div vai ter uma classe de

90
00:06:56,680 --> 00:07:02,210
Nós temos serviços de imagem iguais ao acampamento que você RL E nós vamos deixar isso com isso.

91
00:07:02,230 --> 00:07:08,580
E vamos nos livrar disso por enquanto e salvar e ver o que recebemos se estivéssemos frescos.

92
00:07:09,280 --> 00:07:09,820
Tudo bem.

93
00:07:09,910 --> 00:07:11,850
Então, temos uma grade de imagens agora.

94
00:07:11,890 --> 00:07:14,860
Há apenas três, mas estamos recebendo essa grade.

95
00:07:15,220 --> 00:07:18,580
E eu vou mostrar o que eu quis dizer, tornando-o receptivo.

96
00:07:18,580 --> 00:07:25,270
Então, como um psiquiatra, observe como ele muda para dois quadrados ou dois itens na tela.

97
00:07:25,280 --> 00:07:26,910
Lembre-se que há 12 unidades.

98
00:07:27,040 --> 00:07:35,980
Então, o que nós tivemos primeiro, estamos dividindo-o em quatro pedaços, onde cada um tirou três unidades e depois,

99
00:07:35,980 --> 00:07:43,390
quando a grade se reduz, aqui cada uma delas ocupa seis unidades e, mesmo assim, ela

100
00:07:43,390 --> 00:07:44,190
é automática.

101
00:07:44,350 --> 00:07:49,130
E não precisamos escrever isso porque o padrão extra pequeno é usar 12 unidades.

102
00:07:49,180 --> 00:07:52,050
Portanto, não precisamos especificar isso.

103
00:07:52,090 --> 00:07:59,950
Agora, obtenhamos o título de volta neste nome do acampamento e, ao invés de apenas uma idade para

104
00:08:00,460 --> 00:08:07,550
que alguém faça uma classe de bootstrap, a classe de div aborda é igual à legenda assim.

105
00:08:07,780 --> 00:08:13,080
E então dentro, irá colocar um H para o nome do acampamento.

106
00:08:14,070 --> 00:08:18,670
OK vamos salvar, vamos ver o que parece.

107
00:08:18,670 --> 00:08:19,270
Aqui vamos nós.

108
00:08:19,300 --> 00:08:21,030
Nós recebemos essas pequenas cartas agradáveis.

109
00:08:21,040 --> 00:08:23,700
Esta é a classe de miniaturas que faz isso para nós.

110
00:08:23,840 --> 00:08:25,030
Nós temos nossas imagens.

111
00:08:25,210 --> 00:08:30,480
E vamos ver o que parece se tivermos um monte de imagens indo em um monte de itens.

112
00:08:30,760 --> 00:08:34,160
Então você não precisa fazer isso, mas vou colar isso aqui.

113
00:08:34,600 --> 00:08:36,860
Apenas nos dê mais alguns dados.

114
00:08:36,880 --> 00:08:38,800
Serão dados duplicados, mas tudo bem.

115
00:08:38,940 --> 00:08:46,250
E então precisamos nos certificar de que adicionamos as vírgulas corretas e, portanto, vírgula lá e para vir lá.

116
00:08:46,300 --> 00:08:49,840
Agora, se atualizarmos Oh, precisamos reiniciar o servidor.

117
00:08:50,170 --> 00:08:52,060
E cada vez que estamos com o aplicativo.

118
00:08:52,120 --> 00:08:53,330
Sim.

119
00:08:53,590 --> 00:08:58,070
E agora, se atualizarmos, ele verá que temos um pequeno problema.

120
00:08:58,120 --> 00:09:00,040
Nossa grade está um pouco desarrumada.

121
00:09:00,170 --> 00:09:03,810
E o que está acontecendo é que temos imagens que são de diferentes alturas.

122
00:09:04,090 --> 00:09:07,940
Então este Salmon Creek é diferente do que estes.

123
00:09:08,410 --> 00:09:10,710
Mesmo que a largura seja a mesma neste caso.

124
00:09:10,930 --> 00:09:16,150
E isso está descartando a grade e há uma maneira fácil de corrigi-lo, embora seja um pouco vacilante.

125
00:09:16,270 --> 00:09:19,130
E eu vou mostrar-lhe como fazemos isso em vez de nosso acampamento.

126
00:09:19,270 --> 00:09:19,960
Sim.

127
00:09:20,320 --> 00:09:26,860
No dia da linha da classe, eu vou adicionar um atributo de estilo e vou fazer isso temporariamente.

128
00:09:27,010 --> 00:09:31,600
uma folha de estilos externa, mas eu vou apenas fazer isso na fila para tornar mais fácil para você ver.

129
00:09:31,600 --> 00:09:32,530
Vamos mudar isso para

130
00:09:32,530 --> 00:09:37,360
Então, criamos estilo para exibir flex e flex wrap para ser embrulhado.

131
00:09:37,480 --> 00:09:39,900
E essas são duas propriedades que vão ajudar a nossa grade.

132
00:09:39,910 --> 00:09:44,810
Então, se eu estivesse fresco Agora, acabamos com a grade onde é mais flexível.

133
00:09:44,860 --> 00:09:50,980
Não importa que tenhamos algumas alturas diferentes, porque agora a grade se adapta Então, há mais espaço

134
00:09:50,980 --> 00:09:53,400
entre estes dois e lá está aqui.

135
00:09:53,470 --> 00:09:59,500
Basicamente, descobre a quantidade mínima de espaço necessário onde podemos ter tudo em sua

136
00:09:59,500 --> 00:10:02,750
própria linha, onde podemos ter tudo alinhados perfeitamente.

137
00:10:02,800 --> 00:10:09,460
E há uma outra mudança que podemos fazer, que é voltar e adicionar no Centro de texto, que é um bootstrap

138
00:10:09,460 --> 00:10:13,370
para nós, que fará com que nosso texto seja centrado ali mesmo.

139
00:10:13,540 --> 00:10:15,410
E acho que parece um pouco melhor.

140
00:10:15,490 --> 00:10:20,500
Também é uma questão de preferência pessoal e agora terminamos com a página do acampamento por enquanto.

141
00:10:20,620 --> 00:10:25,630
Espero que isso mostre a você como o bootstrap pode realmente nos ajudar a tornar as coisas bastante fáceis, especialmente

142
00:10:25,630 --> 00:10:27,550
quando comparado a isso desde o início.

143
00:10:27,550 --> 00:10:31,900
E deixe-me mostrar-lhe a nossa boa grade responsiva que temos.

144
00:10:31,900 --> 00:10:33,260
Então, isso é no celular.

145
00:10:33,310 --> 00:10:38,890
Nós conseguimos esse layout agradável todo o caminho até quatro imagens que atravessam.

146
00:10:39,160 --> 00:10:41,140
OK, então estou muito feliz com a aparência desta.

147
00:10:41,140 --> 00:10:42,020
Eu vou ver você no próximo vídeo