1
00:00:03,650 --> 00:00:11,190
Acabamos de completar una discusión sobre la importancia de proporcionar navegación en su sitio web.

2
00:00:11,190 --> 00:00:15,920
También analizamos varias maneras diferentes en las que podemos proporcionar navegación en un sitio web.

3
00:00:15,920 --> 00:00:21,229
Ahora es hora de que veamos bootstrap y busquemos los componentes

4
00:00:21,229 --> 00:00:26,269
que bootstrap proporciona que nos permiten añadir navegación a nuestros sitios web.

5
00:00:26,269 --> 00:00:32,815
Dos componentes importantes de bootstrap es Navbar y Breadmigbs.

6
00:00:32,815 --> 00:00:37,610
Vamos a examinar ambos en este ejercicio.

7
00:00:37,610 --> 00:00:44,745
Comencemos añadiendo una barra de navegación a la parte superior de nuestra página web.

8
00:00:44,745 --> 00:00:50,065
Podemos hacerlo usando el componente Navbar que es parte de bootstrap.

9
00:00:50,065 --> 00:00:51,605
Entonces, ¿cómo empezamos?

10
00:00:51,605 --> 00:00:56,260
Vamos al cuerpo de nuestra página HTML.

11
00:00:56,260 --> 00:00:58,760
Así que aquí, tengo index.HTML abierto.

12
00:00:58,760 --> 00:01:00,495
Y en la parte superior,

13
00:01:00,495 --> 00:01:06,090
voy a agregar un elemento usando esa etiqueta HTML de navegación.

14
00:01:06,090 --> 00:01:10,330
Ahora la etiqueta HTML de navegación está destinada a proporcionar navegación.

15
00:01:10,330 --> 00:01:17,880
Por lo tanto, aprovechemos esta etiqueta y construyamos nuestra barra de navegación usando la etiqueta de navegación.

16
00:01:17,880 --> 00:01:19,645
Así que ahora, en la parte superior,

17
00:01:19,645 --> 00:01:22,055
voy a agregar esta etiqueta,

18
00:01:22,055 --> 00:01:30,040
poner el navegador y construir la barra de navegación alrededor de esta etiqueta de navegación.

19
00:01:30,040 --> 00:01:33,910
Entonces, una vez que agregamos esta etiqueta de navegación en index.HTML,

20
00:01:33,910 --> 00:01:39,590
entonces podemos seguir adelante y luego aplicar las clases de bootstraps a esta etiqueta de navegación.

21
00:01:39,590 --> 00:01:42,700
Entonces, aplico la barra de navegación de clase.

22
00:01:42,700 --> 00:01:47,485
Entonces, la clase navbar en bootstrap me permite crear una barra de navegación.

23
00:01:47,485 --> 00:01:50,730
Hay muchas formas diferentes de personalizar la barra de navegación,

24
00:01:50,730 --> 00:01:56,600
que tenemos un vistazo como clases adicionales que se agregarán a esta etiqueta de navegación.

25
00:01:56,600 --> 00:01:58,770
Junto con la barra de navegación,

26
00:01:58,770 --> 00:02:02,880
también agregamos en la siguiente clase que es navbar-dark.

27
00:02:02,880 --> 00:02:08,480
Ahora quiero que mi barra de navegación sea de color oscuro,

28
00:02:08,480 --> 00:02:09,985
con un fondo más oscuro.

29
00:02:09,985 --> 00:02:13,920
Porque eso va muy bien con el sitio web que acabo de diseñar.

30
00:02:13,920 --> 00:02:16,150
Podemos tener luz de barra de navegación,

31
00:02:16,150 --> 00:02:18,950
que es una barra de navegación de color más claro.

32
00:02:18,950 --> 00:02:23,775
Por lo tanto, puede elegir utilizar cualquiera de ellos en su página web.

33
00:02:23,775 --> 00:02:32,620
La siguiente clase que voy a usar es la clase navbar-expand-sm.

34
00:02:32,620 --> 00:02:36,870
Ahora, y también, especificaré el tamaño de pantalla por debajo

35
00:02:36,870 --> 00:02:42,064
del cual entra en existencia el comportamiento conmutable.

36
00:02:42,064 --> 00:02:45,165
Ahora, cuando digo navbar-expand-sm,

37
00:02:45,165 --> 00:02:48,480
eso significa que para pantallas pequeñas y extra pequeñas,

38
00:02:48,480 --> 00:02:51,370
estas barras de navegación se convertirán en una barra de navegación conmutable.

39
00:02:51,370 --> 00:02:57,080
Lo que significa que, se colapsará en esos tamaños de pantalla.

40
00:02:57,080 --> 00:03:00,520
Pronto aprenderá cómo funciona esto,

41
00:03:00,520 --> 00:03:02,930
cuando veamos cómo podemos agregar

42
00:03:02,930 --> 00:03:07,460
el plugin de colapso a la barra de navegación para habilitar ese tipo de comportamiento.

43
00:03:07,460 --> 00:03:10,970
Entonces, junto con un sm conmutable de barra de navegación,

44
00:03:10,970 --> 00:03:15,240
voy a aplicar un color de fondo a la barra de navegación inicialmente,

45
00:03:15,240 --> 00:03:18,570
que sería bg-primario.

46
00:03:18,570 --> 00:03:25,909
Ahora bg-primary es ese color primario que se define en su bootstrap.

47
00:03:25,909 --> 00:03:33,350
De forma predeterminada, esta es una versión de color azul utilizada por bootstraps.

48
00:03:33,350 --> 00:03:35,910
Así que voy a empezar con eso como mi color principal.

49
00:03:35,910 --> 00:03:42,350
Más tarde, personalizaré el color de mi barra de navegación usando algunas clases CSS.

50
00:03:42,350 --> 00:03:45,155
Además, también voy a aplicar

51
00:03:45,155 --> 00:03:50,255
otra clase llamada la parte superior fija a esa barra de navegación.

52
00:03:50,255 --> 00:03:55,210
Lo que hace fixed-top, es que fija la barra de navegación en la parte superior

53
00:03:55,210 --> 00:04:00,330
de la ventana del navegador donde se está representando esta página web.

54
00:04:00,330 --> 00:04:03,830
Incluso cuando se desplaza la página húmeda,

55
00:04:03,830 --> 00:04:07,870
la barra de navegación estaba hasta permanecer en la parte superior de la página.

56
00:04:07,870 --> 00:04:12,250
Simplemente puede usar la parte inferior fija para fijar

57
00:04:12,250 --> 00:04:18,235
la barra de navegación en la parte inferior de la ventana de su navegador o puede decir, superior estática.

58
00:04:18,235 --> 00:04:21,810
Y también, simplemente no puedes usar esta clase.

59
00:04:21,810 --> 00:04:23,140
Si no lo usas, la

60
00:04:23,140 --> 00:04:29,325
barra de navegación también se desplazará cuando la página web se desplace hacia arriba.

61
00:04:29,325 --> 00:04:36,670
En mi sitio web, elijo mantener la barra de navegación fija en la parte superior de la página.

62
00:04:36,670 --> 00:04:38,600
Hay muchas otras opciones

63
00:04:38,600 --> 00:04:43,920
disponibles que puede encontrar en la documentación de bootstraps.

64
00:04:43,920 --> 00:04:48,495
Así que este es un ejemplo del uso de la barra de navegación.

65
00:04:48,495 --> 00:04:51,645
Ahora, además, dentro de la barra de navegación,

66
00:04:51,645 --> 00:04:54,545
voy a incluir cualquier contenido que

67
00:04:54,545 --> 00:04:57,450
se vaya a utilizar en la barra de navegación dentro de un contenedor.

68
00:04:57,450 --> 00:05:02,880
Entonces aquí es donde usaré un elemento div aquí

69
00:05:02,880 --> 00:05:10,125
y aplicaré la clase contenedor a este elemento div. Por

70
00:05:10,125 --> 00:05:12,520
lo tanto, lo que esté encerrado allí,

71
00:05:12,520 --> 00:05:17,375
estará restringido al mismo ancho que el resto de mi página Web.

72
00:05:17,375 --> 00:05:20,575
Como recordará, utilicé la clase contenedor para

73
00:05:20,575 --> 00:05:24,870
definir la amplitud del contenido en mi página web,

74
00:05:24,870 --> 00:05:28,080
así que voy a aplicar lo mismo a mi barra de navegación también, para

75
00:05:28,080 --> 00:05:31,490
que la información de la barra de navegación se

76
00:05:31,490 --> 00:05:36,185
muestre dentro del mismo ancho que el resto de mi página web.

77
00:05:36,185 --> 00:05:41,225
Puede elegir no usar la clase contenedor en la barra de navegación, En cuyo caso,

78
00:05:41,225 --> 00:05:47,200
el contenido de la barra de navegación se extenderá por todo el ancho de la pantalla.

79
00:05:47,200 --> 00:05:49,055
Dentro de la barra de navegación,

80
00:05:49,055 --> 00:05:54,280
voy a agregar una clase a una etiqueta aquí.

81
00:05:54,280 --> 00:06:02,390
Esta clase que llamo como marca de navegación,

82
00:06:02,520 --> 00:06:09,170
me permite mostrar cierta información como información de marca en mi barra de navegación. Por

83
00:06:09,170 --> 00:06:11,110
lo tanto, si usted tiene una empresa, por ejemplo,

84
00:06:11,110 --> 00:06:13,050
puede mostrar el nombre de su empresa o

85
00:06:13,050 --> 00:06:16,040
el logotipo de su empresa utilizando la marca de navegación

86
00:06:16,040 --> 00:06:21,390
para que se muestre de manera prominente en su barra de navegación.

87
00:06:21,390 --> 00:06:23,370
Obviamente, cuando visita muchos sitios web,

88
00:06:23,370 --> 00:06:26,400
verá que el nombre de la empresa es visible en algún lugar en

89
00:06:26,400 --> 00:06:30,310
la barra de navegación de ese sitio web.

90
00:06:30,310 --> 00:06:33,085
Así que, permítanme añadir esa marca de navío.

91
00:06:33,085 --> 00:06:42,190
Esto también se puede vincular a la página de inicio de su sitio web.

92
00:06:42,190 --> 00:06:43,895
Así que, voy a dejar eso ahí.

93
00:06:43,895 --> 00:06:46,000
En las páginas restantes de mi sitio web,

94
00:06:46,000 --> 00:06:50,480
simplemente agregaré el href para traerme de vuelta a la página index.HTML,

95
00:06:50,480 --> 00:06:52,449
que es la página de inicio.

96
00:06:52,449 --> 00:07:00,109
Y dentro de aquí voy a añadir en el nombre de mi restaurante.

97
00:07:03,220 --> 00:07:06,890
Vamos a guardar los cambios y vamos a echar

98
00:07:06,890 --> 00:07:11,110
un vistazo rápido al estado actual de mi barra de navegación. Al

99
00:07:11,110 --> 00:07:13,710
ir a la página web en el navegador,

100
00:07:13,710 --> 00:07:21,150
ahora puede ver dónde está visible la barra de navegación en mi página web en el navegador.

101
00:07:21,150 --> 00:07:25,960
La barra de navegación está ahora en la parte superior de la página y

102
00:07:25,960 --> 00:07:30,490
puede ver que a medida que desplaza mi página,

103
00:07:30,490 --> 00:07:36,745
la barra de navegación sigue estando en la parte superior porque solía usar la clase superior fija.

104
00:07:36,745 --> 00:07:38,520
También puede ver

105
00:07:38,520 --> 00:07:45,460
la marca navbar que me permite mostrar el nombre del restaurante allí.

106
00:07:45,460 --> 00:07:50,310
Más tarde voy a reemplazar eso con el logo de este restaurante.

107
00:07:50,310 --> 00:07:56,010
Usted observa que la barra de navegación está parcialmente cubierta en el Jumbotron.

108
00:07:56,010 --> 00:08:01,395
Vas a arreglarlo un poco más tarde usando alguna personalización de CSS.

109
00:08:01,395 --> 00:08:07,255
Lo siguiente que voy a hacer es agregar algunos enlaces a mi barra de navegación, para

110
00:08:07,255 --> 00:08:13,060
que estos enlaces me lleven a las otras páginas de mi sitio web.

111
00:08:13,060 --> 00:08:14,790
Entonces, ¿cómo hacemos eso?

112
00:08:14,790 --> 00:08:17,575
Volviendo a index.HTML,

113
00:08:17,575 --> 00:08:24,490
voy a agregar un ul aquí,

114
00:08:24,490 --> 00:08:27,715
dentro del cual voy a declarar

115
00:08:27,715 --> 00:08:36,460
todos los diversos enlaces que se mostrarán en mi cuadro de navegación.

116
00:08:36,460 --> 00:08:43,590
Así que este ul a la que voy a aplicar la clase como navbar-nav.

117
00:08:43,590 --> 00:08:46,530
Entonces, esta es la clase que me ayudará a definir

118
00:08:46,530 --> 00:08:51,275
el conjunto de enlaces que se incluirán en mi barra de navegación.

119
00:08:51,275 --> 00:08:56,655
Y estos enlaces se mostrarán horizontalmente dentro de mi barra de navegación.

120
00:08:56,655 --> 00:09:01,660
El mr auto-class que también he aplicado al ul,

121
00:09:01,660 --> 00:09:05,740
se usa para especificar el margen derecho.

122
00:09:05,740 --> 00:09:08,590
Entonces, esta es una clase de utilidad que está disponible

123
00:09:08,590 --> 00:09:13,815
en bootstrap que me permite especificar el margen derecho.

124
00:09:13,815 --> 00:09:17,190
Así que si digo, mr-auto,

125
00:09:17,190 --> 00:09:19,390
lo que significa es que en el lado derecho,

126
00:09:19,390 --> 00:09:23,100
el margen derecho debe ser establecido tanto como sea posible.

127
00:09:23,100 --> 00:09:26,380
Lo que significa que el contenido se insertará lo más a la izquierda

128
00:09:26,380 --> 00:09:30,175
posible dentro de la barra de navegación.

129
00:09:30,175 --> 00:09:32,310
Dentro de esta lista desordenada,

130
00:09:32,310 --> 00:09:34,515
puedo usar elementos de lista para incluir

131
00:09:34,515 --> 00:09:38,775
los diversos enlaces que van a formar parte de mi barra de navegación.

132
00:09:38,775 --> 00:09:42,595
Así que allí, voy a agregar algunos enlaces allí

133
00:09:42,595 --> 00:09:48,900
y comenzaré especificando el primero allí con el enlace.

134
00:09:48,900 --> 00:09:51,830
Para cada elemento de la lista en su barra de navegación,

135
00:09:51,830 --> 00:09:56,110
va a aplicar la clase como elemento de navegación.

136
00:09:56,110 --> 00:10:03,780
Esto permite que estos elementos de la lista se muestren horizontalmente como enlaces en mi barra de navegación.

137
00:10:03,780 --> 00:10:06,055
Y luego dentro de aquí,

138
00:10:06,055 --> 00:10:10,640
puedo usar la etiqueta a para agregar

139
00:10:10,640 --> 00:10:16,140
el enlace real que formará parte de mi barra de navegación.

140
00:10:16,140 --> 00:10:19,600
Entonces dentro de allí uso la etiqueta a con

141
00:10:19,600 --> 00:10:28,730
la clase nav-link y esto también me permite usar el href.

142
00:10:30,260 --> 00:10:37,145
Atributo para definir el enlace allí.

143
00:10:37,145 --> 00:10:41,255
Y el primero que voy a incluir es Home.

144
00:10:41,255 --> 00:10:46,935
Por lo tanto, esto incluiría un elemento llamado Inicio en esta barra de navegación.

145
00:10:46,935 --> 00:10:51,900
Déjame copiar eso y luego pegarlo.

146
00:10:51,900 --> 00:10:55,475
Y luego editaremos algunos de estos porque quiero agregar

147
00:10:55,475 --> 00:11:00,630
cuatro diferentes a mi barra de navegación.

148
00:11:00,630 --> 00:11:02,110
El primero es Hogar.

149
00:11:02,110 --> 00:11:04,170
El segundo sería Acerca de.

150
00:11:04,170 --> 00:11:13,560
El tercero sería Menú que voy a construir como parte del próximo curso.

151
00:11:13,560 --> 00:11:16,630
Y el último será Contacto.

152
00:11:16,630 --> 00:11:25,495
Un sitio web típico de la compañía tendría enlaces como este en su barra de navegación.

153
00:11:25,495 --> 00:11:27,830
Así que con la adición de estos dos,

154
00:11:27,830 --> 00:11:30,915
ahora lo que puedo hacer es

155
00:11:30,915 --> 00:11:36,560
que podemos identificar explícitamente uno de estos enlaces como el enlace activo,

156
00:11:36,560 --> 00:11:39,600
lo que significa que cuando estás en esa página en particular,

157
00:11:39,600 --> 00:11:42,145
ese enlace en particular se puede resaltar.

158
00:11:42,145 --> 00:11:48,685
Así que para ello, aplicaremos aquí la clase llamada activa a uno de estos elementos de la lista.

159
00:11:48,685 --> 00:11:51,815
En este caso, dado que esta es la página index.html,

160
00:11:51,815 --> 00:11:56,085
estoy aplicando la clase activa al enlace de inicio allí.

161
00:11:56,085 --> 00:12:02,725
Esto completa mi barra de navegación en la página index.HTML.

162
00:12:02,725 --> 00:12:08,095
Una pequeña cosa que me gustaría arreglar aquí es que el enlace Acerca,

163
00:12:08,095 --> 00:12:12,130
quiero vincularlo a la

164
00:12:12,130 --> 00:12:16,965
página aboutus.HTML que ya hemos incluido en nuestro sitio web,

165
00:12:16,965 --> 00:12:19,680
porque ahí es donde quiero que lleve.

166
00:12:19,680 --> 00:12:23,795
Vamos a echar un vistazo rápido a nuestra barra de navegación de esta parte.

167
00:12:23,795 --> 00:12:25,985
Volviendo a nuestra barra de navegación,

168
00:12:25,985 --> 00:12:28,995
puede ver inmediatamente el resultado de incluir

169
00:12:28,995 --> 00:12:32,730
esos elementos en la lista desordenada allí.

170
00:12:32,730 --> 00:12:34,160
Por lo tanto, verá Inicio,

171
00:12:34,160 --> 00:12:36,500
Acerca de, Menú y Contacto allí,

172
00:12:36,500 --> 00:12:43,145
y cada uno de ellos es un enlace, pero este es un elemento de navegación aquí.

173
00:12:43,145 --> 00:12:48,740
Y tenga en cuenta cómo el Hogar se resalta aquí debido al uso de la clase activa.

174
00:12:48,740 --> 00:12:50,305
Por lo tanto, si hago clic en el Acerca de,

175
00:12:50,305 --> 00:12:52,990
debería llevarme al lanzamiento Acerca de.

176
00:12:52,990 --> 00:12:55,670
He aquí, y he aquí, ahí estamos.

177
00:12:55,670 --> 00:12:58,970
Pero me doy cuenta de que no tengo una forma de regresar,

178
00:12:58,970 --> 00:13:04,190
lo que significa que también necesito entregar esta barra de navegación a la página aboutus.HTML.

179
00:13:04,190 --> 00:13:07,330
Llegaremos allí en poco tiempo.

180
00:13:07,330 --> 00:13:11,360
Por ahora, voy a navegar rápidamente usando el botón Atrás de

181
00:13:11,360 --> 00:13:16,585
mi navegador de vuelta a mi página index.HTML.

182
00:13:16,585 --> 00:13:21,030
Una cosa que también quería demostrarles fue cómo

183
00:13:21,030 --> 00:13:27,525
esta barra de navegación colapsará para tamaños de pantalla pequeños y extra pequeños.

184
00:13:27,525 --> 00:13:35,570
Entonces, vamos a encender la vista usando la Vista sensible,

185
00:13:35,570 --> 00:13:37,960
y luego déjame ir al Galaxy S5.

186
00:13:37,960 --> 00:13:43,250
Y me di cuenta de que cuando uso el Galaxy S5 de esta manera, se

187
00:13:43,250 --> 00:13:50,000
puede ver que esto se muestra antes de lo que ya está cubriendo la pantalla.

188
00:13:50,000 --> 00:13:52,145
Ese no es el comportamiento que quiero.

189
00:13:52,145 --> 00:14:00,075
Quiero poder ocultar esto cuando estoy viendo esto en una pantalla pequeña y extra pequeña.

190
00:14:00,075 --> 00:14:04,220
Y entonces tal vez agrego un botón aquí que puedo usar

191
00:14:04,220 --> 00:14:08,450
para activar y desactivar la visualización de estos enlaces.

192
00:14:08,450 --> 00:14:13,170
Usted ha visto tales cosas en los sitios web móviles.

193
00:14:13,170 --> 00:14:16,935
¿ Cómo hacemos esto en bootstrap?

194
00:14:16,935 --> 00:14:19,645
Vayamos a ese paso siguiente.

195
00:14:19,645 --> 00:14:24,300
Volviendo a nuestra barra de navegación aquí.

196
00:14:24,300 --> 00:14:27,910
Permítanme agregar un botón allí,

197
00:14:27,910 --> 00:14:33,840
que actuará como el botón de alternar para mostrar y ocultar

198
00:14:33,840 --> 00:14:42,225
mis enlaces de mi barra de navegación cuando se muestre en pantallas extra inteligentes y pequeñas.

199
00:14:42,225 --> 00:14:43,615
Entonces, para agregar allí,

200
00:14:43,615 --> 00:14:47,645
permítanme agregar un botón y aplicar algunas clases a este botón.

201
00:14:47,645 --> 00:14:54,285
Vamos a discutir más acerca de los botones en bootstrap en la siguiente lección.

202
00:14:54,285 --> 00:14:57,515
Pero para agregar un botón en bootstrap,

203
00:14:57,515 --> 00:15:03,770
aplicaría la clase para este botón en particular como navbar-toggler.

204
00:15:04,450 --> 00:15:07,420
Así que esto es un navbar-toggler.

205
00:15:07,420 --> 00:15:09,400
Entonces, como su nombre lo indica,

206
00:15:09,400 --> 00:15:14,970
ya está empezando a entender lo que este botón va a hacer en este caso.

207
00:15:14,970 --> 00:15:22,650
Y luego agregaría el tipo como botón para indicar que esto está actuando como un botón.

208
00:15:22,650 --> 00:15:31,360
Y luego alternar los datos como colapso.

209
00:15:31,360 --> 00:15:36,070
Ahora, este atributo de alternancia de datos que verá aquí es en realidad

210
00:15:36,070 --> 00:15:42,400
un uso de componentes de JavaScript en bootstrap.

211
00:15:42,400 --> 00:15:48,100
Vamos a ver este tipo de atributos de barra de guiones de datos más en el siguiente módulo,

212
00:15:48,100 --> 00:15:50,875
donde veremos los componentes de JavaScript de arranque.

213
00:15:50,875 --> 00:15:55,225
La barra de navegación requiere uno de esos componentes de JavaScript para poder activar

214
00:15:55,225 --> 00:15:59,980
y desactivar mis enlaces en mi barra de navegación. Por lo tanto,

215
00:15:59,980 --> 00:16:03,825
esa es la razón por la que introduje rápidamente este concepto aquí,

216
00:16:03,825 --> 00:16:05,800
pero volveremos a examinar

217
00:16:05,800 --> 00:16:12,020
este bootstraps componentes JavaScript más en el siguiente módulo.

218
00:16:12,020 --> 00:16:14,420
Por lo tanto, el colapso de alternancia de

219
00:16:14,420 --> 00:16:24,610
datos y luego el objetivo de datos como #Navbar.

220
00:16:24,610 --> 00:16:30,660
Ahora, voy a introducir otro div con el ID como barra de navegación.

221
00:16:30,660 --> 00:16:33,470
Entonces, cuando especifico una fecha o destino #Navbar,

222
00:16:33,470 --> 00:16:38,560
eso se refiere a la ID de ese otro elemento que va a ser

223
00:16:38,560 --> 00:16:44,025
el objetivo de este botón en particular aquí.

224
00:16:44,025 --> 00:16:47,625
Entonces, esa es la parte que agrego al fondo.

225
00:16:47,625 --> 00:16:52,340
Y también, quiero que el botón muestre algo aquí.

226
00:16:52,340 --> 00:16:56,970
Y por lo general, cuando ves este tipo de botones en los sitios web móviles,

227
00:16:56,970 --> 00:16:59,730
contendría líneas libres allí,

228
00:16:59,730 --> 00:17:04,310
por lo que normalmente se llama como el icono de alternar Navbar.

229
00:17:04,310 --> 00:17:11,630
Por lo tanto, voy a incluir un icono especial que

230
00:17:11,630 --> 00:17:19,660
se incluye en bootstrap, llamado icono navbar-toggler.

231
00:17:19,660 --> 00:17:23,395
Entonces, si aplico esta clase a la etiqueta span,

232
00:17:23,395 --> 00:17:29,050
entonces eso introducirá un icono de navbar-toggler a mi botón aquí.

233
00:17:29,410 --> 00:17:32,130
Por lo tanto, eso introduce un botón.

234
00:17:32,130 --> 00:17:34,980
Vamos a ver cómo se ve esto en un corto tiempo.

235
00:17:34,980 --> 00:17:36,780
Ahora, cuando hago clic en este botón,

236
00:17:36,780 --> 00:17:41,140
quiero poder mostrar y ocultar estos enlaces.

237
00:17:41,140 --> 00:17:43,140
Para permitirme hacer eso,

238
00:17:43,140 --> 00:17:50,780
lo que voy a hacer es rodear este ul con un div aquí.

239
00:17:51,070 --> 00:17:57,585
Entonces, voy a entrar e introducir un div alrededor de este ul.

240
00:17:57,585 --> 00:17:59,280
Y a este div,

241
00:17:59,280 --> 00:18:04,850
aplicaré la clase como colapso,

242
00:18:04,850 --> 00:18:15,895
y luego navbar-colapso, y luego le daré una identificación como Navbar.

243
00:18:15,895 --> 00:18:20,115
Ahora, está empezando a ver la correlación entre

244
00:18:20,115 --> 00:18:26,300
estas clases y el ID y lo que declaré en el alternador de datos y el destino de datos.

245
00:18:26,300 --> 00:18:32,750
Entonces, aquí el objetivo de datos que especifico como #Navbar y por lo tanto el ID dado a este div es barra de navegación.

246
00:18:32,750 --> 00:18:35,640
Y especifico el conmutador de datos como colapso.

247
00:18:35,640 --> 00:18:40,440
Collapse es uno de los componentes de JavaScript de arranque,

248
00:18:40,440 --> 00:18:43,955
que veremos con más detalle en el siguiente módulo.

249
00:18:43,955 --> 00:18:50,780
Entonces, adjuntando esto dentro del div para pantallas pequeñas y extra pequeñas,

250
00:18:50,780 --> 00:18:54,860
esto estaría oculto por defecto,

251
00:18:54,860 --> 00:18:56,520
pero cuando hago clic en el botón,

252
00:18:56,520 --> 00:19:01,445
el contenido de este div se revelará en la pantalla.

253
00:19:01,445 --> 00:19:09,540
Permítanme también añadir un mr-auto a la clase navarbar-brand allí para

254
00:19:09,540 --> 00:19:18,775
que introduzca automáticamente un margen derecho suficiente a esta marca navarbar-.

255
00:19:18,775 --> 00:19:22,495
Ahora, vamos a echar un vistazo a esto en nuestro navegador.

256
00:19:22,495 --> 00:19:25,270
Al ir al navegador, ahora puede ver cómo

257
00:19:25,270 --> 00:19:31,370
mi barra de navegación está colapsada en tamaños de pantalla pequeños y extra pequeños.

258
00:19:31,370 --> 00:19:35,925
Y observe este botón en el lado izquierdo.

259
00:19:35,925 --> 00:19:38,005
Cuando hago clic en el botón,

260
00:19:38,005 --> 00:19:43,805
los enlaces de mi barra de navegación se muestran y ocultan.

261
00:19:43,805 --> 00:19:51,360
Este es el comportamiento que quiero para la implementación receptiva de mi barra de navegación.

262
00:19:51,360 --> 00:19:55,375
Si cambio a una

263
00:19:55,375 --> 00:20:00,925
pantalla normal y más grande, la barra de navegación se muestra completamente incluyendo los enlaces.

264
00:20:00,925 --> 00:20:07,190
Pero cuando veo lo mismo en una pantalla más pequeña como esta,

265
00:20:07,190 --> 00:20:10,430
entonces los enlaces de la barra de navegación están ocultos detrás de

266
00:20:10,430 --> 00:20:15,020
este botón y luego se activarán y desactivarán haciendo clic en ese botón.

267
00:20:15,020 --> 00:20:18,190
Así que ese es el comportamiento de respuesta que puede

268
00:20:18,190 --> 00:20:22,870
incorporar en su barra de navegación en su sitio web.

269
00:20:22,870 --> 00:20:27,285
Ahora que hemos completado la barra de navegación en mi página index.HTML,

270
00:20:27,285 --> 00:20:32,015
quiero poder introducir la misma barra de navegación en la página aboutus.HTML.

271
00:20:32,015 --> 00:20:35,540
Antes de que lleguemos, vamos al pie de página aquí.

272
00:20:35,540 --> 00:20:38,250
Y luego te das cuenta de que en el pie de página,

273
00:20:38,250 --> 00:20:39,870
tenemos estos enlaces.

274
00:20:39,870 --> 00:20:43,265
Quiero poder actualizar este enlace también para apuntar

275
00:20:43,265 --> 00:20:48,450
a aboutus.HTML para que incluso haciendo clic en el enlace en mi pie de página,

276
00:20:48,450 --> 00:20:51,090
siga yendo a la página acerca.

277
00:20:51,090 --> 00:20:53,780
Ahora, volviendo aquí,

278
00:20:53,780 --> 00:21:02,320
lo que voy a hacer es simplemente copiar este código de esta barra de navegación desde aquí.

279
00:21:02,870 --> 00:21:13,520
Y luego, vaya a la página aboutus.HTML y luego pegue eso en mi página aboutus.HTML.

280
00:21:13,520 --> 00:21:17,145
No solo eso, necesito hacer algún ajuste a esto,

281
00:21:17,145 --> 00:21:20,750
porque esto está ahora en la página aboutus.HTML.

282
00:21:20,750 --> 00:21:25,105
Así que obviamente, hay algunas cosas que necesito actualizar.

283
00:21:25,105 --> 00:21:29,875
En primer lugar, esta marca de navegación que debería llevarme de vuelta

284
00:21:29,875 --> 00:21:35,485
a mi página de inicio ahora debería actualizarse como index.HTML aquí.

285
00:21:35,485 --> 00:21:43,045
Y luego, el elemento de lista aquí ahora el segundo es la página principal de nuevo,

286
00:21:43,045 --> 00:21:51,165
quiero actualizar eso a index.HTML allí y luego el segundo enlace a la acerca,

287
00:21:51,165 --> 00:21:53,610
porque esta es la página aboutus.HTML,

288
00:21:53,610 --> 00:21:58,480
voy a volver a ponerlo en ese hash allí y luego eliminaré

289
00:21:58,480 --> 00:22:06,045
la clase activa de la primera y, a continuación, aplicar la clase activa al segundo elemento,

290
00:22:06,045 --> 00:22:11,520
porque esta es la página Acerca de y debe ser la que está resaltada.

291
00:22:11,520 --> 00:22:16,705
De nuevo, yendo al pie de página de Acerca de la página.

292
00:22:16,705 --> 00:22:22,870
En el pie de página, haré las mismas actualizaciones a los enlaces aquí para que

293
00:22:22,870 --> 00:22:29,525
la página principal me lleve de vuelta a index.HTML y luego me deje guardar los cambios.

294
00:22:29,525 --> 00:22:34,740
Así que ahora mi página Acerca de también se actualiza correctamente. Al

295
00:22:34,740 --> 00:22:36,390
ir al navegador,

296
00:22:36,390 --> 00:22:41,220
ahora puede ver que estoy en mi página de inicio y luego cuando haga clic en la página acerca,

297
00:22:41,220 --> 00:22:42,795
iré a la página Acerca de.

298
00:22:42,795 --> 00:22:48,710
Tenga en cuenta cómo se muestra esa misma barra de navegación en Acerca de la página,

299
00:22:48,710 --> 00:22:51,090
por lo que tiene sobre ser resaltado porque

300
00:22:51,090 --> 00:22:53,660
aplicé la clase activa a eso y luego puedo

301
00:22:53,660 --> 00:22:58,770
volver a mi página de inicio haciendo clic en la marca narvar-o en Inicio.

302
00:22:58,770 --> 00:23:02,115
Así que vamos a hacer clic en la marca narvar-y estamos de vuelta en nuestra

303
00:23:02,115 --> 00:23:06,210
página principal o Inicio o index.HTML.

304
00:23:06,210 --> 00:23:13,180
Por lo tanto, ahora la navegación está configurada correctamente tanto en la página principal como en la página Acerca de.

305
00:23:13,180 --> 00:23:17,810
Un par de cosas adicionales que voy a hacer es aplicar si ves que

306
00:23:17,810 --> 00:23:23,480
es la clase que puedo cambiar el color de mi barra de navegación

307
00:23:23,480 --> 00:23:26,340
y también me gustaría agregar

308
00:23:26,340 --> 00:23:32,595
una miga de pan a esta Acerca de la página y para que la miga de pan también me dé otra forma

309
00:23:32,595 --> 00:23:36,950
de navegar de vuelta a mi página principal y también indicar

310
00:23:36,950 --> 00:23:42,170
la jerarquía en mi sitio web donde estoy en este momento.

311
00:23:42,170 --> 00:23:45,505
Así que vamos a hacer esos dos pasos a continuación.

312
00:23:45,505 --> 00:23:49,835
Volviendo a ese editor en styles.css.

313
00:23:49,835 --> 00:23:52,765
Voy a añadir un par de clases más aquí.

314
00:23:52,765 --> 00:23:58,030
Te das cuenta de que mi barra de navegación estaba escondiendo parte del jumbotron.

315
00:23:58,030 --> 00:23:59,590
Para evitar eso,

316
00:23:59,590 --> 00:24:01,705
lo que voy a hacer es a mi cuerpo,

317
00:24:01,705 --> 00:24:06,110
voy a dar un relleno de 50 píxeles en

318
00:24:06,110 --> 00:24:11,505
la parte superior para que esos 50 píxeles se dejen para que la barra de navegación cubra.

319
00:24:11,505 --> 00:24:14,580
Siempre que esté utilizando una barra de navegación superior fija, es

320
00:24:14,580 --> 00:24:17,580
una buena idea dar este relleno al cuerpo de

321
00:24:17,580 --> 00:24:20,270
su página web para que la navegación no cubra

322
00:24:20,270 --> 00:24:24,435
el elemento superior del cuerpo de su página web.

323
00:24:24,435 --> 00:24:29,675
Por lo tanto, los restantes voy a dejar como

324
00:24:29,675 --> 00:24:39,155
píxeles cero y también el índice z para mi cuerpo como cero.

325
00:24:39,155 --> 00:24:43,485
Desde su conocimiento de CSS, entiende lo que hace el índice z

326
00:24:43,485 --> 00:24:48,865
y el siguiente que voy a hacer es

327
00:24:48,865 --> 00:24:55,580
sobrecargar la clase navbar-dark agregando un color más para

328
00:24:55,580 --> 00:24:59,750
la clase de barra de navegación y el color que voy

329
00:24:59,750 --> 00:25:06,490
a elegir es 512DA8.

330
00:25:06,490 --> 00:25:15,275
Este es un color púrpura oscuro que se ve muy bien en mi sitio web.

331
00:25:15,275 --> 00:25:21,505
De hecho, Si tienes interés donde encontré estos colores puedes visitar

332
00:25:21,505 --> 00:25:29,665
www.android.com y luego buscar su documentación para el diseño del material y allí,

333
00:25:29,665 --> 00:25:33,325
tienen sugerencias sobre cómo los colores se pueden usar

334
00:25:33,325 --> 00:25:38,965
en tu aplicación Android, pero lo mismo se aplica incluso a un sitio web,

335
00:25:38,965 --> 00:25:46,675
por lo que es donde fui y seleccioné estos colores para ser utilizados en mi sitio web.

336
00:25:46,675 --> 00:25:51,060
Entonces, aplicando esto, ahora cuando hago esto,

337
00:25:51,060 --> 00:25:55,740
tengo que volver a mi página index.HTML y

338
00:25:55,740 --> 00:26:01,095
luego desde la barra de navegación debería eliminar este bg-primary.

339
00:26:01,095 --> 00:26:09,320
De lo contrario, el color que sugerí en el CSS no se aplicará a esto.

340
00:26:09,320 --> 00:26:14,185
Del mismo modo, vaya a la página aboutus.HTML y luego desplácese a

341
00:26:14,185 --> 00:26:20,850
la barra de navegación y luego elimine bg-primary de eso también.

342
00:26:21,610 --> 00:26:26,580
Ahora, mientras estoy en la página aboutus.HTML,

343
00:26:26,580 --> 00:26:34,080
permítanme introducir una miga de pan en mi contenedor,

344
00:26:34,080 --> 00:26:36,310
la primera fila de mi contenedor allí.

345
00:26:36,310 --> 00:26:39,405
Así que aquí es donde el título Acerca de nosotros estaba

346
00:26:39,405 --> 00:26:45,120
allí, así que allí voy a entrar e introducir un ol.

347
00:26:45,260 --> 00:26:53,560
Solo estoy usando la etiqueta ol como una forma de introducir la miga de pan.

348
00:26:53,560 --> 00:26:59,025
Puede usar incluso un div para esto y seguirá funcionando bien.

349
00:26:59,025 --> 00:27:06,050
Sucede que el ejemplo en la documentación de bootstraps usó un ol, así que

350
00:27:06,050 --> 00:27:14,030
me quedo con que incluso un div simple también funcionará bien aquí.

351
00:27:14,030 --> 00:27:20,895
Por lo tanto, digo ol clase col-12 miga de pan.

352
00:27:20,895 --> 00:27:23,200
Entonces se aplicaron las clases de miga de pan y

353
00:27:23,200 --> 00:27:26,825
no el significado col-12 que extendió toda la pantalla.

354
00:27:26,825 --> 00:27:33,500
Y ahí dentro, voy a entrar y añadir dos elementos de la lista.

355
00:27:34,250 --> 00:27:39,625
Ahora ves por qué el uso de ol es útil aquí,

356
00:27:39,625 --> 00:27:48,565
porque puedo usar los elementos de la lista para describir el elemento de la miga de pan.

357
00:27:48,565 --> 00:27:50,725
Entonces, elemento de miga de pan aquí,

358
00:27:50,725 --> 00:27:55,020
así que incluyo un elemento de la ruta de pan y luego dentro de allí usaré

359
00:27:55,020 --> 00:28:02,380
la etiqueta A para definir un enlace de vuelta a mi página de inicio.

360
00:28:02,380 --> 00:28:07,275
Así que digo, «A» y luego a esta A,

361
00:28:07,275 --> 00:28:12,010
le doy el href como index.HTML y luego lo

362
00:28:12,010 --> 00:28:17,815
incluyo en mi primera miga de pan y luego, después de esto,

363
00:28:17,815 --> 00:28:25,660
el siguiente que voy a incluir es otro elemento de la lista y

364
00:28:25,660 --> 00:28:34,700
el segundo elemento de la lista aplicaré la clase como elemento de miga de pan y activo.

365
00:28:34,700 --> 00:28:40,900
Así que tenga en cuenta el uso de la clase activa aquí y luego dentro de allí diré «acerca de

366
00:28:40,900 --> 00:28:45,090
nosotros» No necesito un enlace aquí porque ya estoy en la página,

367
00:28:45,090 --> 00:28:49,425
por lo que no necesita ser incluido para este elemento de la lista.

368
00:28:49,425 --> 00:28:51,010
Vamos a guardar los cambios,

369
00:28:51,010 --> 00:28:54,910
para que pueda ver cómo se ha introducido la miga de pan en esta

370
00:28:54,910 --> 00:28:59,555
página particular Acerca de nosotros aquí.

371
00:28:59,555 --> 00:29:04,410
Vamos a echar un vistazo a la página web resultante.

372
00:29:04,410 --> 00:29:11,320
Ir a mi página web, ahora puede ver que el color de la barra de navegación

373
00:29:11,320 --> 00:29:14,310
ahora ha cambiado al púrpura oscuro que se introducen

374
00:29:14,310 --> 00:29:17,900
a través del CSS y esto se ve bien en la pantalla aquí.

375
00:29:17,900 --> 00:29:20,780
Morado oscuro, seguido de un púrpura más claro y luego en

376
00:29:20,780 --> 00:29:24,300
la parte inferior púrpura aún más claro para mi pie de página.

377
00:29:24,300 --> 00:29:27,240
Bueno, no soy diseñador,

378
00:29:27,240 --> 00:29:33,875
pero esto es lo mejor que pude encontrar en términos de agregar cerca de sitios web.

379
00:29:33,875 --> 00:29:38,660
Como saben por la historia, los hombres son daltónicos.

380
00:29:38,660 --> 00:29:42,750
Así que tenemos muy mal gusto en los colores.

381
00:29:42,750 --> 00:29:48,065
Si estás casado, tu esposa te lo recordará.

382
00:29:48,065 --> 00:29:52,680
Vayamos a la página Acerca de y veamos cómo se ve.

383
00:29:52,680 --> 00:29:55,960
Así que esta es la página Acerca de y en la página Acerca de usted puede

384
00:29:55,960 --> 00:29:59,520
ver la barra de navegación con el color correcto

385
00:29:59,520 --> 00:30:06,925
allí y anotar la miga de pan incluida en el Acerca de nosotros aquí abajo.

386
00:30:06,925 --> 00:30:10,910
Así que puedes ver el Inicio que te lleva de vuelta a la página de índice y

387
00:30:10,910 --> 00:30:15,020
luego Acerca de nosotros como viste aplicamos enlace

388
00:30:15,020 --> 00:30:16,655
activo, clase activa a este.

389
00:30:16,655 --> 00:30:19,500
Así es como se muestra el Acerca de nosotros y la Página de inicio.

390
00:30:19,500 --> 00:30:23,770
Por lo tanto, este es el estilo de miga de pan predeterminado utilizado

391
00:30:23,770 --> 00:30:29,450
en bootstrap y si hago clic en la página principal volveré a mi página principal.

392
00:30:29,450 --> 00:30:35,585
Con esto completamos este ejercicio en barra de navegación y pan rallado.

393
00:30:35,585 --> 00:30:42,640
Este es un buen momento para que hagas un commit git con el mensaje «barra de navegación y pan».