1
00:00:00,310 --> 00:00:04,590
Bienvenidos, regresen en esta lección y nos enfocaremos en el diseño de la página del programa.

2
00:00:04,620 --> 00:00:07,080
Así que ahora nuestra página de muestra se ve así.

3
00:00:07,230 --> 00:00:10,710
Tenemos una pequeña barra naff aquí con los botones que no hacen nada.

4
00:00:10,710 --> 00:00:12,910
Tenemos un H-1 con el nombre del camping.

5
00:00:13,190 --> 00:00:18,060
Y tenemos una imagen y una descripción, y tenemos un botón para agregar un nuevo comentario y luego

6
00:00:18,060 --> 00:00:19,290
se muestran todos los comentarios.

7
00:00:19,410 --> 00:00:21,900
Cada uno un pequeño párrafo.

8
00:00:21,900 --> 00:00:25,230
Entonces, nuestro objetivo aquí es hacer que se vea un poco más así.

9
00:00:25,230 --> 00:00:27,190
Así que tengo una barra lateral aquí.

10
00:00:27,270 --> 00:00:31,950
Todavía no vamos a tener el mapa, pero dejaremos espacio para el mapa y luego

11
00:00:31,950 --> 00:00:34,250
tendremos nuestro contenido principal con la descripción.

12
00:00:34,380 --> 00:00:40,020
Algunos leen el título, no vamos a hacer las calificaciones todavía, pero luego también tendremos una lista de comentarios

13
00:00:40,020 --> 00:00:41,350
que se verán así.

14
00:00:41,430 --> 00:00:45,360
Su propio pequeño contenedor allí abajo, tendré un pequeño botón para mover algunos.

15
00:00:45,360 --> 00:00:47,240
Generalmente es un poco más estilizado.

16
00:00:47,310 --> 00:00:50,210
Podemos agregar esto y eso dice cuántas reseñas se han dejado.

17
00:00:50,280 --> 00:00:51,540
Así que eso es lo que estamos buscando.

18
00:00:51,720 --> 00:00:55,170
Y para empezar solo vamos a centrarnos en la cuadrícula de arranque.

19
00:00:55,350 --> 00:00:58,500
Recuerde que la cuadrícula de bootstrap tiene 12 unidades de ancho.

20
00:00:58,560 --> 00:01:03,540
Vamos a designar a tres de los 12 para esta pequeña barra lateral y luego vamos a

21
00:01:03,540 --> 00:01:05,500
agregar nueve para el contenido principal.

22
00:01:05,760 --> 00:01:10,200
Antes de empezar a cambiar realmente cualquier cosa, quiero señalar que estoy trabajando en v 5 ahora.

23
00:01:10,680 --> 00:01:13,710
Entonces, si quiere seguir, todos estos cambios estarán en V 5.

24
00:01:13,800 --> 00:01:17,280
Y la razón por la que lo hago es porque vamos a tener que crear una hoja de estilo personalizada.

25
00:01:17,340 --> 00:01:21,780
Vamos a tener que servir el directorio público y algunas otras cosas que son cambios sustanciales.

26
00:01:22,020 --> 00:01:24,020
Así que quería hacer una versión separada.

27
00:01:24,270 --> 00:01:29,070
Pero antes de hacerlo, lo primero que vamos a hacer es agregar un contenedor alrededor de todo este

28
00:01:29,070 --> 00:01:30,020
contenedor de arranque.

29
00:01:30,150 --> 00:01:38,850
Entonces en mostrar que E. J. va a agregar un div con clase al contenedor así y

30
00:01:38,850 --> 00:01:40,290
pondremos todo dentro de eso.

31
00:01:40,290 --> 00:01:44,850
Y comenzaré agregando la barra lateral y la completaremos con algunos datos ficticios como los que tenemos aquí.

32
00:01:45,660 --> 00:01:55,120
y en esa fila vamos a tener otro div donde una clase es columna media tres así como así.

33
00:01:55,120 --> 00:02:00,920
Entonces DIVX y esto necesita ser de clase igual a pro

34
00:02:01,080 --> 00:02:06,790
Y luego, dentro de aquí, vamos a agregar un párrafo y vamos a obtener este texto que dice Joachim.

35
00:02:08,460 --> 00:02:15,960
Así que ese es un párrafo donde la clase es líder y luego vamos a ponerlo en el campo, por

36
00:02:15,960 --> 00:02:17,640
ahora cambiaremos esto eventualmente.

37
00:02:17,640 --> 00:02:24,870
Pero sí, acampen y luego, para agregar esos pequeños elementos de la lista, haremos un div con la clase lista del grupo

38
00:02:25,950 --> 00:02:34,670
del tablero y luego, aquí, vamos a agregar un grupo de aliados en cada aliado que tiene una clase de elemento del grupo de la lista.

39
00:02:35,610 --> 00:02:41,490
Y dentro solo agregaremos algunos datos ficticios y lo llamaremos info 1 y luego voy

40
00:02:41,490 --> 00:02:44,530
a duplicar esta información a info 3.

41
00:02:44,610 --> 00:02:46,340
Y luego veamos cómo se ve eso por ahora.

42
00:02:46,500 --> 00:02:52,480
Entonces, para actualizar la página, tenemos una barra lateral aquí y seleccionaré uno de estos elementos para comenzar.

43
00:02:52,830 --> 00:02:55,480
Y todo lo que tenemos que hacer es agregar un activo allí mismo.

44
00:02:55,650 --> 00:02:58,900
Si estamos frescos, ahora vemos que uno de ellos está activo.

45
00:02:59,460 --> 00:03:03,900
Y esto es realmente solo un marcador de posición para tener algo allí, así que no tenemos mucho

46
00:03:03,900 --> 00:03:07,680
espacio en blanco, pero de nuevo agregaremos datos reales allí y un mapa con el tiempo.

47
00:03:07,770 --> 00:03:13,710
Y solo para señalarlo, el mapa irá aquí dentro de esta columna de tres medios con el tiempo, pero no

48
00:03:13,710 --> 00:03:14,590
por el momento.

49
00:03:14,940 --> 00:03:16,560
OK, así que es una barra lateral.

50
00:03:16,560 --> 00:03:19,050
Ahora vamos a agregar el contenido principal.

51
00:03:19,290 --> 00:03:28,670
Entonces necesitamos otra columna y esta es el medio de columna de clase 9.

52
00:03:29,130 --> 00:03:36,120
Y en lugar de tener que tener el H-1, necesitamos tener la imagen, pero antes de todo, notará que en

53
00:03:36,120 --> 00:03:41,820
realidad está en una de estas miniaturas, tal como lo tenemos en la página de inicio.

54
00:03:41,940 --> 00:03:44,150
Cada uno de estos es una miniatura.

55
00:03:44,190 --> 00:03:49,560
Vamos a hacer lo mismo con la imagen completa en el título y los comentarios, y todo eso.

56
00:03:50,220 --> 00:03:56,930
Así que vamos a agregar un div y ese div tendrá una clase igual a miniatura.

57
00:03:58,110 --> 00:04:04,620
Y luego, dentro de eso, vamos a agregar la imagen, y voy a fijar la imagen que ya hemos

58
00:04:04,620 --> 00:04:06,140
escrito y colocarla justo allí.

59
00:04:06,180 --> 00:04:08,260
Esa va a ser nuestra imagen de camping.

60
00:04:08,490 --> 00:04:17,250
Y luego también queremos agregar una clase a la que bootstrapped nos da, que es la imagen de respuesta de Dasch.

61
00:04:19,560 --> 00:04:20,420
Aquí vamos.

62
00:04:20,490 --> 00:04:23,270
Salva eso.

63
00:04:23,400 --> 00:04:28,470
Y si echamos un vistazo a lo que tenemos ahora y actualizamos, al menos tenemos la imagen y el contenido

64
00:04:28,470 --> 00:04:29,570
en el lugar correcto.

65
00:04:29,610 --> 00:04:33,280
Sin embargo, tenemos un problema donde esto no se está llevando a cabo con el que queremos.

66
00:04:33,320 --> 00:04:37,950
Quiero que llegue hasta el final y tendremos que manejar eso con algunos C S personalizados al final.

67
00:04:38,970 --> 00:04:44,040
Y ahora volveremos y agregaremos esto aquí donde tenemos el nombre del campamento y luego el precio por noche

68
00:04:44,040 --> 00:04:46,360
que realmente no tenemos en la base de datos.

69
00:04:46,440 --> 00:04:47,830
Entonces solo codificaremos.

70
00:04:48,150 --> 00:04:49,400
Así que hagámoslo ahora.

71
00:04:49,860 --> 00:04:57,250
Y ese es otro div y este tiene una clase de leyenda completa.

72
00:04:57,570 --> 00:05:01,190
Y luego dentro de allí vamos a agregar una H para.

73
00:05:01,620 --> 00:05:07,980
Y vamos a pasar esto a la derecha y hacemos que la clase sea igual a tirar a la derecha y luego lo

74
00:05:07,980 --> 00:05:09,540
que pongamos aquí será el precio.

75
00:05:09,750 --> 00:05:15,300
Y comenzaré con $ 9 por noche, una vez más, esto vendrá de la base de datos con el tiempo.

76
00:05:15,540 --> 00:05:22,080
Si estamos frescos Ahora obtenemos $ 9 por noche en el lado derecho y luego queremos obtener el nombre del

77
00:05:22,260 --> 00:05:25,610
campamento que voy a copiar aquí en el lado izquierdo.

78
00:05:25,650 --> 00:05:30,870
Así que lo pondremos justo debajo y si no agregamos "pull right" irá automáticamente a la izquierda,

79
00:05:31,080 --> 00:05:38,400
aunque eso es más grande de lo que tenía en mente y lo convertiré en una H más pequeña y voy a ir para

80
00:05:38,400 --> 00:05:44,490
agregar una etiqueta de anclaje dentro de allí así y poner el nombre del campamento dentro de la etiqueta de anclaje.

81
00:05:46,500 --> 00:05:50,370
Y la idea detrás de eso es que eventualmente regrese.

82
00:05:50,380 --> 00:05:55,740
Esto debería ser un enlace al camping actual o la página del Servicio de Parques, donde podemos ir a reservar algo.

83
00:05:56,130 --> 00:05:58,050
Por ahora, es solo el enlace a la nada.

84
00:05:58,410 --> 00:05:59,020
DE ACUERDO.

85
00:05:59,160 --> 00:06:00,350
Entonces tenemos eso en.

86
00:06:00,360 --> 00:06:01,370
Tenemos un precio

87
00:06:01,470 --> 00:06:03,660
Ahora agreguemos la descripción de nuevo.

88
00:06:04,230 --> 00:06:10,950
será solo una etiqueta de párrafo y luego agregaremos en nuestra descripción, que es la descripción del campamento allí mismo.

89
00:06:13,050 --> 00:06:14,060
Así que eso

90
00:06:14,640 --> 00:06:20,190
Y va a ser un poco decepcionante porque no tenemos una gran suscripción en este momento, así

91
00:06:20,790 --> 00:06:26,100
que quizás querríamos ir a ver la base de datos con algo de Lorem Ipsum y

92
00:06:26,100 --> 00:06:29,750
voy a robar esto y copiaré eso y vuelve al archivo semilla.

93
00:06:29,940 --> 00:06:34,700
Y luego, en lugar del archivo de nuestra semilla, cambiaré la descripción de los tres.

94
00:06:34,720 --> 00:06:37,990
Simplemente haz que sea lo mismo en lugar de bla, bla, bla.

95
00:06:38,130 --> 00:06:42,380
Ahora tenemos un poco más de Lorem Ipsum y ahorraremos.

96
00:06:42,660 --> 00:06:48,070
Y para que esto entre en vigor debemos reiniciar el servidor porque eso recibirá la base de datos.

97
00:06:48,720 --> 00:06:52,340
Y luego regresemos a la página de campings.

98
00:06:52,440 --> 00:06:54,090
Tenemos tres campamentos.

99
00:06:54,090 --> 00:06:58,330
Sin embargo, ahora tienen una descripción más legítima de algunos textos.

100
00:06:58,680 --> 00:07:00,050
Bien, excelente.

101
00:07:00,060 --> 00:07:02,240
Echemos un vistazo ahora en lo que tenemos que trabajar.

102
00:07:02,250 --> 00:07:03,730
Hay algunas cosas menores.

103
00:07:03,880 --> 00:07:08,580
Dejaremos las estrellas en el recuento de opiniones por separado por ahora y pasaremos a los comentarios.

104
00:07:08,970 --> 00:07:15,150
Volvamos al programa que E. J. queremos que esté en la misma columna aquí.

105
00:07:15,150 --> 00:07:21,660
Sí, podemos cerrar el archivo con las semillas, por ahora lo que vamos a hacer es agregar bien una clase bien dentro de la columna

106
00:07:21,900 --> 00:07:22,630
media nueve porque

107
00:07:22,680 --> 00:07:24,350
Tomando la misma cantidad de espacio.

108
00:07:24,750 --> 00:07:31,440
Así que para hacer eso, simplemente ve aquí después de la miniatura así que esto y el título aquí esta es la miniatura.

109
00:07:31,880 --> 00:07:34,770
Muy bien, van a agregar clase div.

110
00:07:34,870 --> 00:07:37,060
Igual que bien

111
00:07:37,410 --> 00:07:42,870
Y luego, dentro de eso, va a abrirlo y aquí es donde hará el bucle para agregar

112
00:07:42,880 --> 00:07:43,560
los comentarios.

113
00:07:43,680 --> 00:07:49,600
Pero voy a comenzar agregando en el botón la palanca de tu botón y haremos un simple

114
00:07:50,750 --> 00:07:55,150
div y este div tendrá una clase de texto a la derecha.

115
00:07:55,320 --> 00:08:01,760
Y luego, dentro de allí, agregaremos nuestra etiqueta de anclaje que ya tenemos para crear

116
00:08:01,770 --> 00:08:02,940
un nuevo comentario.

117
00:08:03,300 --> 00:08:05,090
Solo ponlo aquí.

118
00:08:05,820 --> 00:08:11,520
Es largo, pero recuerda que es una etiqueta de anclaje que tiene una clase de éxito de botón de botón que

119
00:08:11,520 --> 00:08:12,350
lo hace verde.

120
00:08:12,490 --> 00:08:14,620
Pero la referencia es una parte realmente larga.

121
00:08:14,790 --> 00:08:22,290
Va a acampar, recortar los comentarios de barra de ID de camping, cortar, pero guardar y actualizar.

122
00:08:22,680 --> 00:08:23,030
DE ACUERDO.

123
00:08:23,040 --> 00:08:27,750
Entonces pueden ver que ahora tenemos el pozo que nos da el bonito fondo gris en la frontera.

124
00:08:27,750 --> 00:08:29,960
Aquí es donde vamos a agregar en los comentarios.

125
00:08:30,120 --> 00:08:34,170
Entonces, tenemos que hacer lo siguiente, recorrer los comentarios y ya tenemos eso hecho.

126
00:08:34,170 --> 00:08:38,500
Pero en lugar de simplemente hacer un párrafo para cada uno, en realidad vamos a hacer una fila por separado.

127
00:08:38,760 --> 00:08:42,880
Entonces te mostraré cómo se ve cuando copia esto o lo corta.

128
00:08:43,020 --> 00:08:49,140
Y podemos eliminar este párrafo adicional y vamos a ponerlo justo después del texto correcto.

129
00:08:49,440 --> 00:08:51,850
Y hagámoslo correctamente

130
00:08:52,090 --> 00:08:57,280
Así que tenemos nuestro ciclo y luego vamos a recorrer cada comentario y

131
00:08:57,270 --> 00:09:03,830
vamos a agregar aquí una fila de clase div para cada clase div igual a fila.

132
00:09:04,750 --> 00:09:14,040
Y luego dentro de cada Vamos a agregar otra clase de div igual a la columna medio 12 y guardar eso.

133
00:09:14,110 --> 00:09:20,820
Y si echamos un vistazo a lo que tenemos aquí, terminamos con el nombre de usuario de nombre de usuario de slash de correo electrónico

134
00:09:20,830 --> 00:09:21,850
que llamamos el autor.

135
00:09:22,090 --> 00:09:29,070
Y luego a la derecha hay esta vez hace 10 días, que solo codificará por ahora y luego

136
00:09:29,080 --> 00:09:30,760
aparecerá el comentario real.

137
00:09:30,750 --> 00:09:36,790
Entonces, para que funcione, necesitamos hacer algo de texto y luego hacer algo en el derecho de extraer texto a la

138
00:09:37,120 --> 00:09:41,350
derecha y luego tenemos que agregar un párrafo para el comentario en sí mismo.

139
00:09:41,350 --> 00:09:43,890
Intentemos eso y entremos aquí.

140
00:09:43,950 --> 00:09:45,900
Tenemos nuestro medio de columna 12.

141
00:09:46,290 --> 00:09:49,800
Y dentro de eso vamos a comenzar agregando el autor del comentario.

142
00:09:50,130 --> 00:09:51,770
Así que solo agreguemos eso allí mismo.

143
00:09:52,200 --> 00:09:57,520
Y a continuación, agregaremos un lapso y este será a la derecha.

144
00:09:57,580 --> 00:09:59,770
Así que agregaremos el tirón clásico a la derecha.

145
00:09:59,970 --> 00:10:03,340
Y luego aquí solo agregaremos hace diez días por ahora.

146
00:10:03,510 --> 00:10:05,300
Bueno, solo código difícil que en.

147
00:10:05,400 --> 00:10:09,520
Y luego, lo último que quieren hacer es mostrar el texto del comentario.

148
00:10:09,680 --> 00:10:15,000
Así que voy a obtener este texto de comentario aquí y lo pondremos dentro de su propio párrafo,

149
00:10:15,000 --> 00:10:21,340
que ya tenemos aquí así, excepto que queremos moverlo dentro de la columna aquí, así como tenemos el autor y los

150
00:10:21,660 --> 00:10:22,770
10 días transcurridos .

151
00:10:22,770 --> 00:10:29,680
Queremos que estén en la misma columna juntos y ahora, pero guarden y regresen.

152
00:10:29,700 --> 00:10:31,340
Mira lo que obtenemos

153
00:10:31,360 --> 00:10:31,980
Todo bien.

154
00:10:31,980 --> 00:10:33,050
Entonces tenemos un comentario.

155
00:10:33,070 --> 00:10:33,930
Eso es.

156
00:10:33,930 --> 00:10:36,580
Pero puede ver que tenemos un botón agregar un nuevo comentario.

157
00:10:36,580 --> 00:10:37,980
Asegúrate de que funcione.

158
00:10:38,770 --> 00:10:40,450
Y los comentarios se muestran aquí.

159
00:10:40,470 --> 00:10:41,600
Nos falta la calificación.

160
00:10:41,670 --> 00:10:44,460
Así que se ve un poco raro, pero está bien por ahora.

161
00:10:44,700 --> 00:10:48,460
Lo que podríamos querer hacer es agregar uno o dos comentarios más.

162
00:10:48,450 --> 00:10:52,600
Así que vuelve aquí y usemos algo más de lorem ipsum.

163
00:10:52,600 --> 00:10:57,100
Así que solo voy a copiar partes de esto y agregarlas como comentarios.

164
00:10:57,270 --> 00:11:02,440
Solo use algo de eso y el autor aquí estará acampando.

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

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

167
00:11:05,720 --> 00:11:06,090
DE ACUERDO.

168
00:11:06,100 --> 00:11:08,420
Así que ahora estamos recibiendo nuestros comentarios aquí muy bien.

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

170
00:11:09,540 --> 00:11:11,610
Tengo un espacio que queremos agregar.

171
00:11:11,610 --> 00:11:16,560
Si echas un vistazo a lo que tenemos aquí, hay una línea muy tenue, no sé si aparecerás en el

172
00:11:16,570 --> 00:11:17,520
elenco de la pantalla.

173
00:11:17,520 --> 00:11:22,500
Hay una línea muy débil que agrega espacio y todo lo que tenemos que hacer para que

174
00:11:22,530 --> 00:11:23,890
funcione es agregar una h.

175
00:11:24,370 --> 00:11:31,260
Entonces, justo después de este derecho de texto que es el botón, simplemente agregamos una regla horizontal y si actualizamos, ahora tenemos

176
00:11:31,770 --> 00:11:33,210
algo de espacio ahí.

177
00:11:33,260 --> 00:11:38,680
Usted tiene un botón y todos nuestros comentarios se muestran a corto plazo.

178
00:11:38,730 --> 00:11:40,310
¿Por qué no construimos el nombre de usuario?

179
00:11:40,620 --> 00:11:46,770
Así que volveremos aquí y ya tuvimos esto y se deshicieron de él, pero volveremos y volveremos a

180
00:11:46,890 --> 00:11:52,950
agregar una etiqueta fuerte con el autor y harán que sea un poco más fácil de ver.

181
00:11:52,950 --> 00:11:53,770
Aquí vamos.

182
00:11:53,830 --> 00:11:57,470
Todavía no es genial, pero es lo suficientemente bueno por ahora.

183
00:11:57,540 --> 00:12:00,060
Así que eso es realmente todo el bootstrap que tenemos que hacer por ahora.

184
00:12:00,240 --> 00:12:01,390
Pero todavía no hemos terminado.

185
00:12:01,470 --> 00:12:07,680
Si volvemos y echamos un vistazo a la versión finalizada, verá que la imagen ocupa toda la

186
00:12:07,680 --> 00:12:09,900
miniatura y simplemente no lo hace.

187
00:12:10,050 --> 00:12:15,000
Aunque hice un punto para usar la misma imagen exacta, no se trata de la imagen real en sí misma.

188
00:12:15,120 --> 00:12:16,820
El problema se reduce a nuestro estilo.

189
00:12:17,080 --> 00:12:22,890
Y lo que queremos hacer es entrar y decirle a esta imagen que tome el 100 por ciento con el contenedor.

190
00:12:23,160 --> 00:12:29,150
Así que le mostraré que podemos inspeccionarlo y este es un gran uso para el inspector aquí.

191
00:12:29,350 --> 00:12:36,260
Podemos seleccionarlo aquí y luego, aquí podemos agregar un estilo con un 100 por ciento.

192
00:12:36,270 --> 00:12:37,060
Y ahí vamos.

193
00:12:37,120 --> 00:12:39,540
Entonces, eso es algo que querríamos hacer.

194
00:12:39,610 --> 00:12:44,400
Todavía hay una pequeña diferencia, que hay un pequeño espacio allí que no

195
00:12:44,400 --> 00:12:45,320
tenemos en este.

196
00:12:45,470 --> 00:12:50,980
Y para deshacernos de eso, todo lo que queremos hacer es ir a la miniatura

197
00:12:50,970 --> 00:12:56,670
real y seleccionar la miniatura que está aquí y vamos a dar ese relleno cero.

198
00:12:57,580 --> 00:13:02,230
Y ahora si echamos un vistazo se ve de la manera que queremos que se vea o casi se ve de esa manera

199
00:13:02,220 --> 00:13:02,700
cuando mirar.

200
00:13:02,730 --> 00:13:05,350
Vamos a agregar algo de espacio aquí también.

201
00:13:05,350 --> 00:13:09,740
Puedes ver que hay algo de espacio aquí y podemos arreglarlo ahora mismo.

202
00:13:09,820 --> 00:13:15,180
Además, al inspeccionarlo y recordar que en realidad no lo estamos solucionando, lo estamos probando en el

203
00:13:15,390 --> 00:13:19,560
navegador y luego volveremos y realizaremos estos cambios en nuestra propia hoja de estilos.

204
00:13:19,570 --> 00:13:24,760
Entonces, lo que queremos hacer es agregar un poco de relleno al potro de los subtítulos, que es este recuadro aquí.

205
00:13:24,990 --> 00:13:31,220
Y el Padam que queremos está en la parte superior e inferior izquierda y será de nueve o 10 píxeles.

206
00:13:31,230 --> 00:13:35,370
Así que solo haremos relleno nueve x.

207
00:13:35,760 --> 00:13:36,510
Y ahí vamos.

208
00:13:36,540 --> 00:13:38,240
Terminamos con un buen espacio allí.

209
00:13:38,520 --> 00:13:43,090
No es lo que queremos hacer es tomar ese estilo y agregarlo a una hoja de estilo que vamos

210
00:13:43,090 --> 00:13:43,450
a escribir