1
00:00:00,310 --> 00:00:04,590
Bem-vindo, volte nesta lição, vamos nos concentrar no estilo da página do show.

2
00:00:04,620 --> 00:00:07,080
Então, agora, nossa página de exibição parece assim.

3
00:00:07,230 --> 00:00:10,710
Nós temos um pequeno bar naff aqui com os botões que não fazem nada.

4
00:00:10,710 --> 00:00:12,910
Temos um H-1 com o nome do acampamento.

5
00:00:13,190 --> 00:00:18,060
E temos uma imagem e uma descrição e temos um botão para adicionar um novo comentário e todos

6
00:00:18,060 --> 00:00:19,290
os comentários são exibidos.

7
00:00:19,410 --> 00:00:21,900
Cada um um pequeno parágrafo.

8
00:00:21,900 --> 00:00:25,230
Então, nosso objetivo aqui é fazer com que pareça um pouco mais assim.

9
00:00:25,230 --> 00:00:27,190
Então eu tenho uma barra lateral aqui.

10
00:00:27,270 --> 00:00:31,950
Ainda não vamos ter o mapa, mas vamos abrir espaço para o mapa e teremos

11
00:00:31,950 --> 00:00:34,250
o nosso conteúdo principal com a descrição.

12
00:00:34,380 --> 00:00:40,020
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

13
00:00:40,020 --> 00:00:41,350
que se parecem com isto.

14
00:00:41,430 --> 00:00:45,360
Seu próprio pequeno recipiente lá embaixo, eu vou ter um pequeno botão para alavancar alguns.

15
00:00:45,360 --> 00:00:47,240
Geralmente é um pouco mais desenhado.

16
00:00:47,310 --> 00:00:50,210
Podemos adicionar isso e aquilo diz quantos comentários foram deixados.

17
00:00:50,280 --> 00:00:51,540
Então, é por isso que estamos apontando.

18
00:00:51,720 --> 00:00:55,170
E para começar, vamos nos concentrar apenas na grade de inicialização.

19
00:00:55,350 --> 00:00:58,500
Lembre-se de que a grade de inicialização é de 12 unidades.

20
00:00:58,560 --> 00:01:03,540
Nós vamos designar três desses 12 para essa pequena barra lateral e então vamos

21
00:01:03,540 --> 00:01:05,500
adicionar nove para o conteúdo principal.

22
00:01:05,760 --> 00:01:10,200
Antes de começar a mudar qualquer coisa, quero salientar que estou trabalhando na v 5 agora.

23
00:01:10,680 --> 00:01:13,710
Então, se você quiser acompanhar todas essas mudanças, estará na V 5.

24
00:01:13,800 --> 00:01:17,280
E a razão pela qual eu estou fazendo isso é que teremos que criar uma folha de estilo personalizada.

25
00:01:17,340 --> 00:01:21,780
Vamos ter que servir o diretório público e algumas outras coisas que são mudanças substanciais.

26
00:01:22,020 --> 00:01:24,020
Então eu queria fazer uma versão separada.

27
00:01:24,270 --> 00:01:29,070
Mas antes de fazer isso, a primeira coisa que vamos fazer é adicionar um contêiner em torno de

28
00:01:29,070 --> 00:01:30,020
todo esse container bootstrap.

29
00:01:30,150 --> 00:01:38,850
Então mostre que E. J. vai adicionar uma div com a classe do recipiente assim, e

30
00:01:38,850 --> 00:01:40,290
vamos colocar tudo dentro disso.

31
00:01:40,290 --> 00:01:44,850
E vou começar por adicionar a barra lateral e nós vamos preenchê-lo com alguns dados falsos, como nós temos aqui.

32
00:01:45,660 --> 00:01:55,120
pro e nessa linha vamos ter outra div onde uma classe é coluna média três exatamente assim.

33
00:01:55,120 --> 00:02:00,920
Então DIVX e isso precisa ser de classe igual a

34
00:02:01,080 --> 00:02:06,790
E então dentro daqui vamos adicionar um parágrafo e vamos pegar esse texto que diz Joachim.

35
00:02:08,460 --> 00:02:15,960
Então, esse é um parágrafo onde a aula é liderada e, em seguida, só vamos colocá-lo no acampamento por agora,

36
00:02:15,960 --> 00:02:17,640
vamos mudar isso eventualmente.

37
00:02:17,640 --> 00:02:24,870
Mas sim, acampamento e, em seguida, para adicionar esses pequenos itens de lista, nós faremos um div com a classe

38
00:02:25,950 --> 00:02:34,670
é grupo de lista e depois aqui vamos adicionar um monte de aliados em cada aliado tem uma classe de item de grupo de lista.

39
00:02:35,610 --> 00:02:41,490
E dentro, vamos apenas adicionar alguns dados falsos e nós apenas chamaremos de informação 1 e

40
00:02:41,490 --> 00:02:44,530
depois vou duplicar essa informação para a informação 3.

41
00:02:44,610 --> 00:02:46,340
E então vamos ver o que parece por enquanto.

42
00:02:46,500 --> 00:02:52,480
Então, para atualizar a página, temos uma barra lateral aqui e vou selecionar um desses itens para começar.

43
00:02:52,830 --> 00:02:55,480
E tudo o que temos a fazer é adicionar um direito ativo ali.

44
00:02:55,650 --> 00:02:58,900
Se estamos frescos, agora vemos que um deles está ativo.

45
00:02:59,460 --> 00:03:03,900
E este é realmente apenas um espaço reservado para ter algo lá, então não temos muito

46
00:03:03,900 --> 00:03:07,680
espaço em branco, mas novamente vamos adicionar dados reais lá e um mapa eventualmente.

47
00:03:07,770 --> 00:03:13,710
E apenas para apontar para fora o mapa irá aqui mesmo aqui dentro deste terceiro terceiro, mas

48
00:03:13,710 --> 00:03:14,590
não apenas ainda.

49
00:03:14,940 --> 00:03:16,560
OK, então é uma barra lateral.

50
00:03:16,560 --> 00:03:19,050
Agora, vamos adicionar o conteúdo principal.

51
00:03:19,290 --> 00:03:28,670
Então, precisamos de outra coluna e esta é a coluna de classe no meio 9.

52
00:03:29,130 --> 00:03:36,120
E em vez de lá, precisamos ter o H-1, precisamos ter a imagem, mas antes de tudo, você

53
00:03:36,120 --> 00:03:41,820
notará que é realmente tudo em uma dessas miniaturas exatamente como temos na página inicial.

54
00:03:41,940 --> 00:03:44,150
Cada uma delas é uma miniatura.

55
00:03:44,190 --> 00:03:49,560
Vamos fazer o mesmo em toda a imagem no título e nos comentários e tudo isso.

56
00:03:50,220 --> 00:03:56,930
Então vamos adicionar uma div e essa div terá classe igual à miniatura.

57
00:03:58,110 --> 00:04:04,620
E então dentro de que vamos adicionar a imagem e ainda vou continuar a imagem que já escrevemos e

58
00:04:04,620 --> 00:04:06,140
simplesmente colocá-la bem lá.

59
00:04:06,180 --> 00:04:08,260
Então essa será a nossa imagem de acampamento.

60
00:04:08,490 --> 00:04:17,250
E então, também queremos adicionar uma aula para que o bootstrapped nos dê qual a imagem que a Dasch responde.

61
00:04:19,560 --> 00:04:20,420
Aqui vamos nós.

62
00:04:20,490 --> 00:04:23,270
Salve isso.

63
00:04:23,400 --> 00:04:28,470
E se olharmos o que temos agora e atualizamos, pelo menos temos a imagem e o

64
00:04:28,470 --> 00:04:29,570
conteúdo no lugar certo.

65
00:04:29,610 --> 00:04:33,280
Nós temos um problema em que isso não está acontecendo com aquilo que queremos.

66
00:04:33,320 --> 00:04:37,950
Eu quero que isso vá todo o caminho e nós teremos que lidar com isso com algum C Ss personalizado no final.

67
00:04:38,970 --> 00:04:44,040
E agora vamos voltar e adicionar isso aqui onde temos o nome do terreno do acampamento e, em seguida, o preço por

68
00:04:44,040 --> 00:04:46,360
noite, que na verdade não temos no banco de dados.

69
00:04:46,440 --> 00:04:47,830
Então, vamos apenas codificar.

70
00:04:48,150 --> 00:04:49,400
Então vamos fazer isso agora.

71
00:04:49,860 --> 00:04:57,250
E essa é outra div e esta tem uma classe de legenda cheia.

72
00:04:57,570 --> 00:05:01,190
E então dentro de lá vamos adicionar um H para.

73
00:05:01,620 --> 00:05:07,980
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

74
00:05:07,980 --> 00:05:09,540
que colocamos aqui será o preço.

75
00:05:09,750 --> 00:05:15,300
E vou começar com US $ 9 por noite novamente, isso virá do banco de dados eventualmente.

76
00:05:15,540 --> 00:05:22,080
Se estamos frescos Agora, recebemos $ 9 por noite no lado direito e então queremos obter o nome

77
00:05:22,260 --> 00:05:25,610
do acampamento que vou copiar aqui do lado esquerdo.

78
00:05:25,650 --> 00:05:30,870
Então, vamos colocá-lo bem abaixo e se não adicionarmos puxar direito, ele irá automaticamente para a esquerda,

79
00:05:31,080 --> 00:05:38,400
embora seja maior do que o que eu tinha em mente e eu vou transformar isso em um H menor e eu vou para

80
00:05:38,400 --> 00:05:44,490
adicionar uma marca de âncora dentro de lá, assim como colocar o nome do acampamento dentro da marca de âncora.

81
00:05:46,500 --> 00:05:50,370
E a idéia por trás disso é que eventualmente eu volto.

82
00:05:50,380 --> 00:05:55,740
Este deve ser um link para o acampamento real ou a página do Serviço de parques onde podemos ir para reservar algo.

83
00:05:56,130 --> 00:05:58,050
Por enquanto, é apenas o link para lugar nenhum.

84
00:05:58,410 --> 00:05:59,020
ESTÁ BEM.

85
00:05:59,160 --> 00:06:00,350
Então, temos isso.

86
00:06:00,360 --> 00:06:01,370
Temos um preço.

87
00:06:01,470 --> 00:06:03,660
Agora vamos adicionar a descrição de volta.

88
00:06:04,230 --> 00:06:10,950
será uma tag de parágrafo e, em seguida, adicionaremos a nossa descrição, que é a descrição do acampamento ali mesmo.

89
00:06:13,050 --> 00:06:14,060
Então, isso só

90
00:06:14,640 --> 00:06:20,190
E vai ser um pouco decepcionante porque não temos uma grande assinatura agora, então, podemos querer fazer é

91
00:06:20,790 --> 00:06:26,100
ir e ver o banco de dados com alguns Lorem Ipsum e eu só vou roubar isso

92
00:06:26,100 --> 00:06:29,750
e eu vou copiar e volte para o arquivo de semente.

93
00:06:29,940 --> 00:06:34,700
E, em seguida, em vez do arquivo da nossa semente e vou mudar a descrição em todos os três.

94
00:06:34,720 --> 00:06:37,990
Basta fazer o mesmo em vez de blá blá blá.

95
00:06:38,130 --> 00:06:42,380
Agora temos um pouco mais de Lorem Ipsum e economizaremos.

96
00:06:42,660 --> 00:06:48,070
E então, para fazer isso entrar em vigor, temos que reiniciar o servidor porque isso receberá o banco de dados.

97
00:06:48,720 --> 00:06:52,340
E então vamos voltar e voltar para a página dos acampamentos.

98
00:06:52,440 --> 00:06:54,090
Temos três campgrounds.

99
00:06:54,090 --> 00:06:58,330
No entanto, eles agora têm uma descrição mais legítima algum texto.

100
00:06:58,680 --> 00:07:00,050
Certo, ótimo.

101
00:07:00,060 --> 00:07:02,240
Então vamos dar uma olhada agora no que precisamos trabalhar.

102
00:07:02,250 --> 00:07:03,730
Há algumas coisas menores.

103
00:07:03,880 --> 00:07:08,580
Nós deixaremos as estrelas na contagem de críticas por enquanto e passaremos para os comentários.

104
00:07:08,970 --> 00:07:15,150
Voltemos ao show que E. J. que ele esteja na mesma coluna aqui.

105
00:07:15,150 --> 00:07:21,660
Sim arquivo podemos fechar sem sementes por agora o que vamos fazer é adicionar um bem dar classe bem dentro da coluna nove

106
00:07:21,900 --> 00:07:22,630
médio porque queremos

107
00:07:22,680 --> 00:07:24,350
Tomando a mesma quantidade de espaço.

108
00:07:24,750 --> 00:07:31,440
Então, para fazer isso, vá aqui mesmo após a miniatura, então esta e legenda aqui é a miniatura.

109
00:07:31,880 --> 00:07:34,770
Então é certo que eles vão adicionar a classe div.

110
00:07:34,870 --> 00:07:37,060
Igual bem.

111
00:07:37,410 --> 00:07:42,870
E, em seguida, dentro de que vai abri-lo e é aí que ele irá fazer o loop para adicionar

112
00:07:42,880 --> 00:07:43,560
os comentários.

113
00:07:43,680 --> 00:07:49,600
Mas vou começar por adicionar no botão a alavanca do seu botão e nós vamos simplesmente fazer

114
00:07:50,750 --> 00:07:55,150
uma div simples e esta div terá uma classe de texto a direita.

115
00:07:55,320 --> 00:08:01,760
E, em seguida, dentro de lá, vamos adicionar nossa marca de âncora aqui que já temos que criar

116
00:08:01,770 --> 00:08:02,940
um novo comentário.

117
00:08:03,300 --> 00:08:05,090
Basta colocar isso aqui.

118
00:08:05,820 --> 00:08:11,520
É uma longa, mas lembre-se de que é uma marca de âncoras que tem uma classe de botão botão que

119
00:08:11,520 --> 00:08:12,350
o torna verde.

120
00:08:12,490 --> 00:08:14,620
Mas a referência é uma parte muito longa.

121
00:08:14,790 --> 00:08:22,290
Está indo para acampamentos cortar os comentários de barramento de ID do acampamento cortar novos, mas salvar e atualizar.

122
00:08:22,680 --> 00:08:23,030
ESTÁ BEM.

123
00:08:23,040 --> 00:08:27,750
Então, você pode ver que agora temos o bem que nos dá o bom fundo cinza na fronteira.

124
00:08:27,750 --> 00:08:29,960
É aqui que vamos adicionar os comentários.

125
00:08:30,120 --> 00:08:34,170
Então, precisamos fazer o próximo passo para fazer os comentários e já fazemos isso.

126
00:08:34,170 --> 00:08:38,500
Mas em vez de apenas fazer um parágrafo para cada um, realmente vamos fazer uma linha separada.

127
00:08:38,760 --> 00:08:42,880
Então, eu vou mostrar o que isso parece quando ele copiar isso ou cortá-lo.

128
00:08:43,020 --> 00:08:49,140
E podemos excluir este parágrafo extra e vamos colocar isso logo depois do texto.

129
00:08:49,440 --> 00:08:51,850
E vamos fazer isso de forma adequada.

130
00:08:52,090 --> 00:08:57,280
Então, temos o nosso loop e, em seguida, vamos fazer um loop para cada comentário

131
00:08:57,270 --> 00:09:03,830
e vamos adicionar dentro daqui uma linha de classe div para cada uma classe div divisa uma linha.

132
00:09:04,750 --> 00:09:14,040
E, em seguida, dentro de cada Nós vamos adicionar outra classe div igual a coluna 12 e salvar isso.

133
00:09:14,110 --> 00:09:20,820
E se olharmos o que temos aqui, acabamos com o nome de usuário e o nome de usuário do slash que

134
00:09:20,830 --> 00:09:21,850
chamamos de autor.

135
00:09:22,090 --> 00:09:29,070
E então, à direita, há desta vez 10 dias atrás, que será apenas um código rígido, por enquanto, o

136
00:09:29,080 --> 00:09:30,760
próximo comentário vem depois.

137
00:09:30,750 --> 00:09:36,790
Então, para que isso funcione, precisamos fazer algum texto e, em seguida, fazer algo no lado direito da

138
00:09:37,120 --> 00:09:41,350
direita e, então, precisamos adicionar um parágrafo para o próprio comentário propriamente dito.

139
00:09:41,350 --> 00:09:43,890
Então vamos tentar isso e entrar aqui.

140
00:09:43,950 --> 00:09:45,900
Nós temos nosso meio de coluna 12.

141
00:09:46,290 --> 00:09:49,800
E dentro disso, vamos começar com apenas adicionar o autor do comentário.

142
00:09:50,130 --> 00:09:51,770
Então, vamos apenas acrescentar isso.

143
00:09:52,200 --> 00:09:57,520
E, em seguida, abaixo, vamos adicionar um período e isso será à direita.

144
00:09:57,580 --> 00:09:59,770
Então, vamos adicionar o clássico à direita.

145
00:09:59,970 --> 00:10:03,340
E então aqui vamos adicionar apenas dez dias por agora.

146
00:10:03,510 --> 00:10:05,300
Bem, apenas um código rígido que em.

147
00:10:05,400 --> 00:10:09,520
E então, a última coisa que eles querem fazer é mostrar o texto do comentário.

148
00:10:09,680 --> 00:10:15,000
Então eu vou pegar este texto de comentário aqui e vamos colocar isso dentro de seu próprio

149
00:10:15,000 --> 00:10:21,340
parágrafo, que já temos aqui, exceto que queremos movê-lo dentro da coluna aqui, assim como nós temos o autor e os

150
00:10:21,660 --> 00:10:22,770
10 dias vão .

151
00:10:22,770 --> 00:10:29,680
Queremos que estejam juntos na mesma coluna e agora, mas salve e volte.

152
00:10:29,700 --> 00:10:31,340
Veja o que recebemos.

153
00:10:31,360 --> 00:10:31,980
Tudo bem.

154
00:10:31,980 --> 00:10:33,050
Então, temos um comentário.

155
00:10:33,070 --> 00:10:33,930
É isso aí.

156
00:10:33,930 --> 00:10:36,580
Mas você pode ver que temos um botão adicionar um novo comentário.

157
00:10:36,580 --> 00:10:37,980
Certifique-se de que funciona.

158
00:10:38,770 --> 00:10:40,450
E os comentários são exibidos aqui.

159
00:10:40,470 --> 00:10:41,600
Estamos perdendo a classificação.

160
00:10:41,670 --> 00:10:44,460
Então parece um pouco estranho, mas está bem por enquanto.

161
00:10:44,700 --> 00:10:48,460
O que podemos querer fazer é adicionar um ou dois comentários adicionais.

162
00:10:48,450 --> 00:10:52,600
Então volte aqui e vamos usar mais um lorem ipsum.

163
00:10:52,600 --> 00:10:57,100
Então, vou copiar partes deste e adicioná-las como comentários.

164
00:10:57,270 --> 00:11:02,440
Basta usar um pouco disso e o autor aqui estará acampando.

165
00:11:02,520 --> 00:11:03,600
Vovô.

166
00:11:03,820 --> 00:11:05,000
Enviar.

167
00:11:05,720 --> 00:11:06,090
ESTÁ BEM.

168
00:11:06,100 --> 00:11:08,420
Então, agora estamos recebendo nossos comentários aqui bem.

169
00:11:08,430 --> 00:11:09,550
Isso está funcionando.

170
00:11:09,540 --> 00:11:11,610
Tenho algum espaço que queremos adicionar.

171
00:11:11,610 --> 00:11:16,560
Se você der uma olhada no que temos aqui há uma linha muito fraca, eu não sei se

172
00:11:16,570 --> 00:11:17,520
você aparecerá na tela.

173
00:11:17,520 --> 00:11:22,500
Há uma linha realmente fraca que adiciona algum espaçamento e tudo o que precisamos fazer para fazer isso funcionar

174
00:11:22,530 --> 00:11:23,890
é adicionar um h r.

175
00:11:24,370 --> 00:11:31,260
Então, logo após este texto direito que é o botão, apenas adicionamos uma regra horizontal e, se atualizarmos, agora

176
00:11:31,770 --> 00:11:33,210
temos algum espaço lá.

177
00:11:33,260 --> 00:11:38,680
Você tem um botão e todos os nossos comentários estão sendo exibidos no curto prazo.

178
00:11:38,730 --> 00:11:40,310
Por que não criamos o nome do usuário.

179
00:11:40,620 --> 00:11:46,770
Então vamos voltar aqui e já tínhamos isso e eles se livraram disso, mas vamos voltar e adicionar

180
00:11:46,890 --> 00:11:52,950
novamente uma marca forte com o autor e eles vão tornar isso um pouco mais fácil de ver.

181
00:11:52,950 --> 00:11:53,770
Aqui vamos nós.

182
00:11:53,830 --> 00:11:57,470
Ainda não ótimo, mas bom o suficiente por enquanto.

183
00:11:57,540 --> 00:12:00,060
Então, na verdade, é tudo o bootstrap que precisamos fazer por enquanto.

184
00:12:00,240 --> 00:12:01,390
Mas ainda não terminamos.

185
00:12:01,470 --> 00:12:07,680
Se voltar e dar uma olhada na versão final do ish, verá que a imagem ocupa toda a

186
00:12:07,680 --> 00:12:09,900
miniatura e não está fazendo isso.

187
00:12:10,050 --> 00:12:15,000
Mesmo que eu fizesse questão de usar exatamente a mesma imagem, não é sobre a própria imagem real.

188
00:12:15,120 --> 00:12:16,820
O problema se resume ao nosso estilo.

189
00:12:17,080 --> 00:12:22,890
E o que queremos fazer é entrar e dizer a esta imagem que ocupe 100% com o contêiner.

190
00:12:23,160 --> 00:12:29,150
Então eu vou mostrar que podemos apenas inspecioná-lo e este é um ótimo uso para o inspetor aqui.

191
00:12:29,350 --> 00:12:36,260
Podemos selecioná-lo aqui e depois por aqui, podemos adicionar um estilo com 100 por cento.

192
00:12:36,270 --> 00:12:37,060
E nós vamos lá.

193
00:12:37,120 --> 00:12:39,540
Então, essa é uma coisa que queremos fazer.

194
00:12:39,610 --> 00:12:44,400
Ainda há uma diferença muito pequena, que há um pouco de espaço lá que

195
00:12:44,400 --> 00:12:45,320
não temos nessa.

196
00:12:45,470 --> 00:12:50,980
E para se livrar de tudo o que queremos fazer é entrar na miniatura

197
00:12:50,970 --> 00:12:56,670
real e selecionar a miniatura que está aqui e vamos dar esse preenchimento zero.

198
00:12:57,580 --> 00:13:02,230
E agora, se olharmos, parece que queremos que olhe ou que pareça ser assim quando

199
00:13:02,220 --> 00:13:02,700
olhar.

200
00:13:02,730 --> 00:13:05,350
Nós também vamos adicionar alguns espaçamentos.

201
00:13:05,350 --> 00:13:09,740
Você pode ver que há algum espaçamento feito aqui e podemos consertar isso agora.

202
00:13:09,820 --> 00:13:15,180
Além disso, inspecionando-o e lembre-se de que não estamos realmente corrigindo isso, estamos testando-o no navegador

203
00:13:15,390 --> 00:13:19,560
e depois voltaremos a fazer essas mudanças em nossa própria folha de estilos.

204
00:13:19,570 --> 00:13:24,760
Então, o que queremos fazer é adicionar um pouco de preenchimento no potro de legenda, que é esta caixa aqui.

205
00:13:24,990 --> 00:13:31,220
E o Padam que queremos é na parte esquerda direita da parte superior e inferior e será nove ou 10 pixels.

206
00:13:31,230 --> 00:13:35,370
Então, vamos fazer o preenchimento nove x.

207
00:13:35,760 --> 00:13:36,510
E nós vamos lá.

208
00:13:36,540 --> 00:13:38,240
Acabamos com um bom espaçamento lá.

209
00:13:38,520 --> 00:13:43,090
Não é o que queremos fazer é pegar esse estilo e realmente adicionado em uma folha de estilo que

210
00:13:43,090 --> 00:13:43,450
vamos escrever