1
00:00:00,240 --> 00:00:04,170
Bienvenido de nuevo a esta lección, vamos a seguir trabajando en tu campamento.

2
00:00:04,170 --> 00:00:06,070
Ya hemos hecho la configuración inicial.

3
00:00:06,180 --> 00:00:11,430
Hemos hecho algunos diseños básicos, agregamos el encabezado y el pie de página de Parshall. Añadimos el

4
00:00:11,430 --> 00:00:13,990
arranque y agregamos la funcionalidad de crear nuevos campamentos.

5
00:00:14,010 --> 00:00:17,550
Ahora vamos a ir al estilo de la página de campings usando bootstrap.

6
00:00:17,550 --> 00:00:18,600
Entonces empecemos.

7
00:00:18,600 --> 00:00:21,230
Lo primero que haré es asegurarme de que mis servidores se estén ejecutando.

8
00:00:22,000 --> 00:00:25,260
Y solo eche un vistazo a lo que tenemos ahora.

9
00:00:25,350 --> 00:00:26,740
Definitivamente un poco decepcionante.

10
00:00:26,850 --> 00:00:28,110
Entonces tengo dos objetivos principales.

11
00:00:28,170 --> 00:00:34,150
El primero es que queremos un encabezado mejor en el título hasta aquí, así que debería verse mejor.

12
00:00:34,170 --> 00:00:40,050
Vamos a usar lo que se llama jumbotron en Bootstrap y luego también en los campamentos, la

13
00:00:40,050 --> 00:00:43,000
lista de campings no debería mostrarse verticalmente así.

14
00:00:43,020 --> 00:00:48,200
En su lugar, queremos una cuadrícula de imágenes más pequeñas que se crucen y esa cuadrícula debe ser receptiva.

15
00:00:48,480 --> 00:00:52,850
Comencemos con el primero que obtiene este texto del título para que se vea un poco mejor.

16
00:00:53,100 --> 00:00:58,440
Así que voy a abrir campamentos que sí, voy a trabajar aquí.

17
00:00:58,590 --> 00:01:04,010
Así que voy a cambiar el tamaño de esto un poco porque vamos a escribir un poco de correo HD y no

18
00:01:04,020 --> 00:01:06,390
vamos a hacer nada con un terminal en absoluto.

19
00:01:06,440 --> 00:01:12,510
Entonces, para trabajar en el encabezado vamos a usar una etiqueta de encabezado que no hemos visto antes.

20
00:01:12,510 --> 00:01:15,740
Funcionalmente funciona de la misma manera que algo así como un div.

21
00:01:15,780 --> 00:01:20,080
La única diferencia es que esto tiene un poco de significado semántico.

22
00:01:20,400 --> 00:01:25,850
Usar encabezado en lugar de solo un div arbitrario, pero en realidad no importa, es solo un contenedor.

23
00:01:26,010 --> 00:01:35,340
Y vamos a darle una clase de jumbotron y luego, dentro de eso, agregaremos bien solo copiemos este

24
00:01:35,340 --> 00:01:42,540
H-1 en realidad y lo dejaremos así y guardaremos Frigo y actualizaremos nuestra página.

25
00:01:42,570 --> 00:01:44,890
Ahora tenemos lo que se llama el Jumbotron.

26
00:01:45,130 --> 00:01:46,280
Todavía no es genial.

27
00:01:46,290 --> 00:01:50,720
Lo siguiente que debemos hacer es hacer que todo esté dentro de un contenedor de bootstrap.

28
00:01:51,030 --> 00:01:57,690
Entonces todo lo que vemos aquí todo esto voy a sangrar y voy a agregar un

29
00:01:58,110 --> 00:02:01,260
div con clase igual a contenedor así.

30
00:02:01,460 --> 00:02:07,670
Y luego vamos a pegar todo dentro de eso y esto agregará algo de especificación para nosotros en los lados.

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

32
00:02:08,880 --> 00:02:13,800
Puedes ver que ya no tenemos las cosas en el lado izquierdo aquí.

33
00:02:13,830 --> 00:02:19,200
Tenemos espacio y nuestro JumboTron se ve un poco más cerca y eventualmente aparecerá

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

35
00:02:20,520 --> 00:02:22,890
Así que esto se verá un poco más agradable también.

36
00:02:22,890 --> 00:02:25,530
Por ahora solo tenemos el Jumbotron.

37
00:02:25,590 --> 00:02:27,570
Ahora cambiemos el texto en sí.

38
00:02:27,600 --> 00:02:34,530
Entonces, en lugar de que esta sea la página de los campamentos, pongamos un mensaje de bienvenida. Bienvenidos al campamento.

39
00:02:34,710 --> 00:02:40,140
libre de poner cualquier contenido que desees y también

40
00:02:40,140 --> 00:02:55,470
agregaré un párrafo en el párrafo. Añadiré solo un pequeño tipo de eslogan y solo diré "mira nuestra mano" y elige campings de todo el mundo.

41
00:02:55,800 --> 00:02:56,550
Siéntete

42
00:02:56,670 --> 00:02:58,940
Algo así realmente no importa.

43
00:02:58,950 --> 00:03:00,850
Guardaremos la actualización

44
00:03:01,170 --> 00:03:06,650
OK, ahora tenemos una pequeña línea de etiquetas y lo último que queremos hacer es cuidar este enlace.

45
00:03:06,690 --> 00:03:08,280
El add new camping link.

46
00:03:08,580 --> 00:03:12,640
Así que voy a copiar eso y también ponerlo dentro del Jumbotron.

47
00:03:12,650 --> 00:03:15,070
Sin embargo, voy a convertirlo en un botón.

48
00:03:15,150 --> 00:03:23,190
de arranque para hacer eso o para agregar un párrafo primero y luego poner la etiqueta de anclaje dentro de eso.

49
00:03:23,190 --> 00:03:24,780
Uno de los botones

50
00:03:24,780 --> 00:03:26,680
Y lo estoy haciendo por espacio.

51
00:03:26,730 --> 00:03:32,820
Quiere que esté en su propia línea y luego voy a darle a

52
00:03:32,850 --> 00:03:43,320
la clase de botón varias clases de PTEN ETN primaria para el color y entre guiones grandes como esa y guardará.

53
00:03:43,330 --> 00:03:45,420
Ahora hemos tenido un nuevo botón de campamento.

54
00:03:45,510 --> 00:03:49,930
Hacemos clic en él y nos lleva al formulario que está completamente diseñado.

55
00:03:50,220 --> 00:03:54,050
Una cosa menor es que si cambio el tamaño de esta ventana aquí.

56
00:03:55,320 --> 00:04:01,740
Observe cómo nuestro texto va justo contra el borde del Jumbotron, que no es genial.

57
00:04:01,860 --> 00:04:07,380
Tenemos un espacio aquí y quieren mantener ese espacio. Lo que tendremos

58
00:04:07,380 --> 00:04:19,680
que hacer es agregar otro contenedor dentro del Jumbotron para que la clase div sea igual al contenedor y luego aquí abajo en el Jumbotron antes del

59
00:04:19,680 --> 00:04:24,330
final en el divisor de cierre y luego solo sangrar. todo.

60
00:04:24,420 --> 00:04:26,040
Y ahora si actualizamos

61
00:04:26,210 --> 00:04:30,860
Ella se veía igual pero cuando lo redujimos ahora tenemos algo de espacio allí.

62
00:04:31,230 --> 00:04:33,790
OK, así que esa es la parte del encabezado.

63
00:04:33,840 --> 00:04:37,680
Ahora queremos trabajar en esa grilla de imágenes y seré directo contigo.

64
00:04:37,680 --> 00:04:39,770
Definitivamente es un poco más trabajo.

65
00:04:40,020 --> 00:04:49,200
OK comencemos en esa grilla y comenzaremos creando una fila para que la clase div iguale a la fila

66
00:04:49,800 --> 00:04:53,520
así y comenzaré con un pequeño mensaje aquí.

67
00:04:53,580 --> 00:05:03,210
Así que vamos a agregar una clase div igual y voy a hacer que esto ocupe todo el ancho y vamos a

68
00:05:03,210 --> 00:05:11,040
tener un mensaje aquí y H-3 que dice que nuestros sitios más populares son campings que conoces no

69
00:05:14,270 --> 00:05:15,790
se verá mucho.

70
00:05:15,790 --> 00:05:24,160
Por ahora volvamos y comencemos agregando en la fila de la clase div, que necesitamos todo en nuestra escuela primaria

71
00:05:24,160 --> 00:05:25,470
en una fila.

72
00:05:25,560 --> 00:05:28,820
Es una clase div igual a una fila así.

73
00:05:28,970 --> 00:05:34,780
Y ahora tenemos que hablar de esto para cada bucle porque lo que realmente queremos hacer es reemplazar a

74
00:05:34,780 --> 00:05:41,380
nuestra grilla dentro de la fila para cada campamento, queremos hacer un div que tenga una columna de clase y una

75
00:05:41,800 --> 00:05:43,380
columna usando la grilla bootstrap.

76
00:05:43,420 --> 00:05:50,110
Así que voy a hacer eso ahora, donde voy a poner todo este código para que cada bucle

77
00:05:52,390 --> 00:05:53,580
tenga sangría así.

78
00:05:53,830 --> 00:05:57,180
Y luego necesitamos nuestra etiqueta div de cierre aquí.

79
00:05:57,490 --> 00:06:01,500
Así que esto es para la fila clásica y esto es para el contenedor.

80
00:06:02,020 --> 00:06:02,470
DE ACUERDO.

81
00:06:02,730 --> 00:06:09,370
Así que en una fila de clase y en lugar de simplemente dejar este contenido como div y aquí

82
00:06:09,870 --> 00:06:17,770
con una H para una imagen todavía tendremos una imagen, pero vamos a cambiar esta div para que tenga una clase de columna

83
00:06:18,310 --> 00:06:26,740
de tres en columna pequeña 6 y eso es solo para que responda de manera que obtengamos imágenes más grandes cuando el tamaño de

84
00:06:26,740 --> 00:06:28,270
la pantalla sea más grande.

85
00:06:28,300 --> 00:06:34,090
Y luego, cuando lo reduzcamos, bajará a solo dos imágenes por fila y luego se reducirá aún

86
00:06:34,090 --> 00:06:36,400
más a una sola imagen por fila.

87
00:06:36,610 --> 00:06:44,080
miniatura que es una clase de arranque que nos ayudará a hacer una pequeña tarjeta que hará que un pequeño

88
00:06:44,110 --> 00:06:49,270
elemento de cuadrícula dentro de esa miniatura agregará el imagen para comenzar así.

89
00:06:49,270 --> 00:06:56,560
Así que dentro de eso vamos a agregar otro div y este div va a tener una clase de

90
00:06:56,680 --> 00:07:02,210
Tenemos servicios de imágenes iguales al campamento que RL Y lo dejaremos así.

91
00:07:02,230 --> 00:07:08,580
Y vamos a deshacernos de esto por ahora y solo ahorrar y veamos qué obtenemos si estamos frescos.

92
00:07:09,280 --> 00:07:09,820
Todo bien.

93
00:07:09,910 --> 00:07:11,850
Entonces, tenemos una grilla de imágenes ahora.

94
00:07:11,890 --> 00:07:14,860
Solo hay tres pero estamos obteniendo esta grilla.

95
00:07:15,220 --> 00:07:18,580
Y te mostraré lo que quise decir al hacer que responda.

96
00:07:18,580 --> 00:07:25,270
Entonces, como un encogimiento, observe cómo cambia a dos cuadrados o dos elementos en la pantalla.

97
00:07:25,280 --> 00:07:26,910
Recuerde que hay 12 unidades.

98
00:07:27,040 --> 00:07:35,980
Entonces, lo que tuvimos primero es dividiéndolo en cuatro pedazos, donde cada uno extrajo tres unidades y luego, cuando la

99
00:07:35,980 --> 00:07:43,390
cuadrícula se hace más pequeña aquí, cada uno ocupa seis unidades y aún más pequeño va automáticamente

100
00:07:43,390 --> 00:07:44,190
a uno.

101
00:07:44,350 --> 00:07:49,130
Y no tuvimos que escribir eso porque el valor predeterminado más pequeño es usar 12 unidades.

102
00:07:49,180 --> 00:07:52,050
Entonces no tuvimos que especificar eso.

103
00:07:52,090 --> 00:07:59,950
Ahora volvamos a poner el título en el nombre de este campamento y no solo a la edad

104
00:08:00,460 --> 00:08:07,550
para que uno haga otra clase de arranque. Una clase div equivale a un título así.

105
00:08:07,780 --> 00:08:13,080
Y luego dentro pondrá una H para el nombre del campamento.

106
00:08:14,070 --> 00:08:18,670
OK, ahorremos, veamos qué aspecto tiene.

107
00:08:18,670 --> 00:08:19,270
Aquí vamos.

108
00:08:19,300 --> 00:08:21,030
Obtenemos estas lindas tarjetas pequeñas.

109
00:08:21,040 --> 00:08:23,700
Esta es la clase de miniatura que hace eso por nosotros.

110
00:08:23,840 --> 00:08:25,030
Tenemos nuestras imágenes

111
00:08:25,210 --> 00:08:30,480
Y veamos cómo se ve si tenemos un montón de imágenes en un montón de elementos.

112
00:08:30,760 --> 00:08:34,160
Entonces no tienes que hacer esto, pero voy a pegar esto aquí.

113
00:08:34,600 --> 00:08:36,860
Solo danos más datos.

114
00:08:36,880 --> 00:08:38,800
Serán datos duplicados, pero está bien.

115
00:08:38,940 --> 00:08:46,250
Y luego tenemos que asegurarnos de que agreguemos las comas correctas y, por lo tanto, comas allí y llegar allí.

116
00:08:46,300 --> 00:08:49,840
Ahora si actualizamos Oh, necesitamos reiniciar el servidor.

117
00:08:50,170 --> 00:08:52,060
Y cada vez que nos metimos con la aplicación.

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

119
00:08:53,590 --> 00:08:58,070
Y ahora si actualizamos, verá que tenemos un pequeño problema.

120
00:08:58,120 --> 00:09:00,040
Nuestra grilla está un poco desordenada.

121
00:09:00,170 --> 00:09:03,810
Y lo que está sucediendo es que tenemos imágenes que son de diferentes alturas.

122
00:09:04,090 --> 00:09:07,940
Entonces este Salmon Creek es diferente a estos.

123
00:09:08,410 --> 00:09:10,710
Aunque el ancho es el mismo en este caso.

124
00:09:10,930 --> 00:09:16,150
Y eso está saliendo de la cuadrícula y hay una manera fácil de arreglarlo, aunque es un poco inestable.

125
00:09:16,270 --> 00:09:19,130
Y te mostraré cómo lo hacemos en lugar de nuestro campamento.

126
00:09:19,270 --> 00:09:19,960
Sí.

127
00:09:20,320 --> 00:09:26,860
En el día de la fila de clase voy a agregar un atributo de estilo y voy a hacer esto temporalmente.

128
00:09:27,010 --> 00:09:31,600
a una hoja de estilo externa, pero voy a hacerlo en línea para que sea más fácil de ver.

129
00:09:31,600 --> 00:09:32,530
Vamos a mover esto

130
00:09:32,530 --> 00:09:37,360
Así que configuramos el estilo para que sea flexible y flexible.

131
00:09:37,480 --> 00:09:39,900
Y esas son dos propiedades que ayudarán a nuestra grilla.

132
00:09:39,910 --> 00:09:44,810
Entonces, si estuviera fresco Ahora terminamos con la grilla donde es más flexible.

133
00:09:44,860 --> 00:09:50,980
No importa que tengamos alturas diferentes porque ahora la cuadrícula se adapta. Así que hay más espacio

134
00:09:50,980 --> 00:09:53,400
entre estos dos y allí está aquí.

135
00:09:53,470 --> 00:09:59,500
Básicamente se da cuenta de la cantidad mínima de espacio necesario donde podemos tener todo en

136
00:09:59,500 --> 00:10:02,750
su propia línea, donde podemos tener todo perfectamente alineado.

137
00:10:02,800 --> 00:10:09,460
Y hay otro cambio que podemos hacer que consiste en volver atrás y agregar el texto Center, que es un programa

138
00:10:09,460 --> 00:10:13,370
de arranque para nosotros que hará que nuestro texto se centre allí mismo.

139
00:10:13,540 --> 00:10:15,410
Y creo que se ve un poco mejor.

140
00:10:15,490 --> 00:10:20,500
También es una cuestión de preferencia personal y ahora hemos terminado con la página de camping por el momento.

141
00:10:20,620 --> 00:10:25,630
Esperemos que eso te muestre cómo el bootstrap realmente nos puede ayudar a hacer las cosas bastante fáciles,

142
00:10:25,630 --> 00:10:27,550
especialmente en comparación con hacerlo desde cero.

143
00:10:27,550 --> 00:10:31,900
Y déjame mostrarte nuestra buena red receptiva que tenemos.

144
00:10:31,900 --> 00:10:33,260
Entonces esto está en el móvil.

145
00:10:33,310 --> 00:10:38,890
Obtenemos este diseño agradable hasta en cuatro imágenes.

146
00:10:39,160 --> 00:10:41,140
De acuerdo, estoy bastante contento de cómo se ve esto.

147
00:10:41,140 --> 00:10:42,020
Te veré en el siguiente video