1
00:00:00,250 --> 00:00:03,150
Este video vamos a continuar diseñando el campamento.

2
00:00:03,360 --> 00:00:08,590
Vamos a agregar una barra de navegación a cada página y esa barra de navegación estará bastante vacía por el momento.

3
00:00:08,700 --> 00:00:14,780
Pero eventualmente tendrá botones como iniciar sesión y cerrar sesión para registrar toda esa funcionalidad.

4
00:00:15,030 --> 00:00:19,710
Pero hasta entonces solo pondremos un texto de marcador de posición allí y luego también vamos a

5
00:00:19,710 --> 00:00:23,510
diseñar la nueva forma de campamento porque ahora está en una forma bastante difícil.

6
00:00:23,580 --> 00:00:28,860
Comencemos el servidor y veamos lo que tenemos.

7
00:00:28,890 --> 00:00:31,150
Así que aquí está nuestra página de inicio.

8
00:00:31,680 --> 00:00:36,250
Aquí está nuestra vista, todos los campamentos cambian la lista de campings.

9
00:00:36,290 --> 00:00:38,180
Se ve bastante bien.

10
00:00:38,430 --> 00:00:40,490
Queremos una barra de navegación aquí.

11
00:00:40,890 --> 00:00:43,370
Lo mismo al agregar un nuevo campamento.

12
00:00:43,740 --> 00:00:49,290
Vamos a centrar el formulario y vamos a apilar estas dos entradas una encima de la otra en lugar de

13
00:00:49,290 --> 00:00:51,050
tenerlas una al lado de la otra.

14
00:00:51,360 --> 00:00:56,400
Pero vamos a comenzar con la barra de navegación y vamos a trabajar en la plantilla de camping.

15
00:00:56,610 --> 00:01:00,990
Así que volveremos aquí y abriremos la plantilla de campings para comenzar.

16
00:01:00,990 --> 00:01:08,220
bastante marcado y el nuestro no será tan largo como para no comenzar cuando no tenemos todos los botones en los menús desplegables.

17
00:01:08,220 --> 00:01:13,440
Voy a abrir la caja de arranque y voy a ir a los componentes y luego a

18
00:01:13,440 --> 00:01:19,890
la barra de navegación y me encuentro en esta sección todo el tiempo porque aunque bootstrap hace que sea muy fácil

19
00:01:19,890 --> 00:01:22,910
agregar una barra de navegación, todavía se puede ver es

20
00:01:22,950 --> 00:01:27,690
Comenzaremos de forma agradable y simple, pero aun así hay muchas clases que debemos recordar.

21
00:01:28,140 --> 00:01:32,700
Así que definitivamente no hay que avergonzarse por arrancar el bootstrap de Darcs como cualquier otra cosa en esta

22
00:01:32,710 --> 00:01:35,040
clase, no deberías sentirte avergonzado de mirar las cosas.

23
00:01:35,100 --> 00:01:40,320
Pero en particular, el arranque suele ser un desastre con estas clases y elementos, y no

24
00:01:40,320 --> 00:01:42,860
hay forma de hacerlo sin mirar los documentos.

25
00:01:42,870 --> 00:01:48,870
OK, volveremos y haré algo de espacio en la parte superior de mi plantilla

26
00:01:48,870 --> 00:01:55,180
de campings y comenzaremos por definir un Nav. que de nuevo al igual que el encabezado.

27
00:01:55,320 --> 00:01:59,450
Podríamos hacer un div pero un Nav. es un poco más significativo.

28
00:01:59,460 --> 00:02:00,870
Es más semántico.

29
00:02:01,050 --> 00:02:09,580
Así que voy a hacer un navegador con la barra de navegación de la clase y luego barra de navegación predeterminada.

30
00:02:09,600 --> 00:02:14,640
Hay diferentes tipos y colores diferentes o podemos tener una barra de navegación invertida, pero solo vamos

31
00:02:14,640 --> 00:02:16,240
a ir con la predeterminada.

32
00:02:16,410 --> 00:02:25,500
encabezado vamos a agregar una etiqueta de anclaje con clase igual a barra de navegación para un final como ese.

33
00:02:25,590 --> 00:02:33,570
Y luego dentro vamos a agregar un div con una clase igual al fluido del contenedor y

34
00:02:36,480 --> 00:02:45,570
eso nos hará un buen relleno y algo de espacio ahí y luego vamos a agregar otro div con una

35
00:02:45,570 --> 00:02:54,090
clase igual al encabezado de la barra de navegación y luego dentro de la clase es igual a nuestro

36
00:02:54,330 --> 00:03:03,870
Y luego podemos configurar el enlace para que solo sea una barra y luego lo cerraremos y agregaremos el campamento de

37
00:03:03,870 --> 00:03:04,850
yelper así.

38
00:03:04,980 --> 00:03:07,750
Y veamos qué obtenemos con este simple marcado.

39
00:03:07,920 --> 00:03:14,430
Así que tenemos nuestro NAV con un contenedor dentro con el encabezado de la barra de navegación y el encabezado de la barra de navegación solo tiene un ítem

40
00:03:14,820 --> 00:03:16,730
que es la marca de la barra neph.

41
00:03:17,010 --> 00:03:18,290
Vamos a actualizar

42
00:03:18,780 --> 00:03:24,060
OK, entonces tenemos la barra de navegación y luego tenemos nuestra marca aquí y este es un enlace que

43
00:03:24,060 --> 00:03:27,710
cuando hagamos clic nos llevará de vuelta a la espantosa página de aterrizaje.

44
00:03:28,200 --> 00:03:34,320
De acuerdo, agreguemos algunos marcadores de posición aquí para iniciar sesión e inscribirse.

45
00:03:34,320 --> 00:03:40,500
No funcionarán o no harán nada más que verse bien, así que hagámoslo ahora y vayamos a nuestro campamento.

46
00:03:40,890 --> 00:03:47,710
MI. J. como plantilla, luego dentro de la barra de navegación y el contenedor pero no dentro del N. F. bar Hetter.

47
00:03:47,970 --> 00:03:55,950
Vamos a agregar otro div y este div tendrá una clase de colapso que verá lo que

48
00:03:55,950 --> 00:03:56,220
hace.

49
00:03:56,220 --> 00:04:01,810
Y solo un momento y luego Neph bar Dasch colapsan así.

50
00:04:01,890 --> 00:04:13,710
Y luego adentro vamos a agregar un UL y este UL tendrá una clase de nav bar dash nav y luego también barra de navegación hacia la derecha

51
00:04:13,770 --> 00:04:20,430
que lo moverá hacia el lado derecho y luego dentro de eso vamos a tiene tres

52
00:04:20,430 --> 00:04:24,520
enlaces por ahora y cada uno será un aliado.

53
00:04:25,170 --> 00:04:32,820
Y luego, dentro, Ally tendrá una etiqueta de anclaje y dará el primer inicio de sesión.

54
00:04:32,850 --> 00:04:40,830
Y por ahora, el H ref solo se establecerá en nuestra ruta porque todavía no tenemos ningún registro y

55
00:04:40,830 --> 00:04:42,940
haremos lo mismo para registrarlo.

56
00:04:42,980 --> 00:04:49,540
Hagamos la suscripción y luego también finalice la sesión.

57
00:04:49,910 --> 00:04:50,680
DE ACUERDO.

58
00:04:51,210 --> 00:04:52,580
Entonces, veamos cómo se ve esto.

59
00:04:52,590 --> 00:04:59,550
Antes de hablar sobre lo que hace el colapso si actualizamos y no se ve bien, nos perdimos

60
00:04:59,550 --> 00:05:02,090
una clase menor aquí en UL.

61
00:05:02,290 --> 00:05:06,470
Parece que no agregamos ahora, así que solo agregamos la barra de navegación.

62
00:05:06,470 --> 00:05:13,680
Ahora nunca lo hice bien, pero no añadimos el navegador, por lo que ahorraremos, ahora lo actualizaremos y terminaremos

63
00:05:13,680 --> 00:05:20,430
con los tres enlaces en el lado derecho del NAV y también cuando cambie el tamaño aquí.

64
00:05:20,430 --> 00:05:25,130
Tenga en cuenta que aquí mismo se derrumbó.

65
00:05:25,680 --> 00:05:29,300
Y, finalmente, lo que tendremos es un pequeño icono de hamburguesa.

66
00:05:29,340 --> 00:05:32,610
Se ve igual a donde haces clic y su menú.

67
00:05:33,050 --> 00:05:36,180
Por ahora solo los ocultamos cuando llegamos a ese tamaño.

68
00:05:36,450 --> 00:05:36,690
DE ACUERDO.

69
00:05:36,690 --> 00:05:42,240
Así que eso es todo lo que tenemos que hacer para la barra de navegación, excepto por el hecho de que está solo en esta página.

70
00:05:42,240 --> 00:05:45,390
Así que ahora vamos a agregarlo a todas las páginas.

71
00:05:45,390 --> 00:05:50,030
Así que vamos a copiarlo o cortarlo y vamos a moverlo al encabezado.

72
00:05:50,460 --> 00:05:52,400
Así que muévase a la cabeza o parcial.

73
00:05:52,680 --> 00:05:53,790
Voy a abrir eso.

74
00:05:53,790 --> 00:06:00,130
Utilizando la línea de comando C9, las vistas recortan el encabezado de barra de Parshall Ijaw Yes.

75
00:06:00,570 --> 00:06:03,840
Y luego, justo en la parte superior del cuerpo lo agregaremos.

76
00:06:04,320 --> 00:06:06,080
Vamos a sangrar esto apropiadamente.

77
00:06:06,570 --> 00:06:09,230
OK, ahí vamos.

78
00:06:09,900 --> 00:06:15,840
Y tenemos nuestra barra de navegación en el encabezado para que cualquier archivo en el que incluyamos el

79
00:06:15,840 --> 00:06:20,550
encabezado parcial ahora tenga la barra de navegación pero vuelva a iniciar el servidor.

80
00:06:20,850 --> 00:06:25,790
Así que todavía está aquí si agregamos un nuevo campamento, también conseguimos ese bar.

81
00:06:26,160 --> 00:06:31,270
Y si vamos a la página de inicio también tenemos la barra suficiente.

82
00:06:31,530 --> 00:06:32,110
Estupendo.

83
00:06:32,130 --> 00:06:36,950
Así que ahora sigamos para hacer que esta forma se vea un poco mejor.

84
00:06:36,990 --> 00:06:40,840
Entonces, como mencioné anteriormente, hay dos cosas importantes que quiero hacer en esta forma.

85
00:06:40,860 --> 00:06:46,470
La primera es centrarla en el medio de la página y la segunda es apilar la forma

86
00:06:46,950 --> 00:06:52,320
verticalmente en lugar de tener las tres entradas o las dos entradas y el botón alineados horizontalmente

87
00:06:52,320 --> 00:06:53,270
en la pantalla.

88
00:06:53,370 --> 00:06:56,120
Desea tomarlos y apilarlos uno encima del otro.

89
00:06:56,370 --> 00:07:00,820
Comencemos abriendo el archivo correcto que es el nuevo punto.

90
00:07:00,960 --> 00:07:01,510
Sí.

91
00:07:01,650 --> 00:07:11,470
Así que haremos C9 visitas, slash sabía que Ejay nosotros y luego aquí está nuestra forma que tenemos hasta ahora.

92
00:07:11,970 --> 00:07:18,750
Comencemos fácil y agreguemos algunas de las clases de arranque a los formularios o a las entradas, y eso es

93
00:07:19,020 --> 00:07:20,810
control de guiones de formulario.

94
00:07:21,150 --> 00:07:25,390
Y queremos eso tanto en las entradas como en el botón.

95
00:07:25,500 --> 00:07:33,290
Agreguemos en la clase Bootstrap PTEN ETN grande así como así.

96
00:07:33,570 --> 00:07:39,090
Y también lo hacemos entre la falla y veamos qué aspecto tiene.

97
00:07:39,090 --> 00:07:40,920
Entonces nodo después de J.

98
00:07:41,030 --> 00:07:42,830
Sí actualizar

99
00:07:43,300 --> 00:07:49,770
OK, así que estamos obteniendo los controles de arranque aquí y el botón de arranque aunque definitivamente es enorme y

100
00:07:50,100 --> 00:07:51,060
no queremos eso.

101
00:07:51,210 --> 00:07:54,840
Entonces, para solucionar esto, hay algunas cosas que podemos hacer.

102
00:07:54,840 --> 00:07:57,900
El primero es que pondremos todo dentro de un contenedor.

103
00:07:58,110 --> 00:08:01,520
Así que fuimos en la clase div es

104
00:08:04,680 --> 00:08:09,960
igual a contenedor y voy a mover esto a la parte inferior.

105
00:08:10,930 --> 00:08:13,690
Ahí vamos y sangrémoslo apropiadamente.

106
00:08:13,950 --> 00:08:16,450
Ahorre un cambio menor

107
00:08:16,530 --> 00:08:19,850
Ahora tenemos algo de espacio, pero esa es una forma masiva.

108
00:08:20,220 --> 00:08:23,280
Entonces, lo siguiente que haré es usar el sistema de grillas.

109
00:08:23,520 --> 00:08:30,710
Así que agregaremos otro div y este tendrá una clase igual a row así.

110
00:08:30,720 --> 00:08:33,750
Tomemos esto y copiémoslo en la fila.

111
00:08:33,780 --> 00:08:36,630
Entonces todo el formulario entra en una fila ahora.

112
00:08:36,810 --> 00:08:39,220
Y eso también lo hizo.

113
00:08:39,610 --> 00:08:44,930
OK guardar actualizar aún no es una gran diferencia.

114
00:08:44,970 --> 00:08:51,150
Y lo que vamos a hacer es usar CSSA y, de hecho, escribir nuestros propios estilos sobre bootstrap

115
00:08:51,150 --> 00:08:52,880
para centrar esto dándole margen.

116
00:08:52,880 --> 00:08:56,580
Auto todo esto aquí en el lado izquierdo y derecho.

117
00:08:56,700 --> 00:09:01,110
Y solo queríamos ocupar el 30 por ciento de este contenedor en el que se encuentra.

118
00:09:01,110 --> 00:09:06,960
Así que lo hemos hecho antes de que regresemos y voy a romper una de las reglas, así que te

119
00:09:06,960 --> 00:09:10,120
dijeron desde el principio que no debes hacer estilos en línea.

120
00:09:10,230 --> 00:09:13,930
Y definitivamente es una buena idea no hacer eso.

121
00:09:14,010 --> 00:09:20,010
Pero por ahora hasta que lleguemos a una nueva versión donde creamos nuestras propias hojas de estilo, voy a hacerlo

122
00:09:20,010 --> 00:09:20,500
en línea.

123
00:09:20,580 --> 00:09:24,130
Así que voy a hacer un nuevo div en el que ponemos el formulario.

124
00:09:24,270 --> 00:09:26,130
Así.

125
00:09:26,760 --> 00:09:34,760
Y luego voy a dar ese estilo div y voy a comenzar diciendo que es 30 por ciento.

126
00:09:34,980 --> 00:09:39,650
Y simplemente déjalo así y no veamos que obtenemos una forma más pequeña.

127
00:09:39,660 --> 00:09:41,820
Ahora queremos centrar eso.

128
00:09:41,820 --> 00:09:43,080
Así que volvemos aquí.

129
00:09:43,110 --> 00:09:49,730
Digamos margen cero en la parte superior e inferior y Otto a la izquierda y a la derecha.

130
00:09:50,430 --> 00:09:52,790
Ahora tenemos la forma centrada.

131
00:09:52,800 --> 00:09:58,750
Lo siguiente que haremos es hacer que el botón ocupe todo el ancho, que es bastante largo.

132
00:09:58,790 --> 00:10:05,760
Pero lo que haremos es darle el bloque DTN que está construido en forma de Bootstrap para convertirlo en un elemento de bloque.

133
00:10:05,790 --> 00:10:08,370
Y ahora ocupa toda la línea.

134
00:10:08,400 --> 00:10:13,530
A continuación, démosle un espacio entre todos estos elementos para hacer eso.

135
00:10:13,710 --> 00:10:17,300
Usaremos bootstraps construidos en la clase de grupo de formulario.

136
00:10:17,370 --> 00:10:25,250
Entonces, necesitamos un ECO de clase div para formar un grupo de guiones y lo vamos a necesitar para cada entrada.

137
00:10:25,470 --> 00:10:34,440
De modo que cada entrada entra dentro de una de esas cosas y luego solo voy a

138
00:10:34,560 --> 00:10:41,240
duplicar esto y tendremos otra aquí y esto irá dentro de eso.

139
00:10:41,850 --> 00:10:44,080
Y luego tenemos uno más para el botón.

140
00:10:44,610 --> 00:10:50,860
Entonces, tenemos un grupo de formulario clásico tres veces y también necesitamos las etiquetas de cierre de div.

141
00:10:50,850 --> 00:10:54,810
Ahí vamos oh hay uno y necesitamos la otra etiqueta div de cierre aquí.

142
00:10:55,190 --> 00:10:56,060
DE ACUERDO.

143
00:10:56,220 --> 00:10:59,140
Entonces ese grupo de formularios solo junta cosas.

144
00:10:59,160 --> 00:11:01,530
Pero también nos da un poco de espacio.

145
00:11:01,530 --> 00:11:03,300
Ahora tenemos este botón aquí.

146
00:11:03,390 --> 00:11:08,730
Lo siguiente en lo que nos podríamos enfocar es en centrar el texto y para hacerlo, aunque tenemos que

147
00:11:08,730 --> 00:11:11,010
hacer es darle al texto alinear el centro.

148
00:11:11,490 --> 00:11:13,680
Y otra vez voy a hacer eso en línea.

149
00:11:13,680 --> 00:11:19,710
No es una buena idea al menos a largo plazo, pero este es un gran uso para hacer algo rápidamente.

150
00:11:20,160 --> 00:11:24,290
Así que el estilo y el texto se alinearán en el centro.

151
00:11:25,650 --> 00:11:31,470
Ahorre ahora centrado en el medio.

152
00:11:31,980 --> 00:11:35,030
Lo siguiente que debemos hacer es cambiar el color de este botón.

153
00:11:35,070 --> 00:11:37,000
El blanco no se ve muy bien.

154
00:11:37,230 --> 00:11:44,730
Vamos a hacer que sea el botón principal primario que lo hará azul guardar la actualización.

155
00:11:44,760 --> 00:11:46,430
Sí, eso se ve mucho mejor.

156
00:11:46,800 --> 00:11:51,700
Vamos a mover este enlace al link de atrás hacia el medio también.

157
00:11:51,900 --> 00:11:56,850
Entonces copiaremos esto y todo lo que tenemos que hacer es ponerlo dentro de este margen.

158
00:11:56,880 --> 00:12:07,200
Auto div para que esto div aquí después de la forma así y guarde.

159
00:12:07,200 --> 00:12:07,810
Aquí vamos.

160
00:12:07,860 --> 00:12:14,310
agregar un poco de relleno o margen para que no esté en contra de este H-1 hacer eso.

161
00:12:14,970 --> 00:12:18,750
Tenemos que retroceder y lo último que deberíamos hacer es

162
00:12:19,080 --> 00:12:22,460
Volveremos y ya tenemos este div que hemos seleccionado.

163
00:12:22,530 --> 00:12:28,050
Entonces, en lugar de cero marginado, podemos darle un margen de 20 píxeles para comenzar.

164
00:12:28,050 --> 00:12:29,750
Veamos cómo se ve eso.

165
00:12:30,580 --> 00:12:32,140
Ok, eso se ve un poco mejor.

166
00:12:32,340 --> 00:12:36,070
Hagamos algo más como 50.

167
00:12:36,600 --> 00:12:38,280
Y eso podría ser un poco demasiado.

168
00:12:38,280 --> 00:12:40,230
Definitivamente su propia preferencia.

169
00:12:40,350 --> 00:12:43,570
Regresemos y hagamos 25.

170
00:12:44,700 --> 00:12:44,940
Todo bien.

171
00:12:44,940 --> 00:12:46,420
Eso es suficiente por ahora.

172
00:12:46,440 --> 00:12:51,990
Juega con esto tanto como lo desees y puedes hacer que las entradas sean más anchas si te

173
00:12:51,990 --> 00:12:57,060
gustan o más estrechas, pero puedes ver que es receptivo, permanecerá en el medio y se

174
00:12:57,060 --> 00:12:58,160
reducirá un poco.

175
00:12:58,170 --> 00:13:00,420
Por último, deshagámonos de esta marca registrada.

176
00:13:00,420 --> 00:13:01,920
Definitivamente ya no necesitas eso.

177
00:13:02,070 --> 00:13:06,570
En la parte inferior de nuestro pie de página, veremos el archivo de pie de página y haré trampa.

178
00:13:06,620 --> 00:13:11,530
Solo haz esto por ahora y nos deshaceremos de ese rescate.

179
00:13:11,700 --> 00:13:17,670
Ahora tenemos nuestra forma, no se ve tan mal, podemos retroceder, obtenemos una lista de campings, tenemos

180
00:13:18,180 --> 00:13:19,800
suficiente barra, podemos agregar una.

181
00:13:19,920 --> 00:13:24,000
También podemos volver atrás y ver la página de destino que aún no está lista.

182
00:13:24,210 --> 00:13:28,740
Probablemente, ese sea el que más trabajo tenga y será bastante diferente de las otras páginas,

183
00:13:28,740 --> 00:13:31,360
se verá mucho mejor y tendrá muchos más estilos personalizados.

184
00:13:31,380 --> 00:13:33,280
Entonces es por eso que lo guardo hasta más tarde.

185
00:13:33,570 --> 00:13:38,550
Y luego también tenemos nuestro número aquí con nuestros botones falsos que no hacen nada.

186
00:13:38,550 --> 00:13:38,890
Todo bien