Comenzaremos a trabajar ahora con lo que son las barras de navegación y los "breadcrumbs", que es muy importante esto, para situar al usuario dentro de las secciones, que va a tener tu proyecto, tu sitio. Y de ahà poder desplazarse. Es un punto de referencia, incluso a nivel visual, con lo cual es importante que ahà aparezca tu logo, tu proyecto y que la responsividad, es decir, este uso, para hacer a nivel celulares y para otro tipo de dispositivo, funcione correctamente. Empecemos a trabajar. Comenzaremos definiendo, nuestra barra de navegación. Vamos a definir con el componente "nav". Aquà adentro tenemos que definirle las clases, la primera clase va a ser, indicarle que utilizaremos "navbar". Luego le diremos el esquema de colores que vamos a usar. En este caso vamos a usar el oscuro. Por último, vamos a definirle la referencia, el link al tÃtulo que le vamos a poner, al nombre del proyecto, que vamos a poner. "Navbar-brand", se llama la clase, y a "hoteles". Vamos a poner hoteles directamente. Faltó el "href". Y ahà estamos. Tenemos nuestra barra de navegación. Con el sistema de colores oscuros. Tendrás dentro de "bootstrap", acá está en la parte de la documentación de barra de navegación, vas a poder elegir algunos otros, también, las que mejor prefieras. También, si lo puedes especificar, con los estilos en lÃnea, directamente defines un componente. Nosotros vamos a usar el esquema oscuro y fÃjate, lo primero que quiero que notes; la barra de navegación está al tope de la página y si nosotros nos desplazamos hacia el final, dejamos de ver esta barra. Si te interesa que quede fija, "bootstrap" nos brinda una clase, que es "fixed-top", que es para decirle a la barra, indicarle que queremos que quede fija, por más que nos desplacemos, fijate, ¿está bien? Ahora, no se si te diste cuenta, pero ésto de alguna manera a la página, le come una parte del elemento, de alguna manera los componentes que están a continuación de esta barra, como que quedan por debajo. Mirá, vamos a quitarlo para que te des cuenta. ¿Ves el alto que tiene el Jumbotrón? Ahora le vamos a volver a poner el "fixed-top" y ahà queda oculto. ¿Cómo lo podemos corregir? Bueno, una forma sencilla es, directamente, ponerle un margen a la barra directamente, ¿no? O al "jumbotron", se te abre un margen que podemos probar definirlo aquÃ, "margin-top", y pÃxeles. Y probar cómo va quedando, podemos ponerle un poco más. Y ahà vamos viendo cómo queda. De todas formas ésto, que usamos aquà para probar, después lo volcamos en la clase que tenemos, "margin-top", 50 pÃxeles. Y fÃjate que ya nos quedó correctamente. Pasamos a agregar algunos "item" más, y vemos la responsividad de la barra de navegación. Bien, pasemos a agregar elementos y secciones a nuestra barra de navegación. Voy a copiar las instrucciones que estuve trabajando recién y te voy a comentar lo que fui agregando. Por un lado, empezamos en esta parte, agrego un "div", que va a tener dos clases "collapse" y "navbar-collapse", que esto van a indicar que es contenido colapsable, es decir, se va a ocultar para lo que es ya la forma responsive de manejar este tipo de navegación. Le pongo un "id", es importante este "id", nuevamente, puede ser cualquier cosa, pero después, lo vamos a usar en una sección más arriba y, luego, defino una lista que tengo que utilizar las clases "navbar-nav" y "mr-auto" que es para el manejo de los de los márgenes. Y, luego, cada uno de los Ãtems, de vuelta van a tener la clase "nav-item", y acabo de indicar cuál es que quiero que esté activo, para mostrarle al usuario dónde está parado, a modo de "breadcrumb", y luego el link, ¿no?, que le incluimos incluso la clase "nav-link", para que no se vea como con los estilos de un link, de una página url, en azul, con el subrayado, ¿no? Ésto ya nos permite que lo manejemos con los estilos acorde al sitio, lo que queremos hacer. Y aquà agregue, cinco secciones a nuestro sitio; la "home", nosotros, precios, términos y condiciones y contacto. Las mismas como definido, en el "footer". Luego, lo que agregamos es la parte de un botón, que es éste que vas a ver acá, que ya aparece con el logo tÃpico de un celular. Gusano celular o mejor dicho, para colapsar contenido. Donde utilizamos varias clases, ésto no hace falta que te las acuerdes de memoria, en la documentación de "bootstrap", en la sección de barra de navegación las va a ver. Que es "navbar-toggler", para decirle que ésto va a hacer collapse y va a ser el tipo de botón que queremos que se maneje. Aquà agregamos un icono, que lo pusimos con la clase, con estas tres rayitas. Por supuesto que, puedes poner cualquiera, nosotros hemos definido éste. Y acá empezamos a agregarle con el "data-toggle", este es el "data atribute", "Toggle", "Toggle" ponemos collapse, para especificarle a "bootstrap", cómo va a ser el comportamiento que queremos darle. El "target", que esto especifica quién es el que va a activar esta acción y fÃjate, que acá le ponemos el mismo "id", que todo el contenido que va a tener nuestra barra de navegación. Bueno, y después los tÃpicos "aria-controls", "aria-expanded" y "aria-label", para indicar en otros formatos cómo va a ser, cuál es el componente que estamos definiendo, ¿no? Bien, si tocamos aquÃ, podemos ver que se despliega. Te voy a quitar la consola como para ver bien como se está moviendo y acá vas a ver que aparece el "home" en activo y el resto de los items en gris, indicando que no son las páginas activas que estamos teniendo. FÃjate que no se despliegan acá los Ãtems. ¿Éso porque es? Bueno, justamente, porque lo que nos está faltando es decirle de forma responsive, cuándo queremos que ésto se active, y aquà tenemos una clase que es "expand", y acá puedes especificarle "large", "medium" o "small". Lo mismo que en cualquier botón, fÃjate que acá lo podemos ver. Si vamos achicando la página, ahà se activó. Podemos modificarle si es "large", obviamente, se va a activar antes, y si es "small" recién cuando sea muy chiquitito. Bien, hasta aquà podemos ver cómo utilizar la barra navegación, agregarle el botón de collapse, para hacerlo responsive, y cómo vincular contenido con nuestra sección de la barra. Lo que vamos a hacer en el paso siguiente, es agregar una página para lo que es, al menos, la sección de nosotros y algún texto, alguna referencia que vamos a querer poner, solo a modo de ejemplo y ver cómo podemos ir moviéndonos de una página a otra, mostrando en activo el Ãtem que queremos destacar. Bien, creemos alguna página más, asà trabajamos con la navegabilidad, para desplazar más de una página a otra. Lo que vamos a hacer es, en principio copiar la página Ãndex. Le ponemos el nombre about. FÃjate que, es exactamente igual, lo que queremos cambiar aquà es todo el contenido. TenÃan puesto un "Lorem Ipsum", si no lo conoces el "Lorem Ipsum", es, se le suele decir "Lorem Ipsum", es un texto en latÃn, que uno suele usar cuando hace un "template", y quiere mostrar que va texto en alguna parte, como es lo que queremos hacer nosotros, que no es ponernos ahora a diseñar exactamente la página del about, de nosotros. Y eso se utiliza para disponer, justamente, contenido y que quede algo más que se entienda clara cuál es la intención del texto que va a estar ubicado. Un sitio que es www.lipsum.com, que acá puedes generar diferentes "Lorem Ipsum", como vos quieras, ya que te va a generar, y lo vas a ir generando y esto después lo puedes copiar y pegar en el sitio como hicimos nosotros recién, y utilizarlo, ¿no? También, podés elegir textos en diferentes idiomas y demás. Volvamos a nuestro sitio. Entonces, acá estamos en la sección del about, aquà lo que vamos a hacer que, en esta página el item activo sea "nosotros". Y lo que nos falta agregar, es que el "ref", referencia justamente, al Index HTML y en Ãndex HTML. Vamos a hacer que el "nosotros", referencie al about. Revisemos que esté, el servidor corriendo, si no, obviamente, nada de esto va a funcionar. Y acá tenemos el "nosotros" y a "home". Y podemos ir cambiando de un lugar a otro. Bien, veamos que, incluso en la forma responsive, podemos trabajarlo. Aquà lo estoy checando en la ventana del explorador, solo porque es más sencillo. Pero, no hay problema en usar justamente las vistas responsive, y las herramientas de manejo de responsive, que nos ofrecen estos Browser. Bien, continuemos ya para finalizar, el uso de los "breadcrumbs". Vamos a incluir ahora los "breadcrumbs", copié y generé el código directamente, fÃjate que lo estamos incluyendo dentro del container para que quede por debajo de lo que es el "jumbotron", y dentro del "content", viste que respeta los márgenes laterales. Bien, entonces esto se genera con un componente "nav", especificamos el "aria-label" que es un "breadcrumb" y dentro el elemento "ol" con la clase "breadcrumb". Y, después, como en la lista, el "breadcrumb" "item", le ponemos que está activo, el nombre de la página actual "home". Y, dentro de About, vamos a repetir exactamente lo mismo, fÃjate que en este caso, lo que agregamos fue otro elemento, que sea "Nosotros", el nombre de la página, que es el que vamos a definir como activo. Y, el link al "Home", lo especificamos hacia la página de Ãndex HTML, de forma similar a como hicimos con la barra de navegación. Vamos a ver como queda. Dentro de nosotros, aparece el hipervÃnculo a "Home", y ahà nos podemos mover. De esta manera, pudimos ver cómo utilizar la barra de navegación a lo largo de estos vÃdeos. Estos tutoriales, de modo responsive y de modo web, texto normal. Utilizamos también los "breadcrumb", y utilizamos diferentes estilos para diferenciar lo que son las secciones activas, de las no activas, justamente. Para finalizar, como siempre, vamos a ver los cambios y vamos a guardar nuestro avance. Vamos a agregar ésto, generamos el commit. Agregamos navegavilidad, y pusheamos a la nube. Chequeamos en el "git low", y está todo en orden.
