1
00:00:00,750 --> 00:00:06,120
Bienvenidos de nuevo a esta lección. Les mostraré uno de los componentes más importantes y más

2
00:00:06,120 --> 00:00:12,290
ampliamente utilizados en Bootstrap, que es el NFR, de modo que puedan ver realmente cómo se obtiene Boucek dotcom.

3
00:00:12,450 --> 00:00:15,980
Usan suficiente componente de barra aquí.

4
00:00:16,200 --> 00:00:21,900
También vamos a usar uno en nuestra aplicación de campamento Yelp y como redimensioné la barra de navegación.

5
00:00:21,900 --> 00:00:28,980
Observe cuán receptivo es y luego observe tan pronto como presione TAB qué tamaño y tamaño de móvil

6
00:00:28,980 --> 00:00:30,700
obtenemos esta buena hamburguesa.

7
00:00:30,720 --> 00:00:33,020
Así que trabajaremos para lograr todo eso en esta lección.

8
00:00:33,180 --> 00:00:34,890
Pero vamos a comenzar más simple.

9
00:00:34,890 --> 00:00:42,480
Lo primero que debemos hacer es ir a los componentes y ir a la barra de navegación y antes de ir mucho más lejos, he

10
00:00:42,480 --> 00:00:46,290
creado un nuevo archivo solo porque vamos a escribir un poco de código.

11
00:00:46,380 --> 00:00:48,150
El viejo se estaba abarrotando.

12
00:00:48,150 --> 00:00:50,620
Lo llamo naff Bar H T M L.

13
00:00:50,820 --> 00:00:56,030
Dentro de todo lo que tienen es que el enlace al programa de arranque no cambia el título aquí.

14
00:00:56,630 --> 00:01:00,980
Lo llamaré barras de navegación bootstrap.

15
00:01:01,350 --> 00:01:02,910
Así.

16
00:01:02,910 --> 00:01:07,580
Ahora vayamos a los documentos y echemos un vistazo a la barra de navegación predeterminada.

17
00:01:08,220 --> 00:01:13,460
Entonces, este ejemplo aquí muestra todas las características importantes en las que podemos tener un enlace de marca.

18
00:01:13,560 --> 00:01:15,800
Podemos tener otros enlaces que podemos haber soltado en los menús.

19
00:01:15,930 --> 00:01:20,940
Podemos tener una forma de barra de navegación y un botón, podemos tener cosas que están en el lado derecho, cosas que

20
00:01:20,940 --> 00:01:22,010
están en el lado izquierdo.

21
00:01:22,020 --> 00:01:23,720
Esto realmente muestra todo.

22
00:01:23,790 --> 00:01:30,330
Es el fregadero de la cocina de las barras naff bootstrap y, en consecuencia, el marcado es un poco largo.

23
00:01:30,390 --> 00:01:33,530
Trabajaremos con todas estas piezas al final de este video.

24
00:01:33,540 --> 00:01:37,790
Pero quiero comenzar más simple y comenzaré mostrándote la forma más sencilla de hacer un número.

25
00:01:38,040 --> 00:01:46,470
Entonces, necesitamos hacer un elemento de navegación y ese elemento de NAV necesita tener dos clases, queremos la barra de navegación y

26
00:01:46,470 --> 00:01:51,550
la barra de navegación, y podemos comenzar con el guardado predeterminado de Dasch.

27
00:01:51,550 --> 00:01:54,920
Y ahora veamos el archivo en el navegador y actualiza.

28
00:01:55,200 --> 00:02:00,690
Puedes ver que espero que se vea y que haya una barra de suficiente barra muy débil en

29
00:02:00,690 --> 00:02:04,860
la parte superior, así que así es como realmente iniciamos la barra NF.

30
00:02:04,860 --> 00:02:06,980
Ahora llenémoslo con un poco de contenido.

31
00:02:07,050 --> 00:02:11,640
Lo primero que veremos es cómo podemos agregar esta marca aquí.

32
00:02:11,790 --> 00:02:13,180
Básicamente el nombre de su empresa.

33
00:02:13,230 --> 00:02:14,320
En la mayoría de los casos.

34
00:02:14,900 --> 00:02:20,830
Y eso es usando un encabezado de barra de navegación y luego dentro del encabezado NFR usamos una marca de barra de navegación.

35
00:02:20,850 --> 00:02:32,160
Comencemos añadiendo que la clase div es igual al encabezado del tablero de navegación y luego dentro de allí vamos a agregar una marca de barra

36
00:02:32,160 --> 00:02:35,910
de navegación que es una etiqueta de anclaje.

37
00:02:35,910 --> 00:02:39,440
Por lo general, al hacer clic en el nombre de la empresa, vuelve a la página de inicio.

38
00:02:39,660 --> 00:02:44,760
Así que haremos eso aquí, etiqueta de anclaje y comenzaremos con un tráfico igual al de Thorpes, para que no nos

39
00:02:44,760 --> 00:02:45,840
lleve a ningún lado.

40
00:02:45,870 --> 00:02:52,890
Class igualará a la marca de barra de navegación nav y solo inventaremos el nombre de una compañía.

41
00:02:52,890 --> 00:02:57,170
Veamos si tengo una taza de café a mi alrededor, así que vamos a tomar café.

42
00:02:57,270 --> 00:03:02,210
Pero para que realmente sea una verdadera startup, debemos cambiar la ortografía un poco.

43
00:03:02,400 --> 00:03:03,180
OK Alex.

44
00:03:03,180 --> 00:03:03,990
Suficientemente bueno para mi.

45
00:03:04,020 --> 00:03:05,350
Café con una K.

46
00:03:05,760 --> 00:03:07,420
Vamos a echar un vistazo.

47
00:03:07,590 --> 00:03:11,830
Actualice y ahora tenemos nuestra marca de barras NAV que es un enlace.

48
00:03:11,940 --> 00:03:12,880
Hago clic en él

49
00:03:13,010 --> 00:03:17,250
No me lleva a ningún lado en este momento, pero al final nuestras aplicaciones lo tendrán de modo que cuando

50
00:03:17,250 --> 00:03:20,940
haga clic en el nombre de la empresa lo lleve de vuelta a la página de inicio siguiente.

51
00:03:20,940 --> 00:03:24,480
Veamos si podemos agregar algunos otros enlaces, como contacto.

52
00:03:24,510 --> 00:03:25,660
Regístrese para registrarse.

53
00:03:25,770 --> 00:03:27,490
Todos esos enlaces comunes en el bar.

54
00:03:27,660 --> 00:03:31,190
Comencemos agregando un enlace de página aquí.

55
00:03:31,500 --> 00:03:37,620
Así que volveremos y luego, fuera del encabezado de la barra de navegación, haremos que otro div en este div recopile

56
00:03:37,620 --> 00:03:41,600
todo el contenido al menos en el lado izquierdo de nuestra barra NAV.

57
00:03:41,760 --> 00:03:46,410
Entonces tenemos el encabezado y luego tendremos algo de contenido y luego, si queremos algo en el

58
00:03:46,500 --> 00:03:48,960
lado derecho, tendremos otro div que tenga otra clase.

59
00:03:48,960 --> 00:03:50,010
Entonces la clase aquí.

60
00:03:50,070 --> 00:03:56,730
En realidad, dos queremos navegación y navegación barra de navegación.

61
00:03:56,850 --> 00:04:00,170
No me preguntes sobre el nombre de su barra de navegación dash nav.

62
00:04:00,210 --> 00:04:05,040
Es una de las grandes críticas de bootstrap es que es un poco feo y no es muy

63
00:04:05,040 --> 00:04:05,940
significativo a veces.

64
00:04:06,030 --> 00:04:12,030
que se creó en respuesta a la falta de sentido semántico de bootstrap si se le llama UI semántica.

65
00:04:12,030 --> 00:04:14,630
Y en realidad hay un marco de CSSA

66
00:04:14,910 --> 00:04:16,660
Y esa es una que realmente disfruto también.

67
00:04:16,710 --> 00:04:18,070
Y debatí la enseñanza.

68
00:04:18,420 --> 00:04:22,190
Pero al final no es tan ampliamente utilizado, no hay tan buenos tutoriales todavía.

69
00:04:22,200 --> 00:04:23,550
Así que volvamos a nuestra diferencia aquí.

70
00:04:23,590 --> 00:04:27,600
Nav de navegación de navegación de clase y navegación de clase ambos.

71
00:04:27,690 --> 00:04:34,710
Y luego, para cada elemento que queremos en este NFR, necesitamos agregar un aliado y luego dentro de la Y, si queremos vincular,

72
00:04:34,710 --> 00:04:36,850
acabamos de tener una etiqueta de anclaje.

73
00:04:37,050 --> 00:04:38,810
Entonces este no irá a ninguna parte.

74
00:04:38,850 --> 00:04:42,280
Una vez más, esto será en la página Acerca de.

75
00:04:42,500 --> 00:04:53,550
Y si vuelvo atrás y actualizo, ahora tenemos un enlace para agregar una más para contactar y guardar volver atrás.

76
00:04:54,570 --> 00:04:58,950
Ahora tenemos dos enlaces, vamos adelante y agreguemos algo al lado derecho de la página.

77
00:04:59,160 --> 00:05:05,340
Agreguemos dos enlaces uno para registrarse o registrarse y otro para iniciar sesión en el lado derecho de la barra

78
00:05:06,840 --> 00:05:07,630
para hacer eso.

79
00:05:07,690 --> 00:05:13,370
convencional usarlo, funcionará exactamente de la misma manera, pero usted quiere tener aliados en lugar de un

80
00:05:13,630 --> 00:05:19,150
pozo, aunque funcionarán perfectamente con un div. poco más sentido para ser en lugar de una UL.

81
00:05:19,140 --> 00:05:23,570
Necesitamos otro contenedor aquí y en realidad en lugar de usar divs es más

82
00:05:23,620 --> 00:05:32,010
Así que vamos a agregar otra UL y esta será Nav. nav bar dash nav y luego barra de navegación

83
00:05:32,100 --> 00:05:32,700
dash.

84
00:05:32,760 --> 00:05:33,570
Derecha.

85
00:05:33,660 --> 00:05:38,280
Y debemos asegurarnos de que deletreemos correctamente, de lo contrario, la clase no tendrá efecto.

86
00:05:38,280 --> 00:05:42,960
Entonces, lo que hará es crear un nuevo grupo de contenido para el lado derecho de esa barra de navegación.

87
00:05:43,120 --> 00:05:44,540
Y ahora solo tenemos que llenarlo.

88
00:05:44,550 --> 00:05:47,750
Así que agregaré dos enlaces tanto en edgewise.

89
00:05:47,820 --> 00:05:55,510
El primero no irá a ninguna parte y dirá registrarse y luego tendremos otro que solo dice

90
00:05:55,770 --> 00:05:56,550
iniciar sesión.

91
00:05:56,940 --> 00:05:58,080
Vamos a ver.

92
00:05:58,290 --> 00:06:01,630
Actualiza la página y puedes ver que tenemos contenido a la derecha.

93
00:06:01,650 --> 00:06:07,710
Sin embargo, está justo en el límite y para solucionarlo, podemos agregar un contenedor a una barra

94
00:06:07,710 --> 00:06:12,220
suficiente como usamos el contenedor antes para agregar espacio a nuestro contenido principal.

95
00:06:12,220 --> 00:06:14,190
Podríamos agregar uno en lugar de una barra de navegación.

96
00:06:14,400 --> 00:06:17,730
Así que puse todo en la barra neph en lugar de un contenedor.

97
00:06:17,740 --> 00:06:20,800
Entonces la clase es igual a contenedor

98
00:06:21,060 --> 00:06:22,430
Solo mueve esto hacia abajo.

99
00:06:22,560 --> 00:06:26,180
Asegúrate de que todo esté sangrado apropiadamente.

100
00:06:26,190 --> 00:06:27,770
Aquí vamos.

101
00:06:27,780 --> 00:06:30,930
Probémoslo.

102
00:06:30,930 --> 00:06:31,430
Bonito.

103
00:06:31,440 --> 00:06:33,910
Así que ahora todo está centrado agradable y correctamente.

104
00:06:34,140 --> 00:06:41,940
Te mostraré si agregué el contenedor fuera del navegador y pusieron toda la barra de navegación dentro.

105
00:06:42,880 --> 00:06:43,650
Veremos que pasa.

106
00:06:43,660 --> 00:06:49,950
Ahora bien, si tuviera bares lo suficientemente frescos, en realidad me corto y solo cruzo la calle.

107
00:06:50,460 --> 00:06:53,460
Entonces el contenedor hará eso con lo que pongamos dentro de él.

108
00:06:53,670 --> 00:06:59,640
Y en este caso, queremos que el contenedor esté dentro de la barra de navegación para que no constriña

109
00:06:59,640 --> 00:07:03,820
la parte real de la máscara, sino que restringe el contenido dentro de ella.

110
00:07:04,440 --> 00:07:04,950
DE ACUERDO.

111
00:07:05,060 --> 00:07:11,250
Así que tenemos nuestro contenedor Hetter, tenemos el material a la izquierda y tenemos algo de contenido a la derecha para

112
00:07:11,990 --> 00:07:13,060
que pueda verlo aquí.

113
00:07:13,290 --> 00:07:20,050
Ahora qué paso un poco e ir y tomar esta barra de navegación básica o la barra de

114
00:07:20,040 --> 00:07:28,850
navegación predeterminada que tienen en los documentos y vamos a copiar todo esto y lo pondré justo debajo ahora están haciendo un poco

115
00:07:28,900 --> 00:07:29,670
de espacio.

116
00:07:29,670 --> 00:07:33,010
Un montón de comentarios para hacerlo más claro.

117
00:07:33,250 --> 00:07:35,510
Barra de navegación predeterminada

118
00:07:36,060 --> 00:07:40,280
Y echemos un vistazo a la actualización.

119
00:07:40,560 --> 00:07:44,580
Aquí está este navegador y hay algunas cosas que quiero resaltar.

120
00:07:44,580 --> 00:07:48,690
Una es que hemos caído en los menús, pero en realidad no funcionan.

121
00:07:48,900 --> 00:07:53,300
Y también a medida que cambiamos el tamaño de la ventana obtenemos el menú de hamburguesas aquí.

122
00:07:53,550 --> 00:07:54,740
Esos enlaces desaparecen.

123
00:07:54,750 --> 00:07:58,630
El formulario se va y para revelarlos debemos hacer clic aquí.

124
00:07:58,830 --> 00:08:00,480
Pero eso tampoco funciona.

125
00:08:00,960 --> 00:08:05,890
Comencemos haciendo que funcione y luego hablaremos de todas estas piezas diferentes y de lo

126
00:08:05,880 --> 00:08:07,570
que hacen para que funcione.

127
00:08:07,590 --> 00:08:10,550
Necesitamos ir e incluir el archivo javascript bootstrap.

128
00:08:10,830 --> 00:08:15,660
Entonces, si volvemos a los documentos de arranque, haremos clic en descargar.

129
00:08:15,780 --> 00:08:19,800
También hay un archivo Javascript que necesitamos que está aquí.

130
00:08:19,800 --> 00:08:24,460
Usaré la versión Cdn pero también se incluye dentro de la carpeta que descargaste.

131
00:08:24,510 --> 00:08:25,700
Simplemente se llama bootstrapped.

132
00:08:25,810 --> 00:08:26,220
Sí.

133
00:08:26,250 --> 00:08:29,890
O la versión minimizada arranca Mencius.

134
00:08:30,420 --> 00:08:36,210
Y agreguemos eso y lo haremos abajo en la parte inferior de nuestro cuerpo y guardaremos.

135
00:08:36,210 --> 00:08:38,280
Y sé que no hemos hablado de javascript.

136
00:08:38,380 --> 00:08:42,860
No sabes qué es un script y qué fuente aquí no importa.

137
00:08:42,900 --> 00:08:44,710
Simplemente vamos a conectarlo al bootstrap.

138
00:08:44,910 --> 00:08:46,550
Y ahora nuestra actualización

139
00:08:46,710 --> 00:08:52,590
¿Podemos resolver un pequeño problema que le mostraré aquí nos dice que bootstraps javascript

140
00:08:52,700 --> 00:08:53,470
requiere consulta.

141
00:08:53,790 --> 00:08:56,180
No se preocupe por qué es esto y cómo llegó a este mensaje.

142
00:08:56,250 --> 00:08:59,970
Pero solo quiero mostrártelo para que veas el mensaje real que recibimos.

143
00:08:59,970 --> 00:09:03,240
Necesitamos solicitar una consulta J de la que tampoco hayamos hablado.

144
00:09:03,580 --> 00:09:05,360
Pero es bastante fácil ir y obtener.

145
00:09:05,400 --> 00:09:07,140
No tenemos que escribir ningún javascript.

146
00:09:07,170 --> 00:09:08,830
No necesita saber ningún javascript.

147
00:09:08,830 --> 00:09:10,180
Solo tenemos que incluirlo.

148
00:09:10,230 --> 00:09:18,200
Entonces, todo lo que tenemos que hacer es buscar Jay Queries CDN, que está en el código que Jay dot

149
00:09:18,200 --> 00:09:23,890
com y aquí abajo deberá seleccionar la versión más reciente y copiar esta URL.

150
00:09:23,910 --> 00:09:30,150
Este es el archivo Querrey y luego volveremos aquí.

151
00:09:30,150 --> 00:09:32,560
Vamos a agregar otra de estas etiquetas de script.

152
00:09:32,640 --> 00:09:34,410
Básicamente copiando este código exacto.

153
00:09:34,410 --> 00:09:40,670
De hecho, haré eso para que sea más fácil duplicar esa línea exacta y cambie esta url para que sea la

154
00:09:40,680 --> 00:09:42,030
consulta de jey que eres.

155
00:09:42,610 --> 00:09:44,530
Si todo lo demás falla, simplemente puede escribir esto.

156
00:09:44,560 --> 00:09:51,220
No es tan malo si eres un l, pero tengo esto buscando Jay queery CDN y lo guardaré y

157
00:09:51,210 --> 00:09:56,290
esto tiene que venir antes del archivo javascript bootstraps porque se basa en una consulta.

158
00:09:56,560 --> 00:10:00,370
Entonces, una vez más, no se preocupe demasiado por cómo funciona la consulta de Jay.

159
00:10:00,450 --> 00:10:02,150
Todo esto surgirá dentro de unos minutos.

160
00:10:02,430 --> 00:10:06,550
Pero para obtener el máximo rendimiento de arranque y, en particular, las barras de navegación y el menú desplegable.

161
00:10:06,750 --> 00:10:13,210
Solo necesitamos tener estas dos líneas cada vez que la usemos, así que volveremos y actualizaremos.

162
00:10:13,230 --> 00:10:18,850
En primer lugar, se eliminan los menús que ahora funcionan, como se puede ver, ahora tenemos menús desplegables.

163
00:10:18,880 --> 00:10:24,430
No vamos a hablar de eso en este video, pero a medida que cambio el tamaño y obtengo esa hamburguesa.

164
00:10:25,050 --> 00:10:26,980
La hamburguesa ahora funciona cuando hago clic en ella.

165
00:10:26,980 --> 00:10:29,480
Cambia ese material oculto.

166
00:10:29,560 --> 00:10:36,850
Entonces, la forma en que funciona aquí, aquí está este pequeño punto de quiebre donde todo este

167
00:10:36,880 --> 00:10:43,280
contenido se esconde y todo lo que vemos es el encabezado y ese botón.

168
00:10:43,380 --> 00:10:48,870
luego, cuando hacemos clic en el botón, todo el contenido previamente oculto reaparece. Vamos a hacer que funcione.

169
00:10:48,880 --> 00:10:49,120
Y

170
00:10:49,120 --> 00:10:50,650
Ahora para nosotros

171
00:10:50,950 --> 00:10:55,930
Pero vamos a hacer una versión mucho menos complicada en la que solo queremos ocultar estos

172
00:10:55,930 --> 00:11:01,960
cuatro enlaces para que cuando cambiemos el tamaño de estos cuatro enlaces estén ocultos y luego sean realmente rápidos.

173
00:11:02,250 --> 00:11:07,830
Para hacer eso vamos a comenzar mirando cómo se logra en esta versión predeterminada este monstruo

174
00:11:07,840 --> 00:11:09,830
gigante de una barra de navegación.

175
00:11:10,380 --> 00:11:13,650
Y solo señalaré la línea importante aquí.

176
00:11:13,760 --> 00:11:22,090
Div colapsar todo lo que coloquemos dentro de este div se colapsará cuando accedamos al tamaño de Móvil para que no se convierta en el botón para nosotros.

177
00:11:22,090 --> 00:11:24,850
Barra de navegación del colapso de la clase de

178
00:11:24,850 --> 00:11:30,040
No hará el alternar en la reaparición en la clandestinidad, pero ocultará todo el contenido que pongamos

179
00:11:30,040 --> 00:11:33,470
dentro cuando acceda a esa tableta y a su tamaño móvil.

180
00:11:33,650 --> 00:11:38,500
Así que vamos a copiar esto y solo tenemos que envolverlo con el contenido que

181
00:11:38,500 --> 00:11:40,320
queremos ocultar y queremos ocultarlo aquí.

182
00:11:40,330 --> 00:11:49,980
Estos dos Juelz Entonces, los cuatro enlaces que queremos ocultar cuando alcanzamos ese tamaño de pantalla más pequeño.

183
00:11:50,440 --> 00:11:56,800
Así que agregue la etiqueta de cierre y guarde y hay una línea aquí y esto es importante y lo abordaré

184
00:11:56,830 --> 00:11:57,820
en un momento.

185
00:11:57,850 --> 00:12:01,230
No nos afectará todavía, pero si actualizamos.

186
00:12:01,690 --> 00:12:02,160
Verás.

187
00:12:02,170 --> 00:12:09,790
Ahora, cuando cambio el tamaño, hay un punto aquí donde todo el contenido dentro de la div del

188
00:12:09,790 --> 00:12:10,650
colapso desaparece.

189
00:12:10,680 --> 00:12:11,650
Ahora no vuelve a aparecer.

190
00:12:11,640 --> 00:12:13,180
No conseguimos esta hamburguesa

191
00:12:13,330 --> 00:12:16,940
No hacemos clic en nada, pero se ha colapsado, se ha ido.

192
00:12:17,050 --> 00:12:24,580
Y eso es porque agregamos en esta línea aquí el colapso de la barra de navegación del colapso de clase div.

193
00:12:24,630 --> 00:12:29,780
Lo siguiente que tenemos que hacer es agregar la hamburguesa y es un poco de código.

194
00:12:29,780 --> 00:12:33,010
Desafortunadamente, todavía es mucho mejor que si tuviéramos que hacerlo nosotros mismos.

195
00:12:33,280 --> 00:12:37,220
Pero la hamburguesa es en realidad todo esto aquí mismo.

196
00:12:37,800 --> 00:12:48,660
Así que voy a copiar eso y pegarlo dentro de una siesta o Hetter antes de que nuestro café no se contacte.

197
00:12:48,970 --> 00:12:52,420
Y ahorraremos, volveré a lo que hace.

198
00:12:53,320 --> 00:12:54,680
Vamos a actualizar.

199
00:12:55,140 --> 00:12:57,910
Y ahora si cambio el tamaño obtengo la hamburguesa.

200
00:12:58,120 --> 00:13:00,280
Aquí vamos.

201
00:13:00,310 --> 00:13:03,240
Ahora déjame explicarte un poco sobre cómo funciona.

202
00:13:03,250 --> 00:13:09,700
Entonces hay un botón y luego dentro de ese botón hay tres tramos y cada uno

203
00:13:09,700 --> 00:13:13,000
es responsable de hacer una de estas barras.

204
00:13:13,210 --> 00:13:18,510
Entonces, no es una imagen que estamos viendo aquí, en realidad cada equipo está creando esta pequeña spand que

205
00:13:18,670 --> 00:13:21,780
están siendo diseñados en esas barras angostas para hacer esa hamburguesa.

206
00:13:22,030 --> 00:13:26,530
Y luego, en cuanto a mostrar y ocultar el contenido cuando hacemos clic en él, lo

207
00:13:26,950 --> 00:13:34,310
que es realmente importante es que tenemos este atributo de destino de datos y lo que sea que esté configurado en nuestro caso, el ejemplo B-S.

208
00:13:34,310 --> 00:13:41,700
Ahora para nuestro colapso, una red de ejemplo de arranque para nuestro club así que cambiemos a sí.

209
00:13:42,180 --> 00:13:44,330
Nav. demo así como así.

210
00:13:44,470 --> 00:13:48,880
Entonces tenemos que cambiar la ID del contenido que queremos colapsar en realidad que queremos

211
00:13:48,880 --> 00:13:49,810
mostrar y ocultar.

212
00:13:49,870 --> 00:13:57,310
Así que lo cambiaré para que coincida con la demostración de nav.

213
00:13:57,340 --> 00:13:59,710
Observe una diferencia importante.

214
00:13:59,710 --> 00:14:05,860
No estamos agregando el Arctic Thor Así que es como CSI cuando seleccionamos algo con C dice que necesitamos usar

215
00:14:05,860 --> 00:14:11,420
ese Octa Thorpe para apuntar a un ID así que dejamos el ID como solo el texto del nombre.

216
00:14:11,440 --> 00:14:18,120
Ahora si la demostración aquí agregamos eso a Thorpe guardará la actualización.

217
00:14:18,120 --> 00:14:24,600
Ahora, si cambio el tamaño, obtenemos la hamburguesa y hacen clic en ella y funciona para alternar entre mostrar y esconder.

218
00:14:26,250 --> 00:14:27,040
Estupendo.

219
00:14:27,070 --> 00:14:32,400
Lo último que te mostrará es que si movemos algo fuera de este colapso.

220
00:14:32,470 --> 00:14:35,710
Así que tomemos estos enlaces aquí.

221
00:14:36,070 --> 00:14:44,100
La cuenta o el sobre y el contacto y simplemente movemos los que están aquí fuera del div del colapso y

222
00:14:44,110 --> 00:14:53,310
me actualizo pueden ver que no se colapsan en realidad permanecen allí y luego hago clic en eso y los otros dos que están

223
00:14:53,320 --> 00:14:55,710
en lugar del colapso son alternadas

224
00:14:55,720 --> 00:15:00,390
Ahora no estoy diciendo que esto se vea bien pero sí ilustra la importancia de ese colapso div. nuestro caso por diferentes enlaces a eso están a la derecha o a la izquierda.

225
00:15:00,630 --> 00:15:06,480
Entonces, sea lo que sea lo que sucedió al lado del colapso o lo que sea que tengamos en

226
00:15:06,490 --> 00:15:08,160
Todos colapsarán cada vez que lleguemos a ese tamaño móvil más pequeño.

227
00:15:08,160 --> 00:15:12,070
Y luego para hacer que vuelvan a aparecer, hacemos clic en este botón aquí y ese

228
00:15:12,070 --> 00:15:18,250
botón tiene un atributo de destino de datos y cualquier ID a la que corresponda se ocultará y se mostrará cuando hagamos clic en eso.

229
00:15:18,490 --> 00:15:23,570
Y esa es la idea aquí.

230
00:15:24,010 --> 00:15:25,930
Está bien, es una especie de maratón.

231
00:15:26,440 --> 00:15:28,230
Una gran cantidad de cosas que se usan para crear una barra de navegación bootstrap.

232
00:15:28,270 --> 00:15:30,750
archivo y diseccionando partes de él.

233
00:15:30,970 --> 00:15:36,940
Pero de nuevo, la forma en que llegamos fue simplemente copiando esto en nuestro

234
00:15:36,940 --> 00:15:37,450
Y así

235
00:15:37,540 --> 00:15:42,160
es como hacemos lo suficiente cada vez que tomamos ese código de ejemplo y descubrimos qué piezas necesitamos y vamos desde allí.

236
00:15:42,150 --> 00:15:44,080