Acabamos de completar una discusión sobre la importancia de proporcionar navegación en su sitio web.
También analizamos varias maneras diferentes en las que podemos proporcionar navegación en un sitio web.
Ahora es hora de que veamos bootstrap y busquemos los componentes
que bootstrap proporciona que nos permiten añadir navegación a nuestros sitios web.
Dos componentes importantes de bootstrap es Navbar y Breadmigbs.
Vamos a examinar ambos en este ejercicio.
Comencemos añadiendo una barra de navegación a la parte superior de nuestra página web.
Podemos hacerlo usando el componente Navbar que es parte de bootstrap.
Entonces, ¿cómo empezamos?
Vamos al cuerpo de nuestra página HTML.
Así que aquí, tengo index.HTML abierto.
Y en la parte superior,
voy a agregar un elemento usando esa etiqueta HTML de navegación.
Ahora la etiqueta HTML de navegación está destinada a proporcionar navegación.
Por lo tanto, aprovechemos esta etiqueta y construyamos nuestra barra de navegación usando la etiqueta de navegación.
Así que ahora, en la parte superior,
voy a agregar esta etiqueta,
poner el navegador y construir la barra de navegación alrededor de esta etiqueta de navegación.
Entonces, una vez que agregamos esta etiqueta de navegación en index.HTML,
entonces podemos seguir adelante y luego aplicar las clases de bootstraps a esta etiqueta de navegación.
Entonces, aplico la barra de navegación de clase.
Entonces, la clase navbar en bootstrap me permite crear una barra de navegación.
Hay muchas formas diferentes de personalizar la barra de navegación,
que tenemos un vistazo como clases adicionales que se agregarán a esta etiqueta de navegación.
Junto con la barra de navegación,
también agregamos en la siguiente clase que es navbar-dark.
Ahora quiero que mi barra de navegación sea de color oscuro,
con un fondo más oscuro.
Porque eso va muy bien con el sitio web que acabo de diseñar.
Podemos tener luz de barra de navegación,
que es una barra de navegación de color más claro.
Por lo tanto, puede elegir utilizar cualquiera de ellos en su página web.
La siguiente clase que voy a usar es la clase navbar-expand-sm.
Ahora, y también, especificaré el tamaño de pantalla por debajo
del cual entra en existencia el comportamiento conmutable.
Ahora, cuando digo navbar-expand-sm,
eso significa que para pantallas pequeñas y extra pequeñas,
estas barras de navegación se convertirán en una barra de navegación conmutable.
Lo que significa que, se colapsará en esos tamaños de pantalla.
Pronto aprenderá cómo funciona esto,
cuando veamos cómo podemos agregar
el plugin de colapso a la barra de navegación para habilitar ese tipo de comportamiento.
Entonces, junto con un sm conmutable de barra de navegación,
voy a aplicar un color de fondo a la barra de navegación inicialmente,
que sería bg-primario.
Ahora bg-primary es ese color primario que se define en su bootstrap.
De forma predeterminada, esta es una versión de color azul utilizada por bootstraps.
Así que voy a empezar con eso como mi color principal.
Más tarde, personalizaré el color de mi barra de navegación usando algunas clases CSS.
Además, también voy a aplicar
otra clase llamada la parte superior fija a esa barra de navegación.
Lo que hace fixed-top, es que fija la barra de navegación en la parte superior
de la ventana del navegador donde se está representando esta página web.
Incluso cuando se desplaza la página húmeda,
la barra de navegación estaba hasta permanecer en la parte superior de la página.
Simplemente puede usar la parte inferior fija para fijar
la barra de navegación en la parte inferior de la ventana de su navegador o puede decir, superior estática.
Y también, simplemente no puedes usar esta clase.
Si no lo usas, la
barra de navegación también se desplazará cuando la página web se desplace hacia arriba.
En mi sitio web, elijo mantener la barra de navegación fija en la parte superior de la página.
Hay muchas otras opciones
disponibles que puede encontrar en la documentación de bootstraps.
Así que este es un ejemplo del uso de la barra de navegación.
Ahora, además, dentro de la barra de navegación,
voy a incluir cualquier contenido que
se vaya a utilizar en la barra de navegación dentro de un contenedor.
Entonces aquí es donde usaré un elemento div aquí
y aplicaré la clase contenedor a este elemento div. Por
lo tanto, lo que esté encerrado allí,
estará restringido al mismo ancho que el resto de mi página Web.
Como recordará, utilicé la clase contenedor para
definir la amplitud del contenido en mi página web,
así que voy a aplicar lo mismo a mi barra de navegación también, para
que la información de la barra de navegación se
muestre dentro del mismo ancho que el resto de mi página web.
Puede elegir no usar la clase contenedor en la barra de navegación, En cuyo caso,
el contenido de la barra de navegación se extenderá por todo el ancho de la pantalla.
Dentro de la barra de navegación,
voy a agregar una clase a una etiqueta aquí.
Esta clase que llamo como marca de navegación,
me permite mostrar cierta información como información de marca en mi barra de navegación. Por
lo tanto, si usted tiene una empresa, por ejemplo,
puede mostrar el nombre de su empresa o
el logotipo de su empresa utilizando la marca de navegación
para que se muestre de manera prominente en su barra de navegación.
Obviamente, cuando visita muchos sitios web,
verá que el nombre de la empresa es visible en algún lugar en
la barra de navegación de ese sitio web.
Así que, permítanme añadir esa marca de navío.
Esto también se puede vincular a la página de inicio de su sitio web.
Así que, voy a dejar eso ahí.
En las páginas restantes de mi sitio web,
simplemente agregaré el href para traerme de vuelta a la página index.HTML,
que es la página de inicio.
Y dentro de aquí voy a añadir en el nombre de mi restaurante.
Vamos a guardar los cambios y vamos a echar
un vistazo rápido al estado actual de mi barra de navegación. Al
ir a la página web en el navegador,
ahora puede ver dónde está visible la barra de navegación en mi página web en el navegador.
La barra de navegación está ahora en la parte superior de la página y
puede ver que a medida que desplaza mi página,
la barra de navegación sigue estando en la parte superior porque solía usar la clase superior fija.
También puede ver
la marca navbar que me permite mostrar el nombre del restaurante allí.
Más tarde voy a reemplazar eso con el logo de este restaurante.
Usted observa que la barra de navegación está parcialmente cubierta en el Jumbotron.
Vas a arreglarlo un poco más tarde usando alguna personalización de CSS.
Lo siguiente que voy a hacer es agregar algunos enlaces a mi barra de navegación, para
que estos enlaces me lleven a las otras páginas de mi sitio web.
Entonces, ¿cómo hacemos eso?
Volviendo a index.HTML,
voy a agregar un ul aquí,
dentro del cual voy a declarar
todos los diversos enlaces que se mostrarán en mi cuadro de navegación.
Así que este ul a la que voy a aplicar la clase como navbar-nav.
Entonces, esta es la clase que me ayudará a definir
el conjunto de enlaces que se incluirán en mi barra de navegación.
Y estos enlaces se mostrarán horizontalmente dentro de mi barra de navegación.
El mr auto-class que también he aplicado al ul,
se usa para especificar el margen derecho.
Entonces, esta es una clase de utilidad que está disponible
en bootstrap que me permite especificar el margen derecho.
Así que si digo, mr-auto,
lo que significa es que en el lado derecho,
el margen derecho debe ser establecido tanto como sea posible.
Lo que significa que el contenido se insertará lo más a la izquierda
posible dentro de la barra de navegación.
Dentro de esta lista desordenada,
puedo usar elementos de lista para incluir
los diversos enlaces que van a formar parte de mi barra de navegación.
Así que allí, voy a agregar algunos enlaces allí
y comenzaré especificando el primero allí con el enlace.
Para cada elemento de la lista en su barra de navegación,
va a aplicar la clase como elemento de navegación.
Esto permite que estos elementos de la lista se muestren horizontalmente como enlaces en mi barra de navegación.
Y luego dentro de aquí,
puedo usar la etiqueta a para agregar
el enlace real que formará parte de mi barra de navegación.
Entonces dentro de allí uso la etiqueta a con
la clase nav-link y esto también me permite usar el href.
Atributo para definir el enlace allí.
Y el primero que voy a incluir es Home.
Por lo tanto, esto incluiría un elemento llamado Inicio en esta barra de navegación.
Déjame copiar eso y luego pegarlo.
Y luego editaremos algunos de estos porque quiero agregar
cuatro diferentes a mi barra de navegación.
El primero es Hogar.
El segundo sería Acerca de.
El tercero sería Menú que voy a construir como parte del próximo curso.
Y el último será Contacto.
Un sitio web típico de la compañía tendría enlaces como este en su barra de navegación.
Así que con la adición de estos dos,
ahora lo que puedo hacer es
que podemos identificar explícitamente uno de estos enlaces como el enlace activo,
lo que significa que cuando estás en esa página en particular,
ese enlace en particular se puede resaltar.
Así que para ello, aplicaremos aquí la clase llamada activa a uno de estos elementos de la lista.
En este caso, dado que esta es la página index.html,
estoy aplicando la clase activa al enlace de inicio allí.
Esto completa mi barra de navegación en la página index.HTML.
Una pequeña cosa que me gustaría arreglar aquí es que el enlace Acerca,
quiero vincularlo a la
página aboutus.HTML que ya hemos incluido en nuestro sitio web,
porque ahí es donde quiero que lleve.
Vamos a echar un vistazo rápido a nuestra barra de navegación de esta parte.
Volviendo a nuestra barra de navegación,
puede ver inmediatamente el resultado de incluir
esos elementos en la lista desordenada allí.
Por lo tanto, verá Inicio,
Acerca de, Menú y Contacto allí,
y cada uno de ellos es un enlace, pero este es un elemento de navegación aquí.
Y tenga en cuenta cómo el Hogar se resalta aquí debido al uso de la clase activa.
Por lo tanto, si hago clic en el Acerca de,
debería llevarme al lanzamiento Acerca de.
He aquí, y he aquí, ahí estamos.
Pero me doy cuenta de que no tengo una forma de regresar,
lo que significa que también necesito entregar esta barra de navegación a la página aboutus.HTML.
Llegaremos allí en poco tiempo.
Por ahora, voy a navegar rápidamente usando el botón Atrás de
mi navegador de vuelta a mi página index.HTML.
Una cosa que también quería demostrarles fue cómo
esta barra de navegación colapsará para tamaños de pantalla pequeños y extra pequeños.
Entonces, vamos a encender la vista usando la Vista sensible,
y luego déjame ir al Galaxy S5.
Y me di cuenta de que cuando uso el Galaxy S5 de esta manera, se
puede ver que esto se muestra antes de lo que ya está cubriendo la pantalla.
Ese no es el comportamiento que quiero.
Quiero poder ocultar esto cuando estoy viendo esto en una pantalla pequeña y extra pequeña.
Y entonces tal vez agrego un botón aquí que puedo usar
para activar y desactivar la visualización de estos enlaces.
Usted ha visto tales cosas en los sitios web móviles.
¿ Cómo hacemos esto en bootstrap?
Vayamos a ese paso siguiente.
Volviendo a nuestra barra de navegación aquí.
Permítanme agregar un botón allí,
que actuará como el botón de alternar para mostrar y ocultar
mis enlaces de mi barra de navegación cuando se muestre en pantallas extra inteligentes y pequeñas.
Entonces, para agregar allí,
permítanme agregar un botón y aplicar algunas clases a este botón.
Vamos a discutir más acerca de los botones en bootstrap en la siguiente lección.
Pero para agregar un botón en bootstrap,
aplicaría la clase para este botón en particular como navbar-toggler.
Así que esto es un navbar-toggler.
Entonces, como su nombre lo indica,
ya está empezando a entender lo que este botón va a hacer en este caso.
Y luego agregaría el tipo como botón para indicar que esto está actuando como un botón.
Y luego alternar los datos como colapso.
Ahora, este atributo de alternancia de datos que verá aquí es en realidad
un uso de componentes de JavaScript en bootstrap.
Vamos a ver este tipo de atributos de barra de guiones de datos más en el siguiente módulo,
donde veremos los componentes de JavaScript de arranque.
La barra de navegación requiere uno de esos componentes de JavaScript para poder activar
y desactivar mis enlaces en mi barra de navegación. Por lo tanto,
esa es la razón por la que introduje rápidamente este concepto aquí,
pero volveremos a examinar
este bootstraps componentes JavaScript más en el siguiente módulo.
Por lo tanto, el colapso de alternancia de
datos y luego el objetivo de datos como #Navbar.
Ahora, voy a introducir otro div con el ID como barra de navegación.
Entonces, cuando especifico una fecha o destino #Navbar,
eso se refiere a la ID de ese otro elemento que va a ser
el objetivo de este botón en particular aquí.
Entonces, esa es la parte que agrego al fondo.
Y también, quiero que el botón muestre algo aquí.
Y por lo general, cuando ves este tipo de botones en los sitios web móviles,
contendría líneas libres allí,
por lo que normalmente se llama como el icono de alternar Navbar.
Por lo tanto, voy a incluir un icono especial que
se incluye en bootstrap, llamado icono navbar-toggler.
Entonces, si aplico esta clase a la etiqueta span,
entonces eso introducirá un icono de navbar-toggler a mi botón aquí.
Por lo tanto, eso introduce un botón.
Vamos a ver cómo se ve esto en un corto tiempo.
Ahora, cuando hago clic en este botón,
quiero poder mostrar y ocultar estos enlaces.
Para permitirme hacer eso,
lo que voy a hacer es rodear este ul con un div aquí.
Entonces, voy a entrar e introducir un div alrededor de este ul.
Y a este div,
aplicaré la clase como colapso,
y luego navbar-colapso, y luego le daré una identificación como Navbar.
Ahora, está empezando a ver la correlación entre
estas clases y el ID y lo que declaré en el alternador de datos y el destino de datos.
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.
Y especifico el conmutador de datos como colapso.
Collapse es uno de los componentes de JavaScript de arranque,
que veremos con más detalle en el siguiente módulo.
Entonces, adjuntando esto dentro del div para pantallas pequeñas y extra pequeñas,
esto estaría oculto por defecto,
pero cuando hago clic en el botón,
el contenido de este div se revelará en la pantalla.
Permítanme también añadir un mr-auto a la clase navarbar-brand allí para
que introduzca automáticamente un margen derecho suficiente a esta marca navarbar-.
Ahora, vamos a echar un vistazo a esto en nuestro navegador.
Al ir al navegador, ahora puede ver cómo
mi barra de navegación está colapsada en tamaños de pantalla pequeños y extra pequeños.
Y observe este botón en el lado izquierdo.
Cuando hago clic en el botón,
los enlaces de mi barra de navegación se muestran y ocultan.
Este es el comportamiento que quiero para la implementación receptiva de mi barra de navegación.
Si cambio a una
pantalla normal y más grande, la barra de navegación se muestra completamente incluyendo los enlaces.
Pero cuando veo lo mismo en una pantalla más pequeña como esta,
entonces los enlaces de la barra de navegación están ocultos detrás de
este botón y luego se activarán y desactivarán haciendo clic en ese botón.
Así que ese es el comportamiento de respuesta que puede
incorporar en su barra de navegación en su sitio web.
Ahora que hemos completado la barra de navegación en mi página index.HTML,
quiero poder introducir la misma barra de navegación en la página aboutus.HTML.
Antes de que lleguemos, vamos al pie de página aquí.
Y luego te das cuenta de que en el pie de página,
tenemos estos enlaces.
Quiero poder actualizar este enlace también para apuntar
a aboutus.HTML para que incluso haciendo clic en el enlace en mi pie de página,
siga yendo a la página acerca.
Ahora, volviendo aquí,
lo que voy a hacer es simplemente copiar este código de esta barra de navegación desde aquí.
Y luego, vaya a la página aboutus.HTML y luego pegue eso en mi página aboutus.HTML.
No solo eso, necesito hacer algún ajuste a esto,
porque esto está ahora en la página aboutus.HTML.
Así que obviamente, hay algunas cosas que necesito actualizar.
En primer lugar, esta marca de navegación que debería llevarme de vuelta
a mi página de inicio ahora debería actualizarse como index.HTML aquí.
Y luego, el elemento de lista aquí ahora el segundo es la página principal de nuevo,
quiero actualizar eso a index.HTML allí y luego el segundo enlace a la acerca,
porque esta es la página aboutus.HTML,
voy a volver a ponerlo en ese hash allí y luego eliminaré
la clase activa de la primera y, a continuación, aplicar la clase activa al segundo elemento,
porque esta es la página Acerca de y debe ser la que está resaltada.
De nuevo, yendo al pie de página de Acerca de la página.
En el pie de página, haré las mismas actualizaciones a los enlaces aquí para que
la página principal me lleve de vuelta a index.HTML y luego me deje guardar los cambios.
Así que ahora mi página Acerca de también se actualiza correctamente. Al
ir al navegador,
ahora puede ver que estoy en mi página de inicio y luego cuando haga clic en la página acerca,
iré a la página Acerca de.
Tenga en cuenta cómo se muestra esa misma barra de navegación en Acerca de la página,
por lo que tiene sobre ser resaltado porque
aplicé la clase activa a eso y luego puedo
volver a mi página de inicio haciendo clic en la marca narvar-o en Inicio.
Así que vamos a hacer clic en la marca narvar-y estamos de vuelta en nuestra
página principal o Inicio o index.HTML.
Por lo tanto, ahora la navegación está configurada correctamente tanto en la página principal como en la página Acerca de.
Un par de cosas adicionales que voy a hacer es aplicar si ves que
es la clase que puedo cambiar el color de mi barra de navegación
y también me gustaría agregar
una miga de pan a esta Acerca de la página y para que la miga de pan también me dé otra forma
de navegar de vuelta a mi página principal y también indicar
la jerarquía en mi sitio web donde estoy en este momento.
Así que vamos a hacer esos dos pasos a continuación.
Volviendo a ese editor en styles.css.
Voy a añadir un par de clases más aquí.
Te das cuenta de que mi barra de navegación estaba escondiendo parte del jumbotron.
Para evitar eso,
lo que voy a hacer es a mi cuerpo,
voy a dar un relleno de 50 píxeles en
la parte superior para que esos 50 píxeles se dejen para que la barra de navegación cubra.
Siempre que esté utilizando una barra de navegación superior fija, es
una buena idea dar este relleno al cuerpo de
su página web para que la navegación no cubra
el elemento superior del cuerpo de su página web.
Por lo tanto, los restantes voy a dejar como
píxeles cero y también el índice z para mi cuerpo como cero.
Desde su conocimiento de CSS, entiende lo que hace el índice z
y el siguiente que voy a hacer es
sobrecargar la clase navbar-dark agregando un color más para
la clase de barra de navegación y el color que voy
a elegir es 512DA8.
Este es un color púrpura oscuro que se ve muy bien en mi sitio web.
De hecho, Si tienes interés donde encontré estos colores puedes visitar
www.android.com y luego buscar su documentación para el diseño del material y allí,
tienen sugerencias sobre cómo los colores se pueden usar
en tu aplicación Android, pero lo mismo se aplica incluso a un sitio web,
por lo que es donde fui y seleccioné estos colores para ser utilizados en mi sitio web.
Entonces, aplicando esto, ahora cuando hago esto,
tengo que volver a mi página index.HTML y
luego desde la barra de navegación debería eliminar este bg-primary.
De lo contrario, el color que sugerí en el CSS no se aplicará a esto.
Del mismo modo, vaya a la página aboutus.HTML y luego desplácese a
la barra de navegación y luego elimine bg-primary de eso también.
Ahora, mientras estoy en la página aboutus.HTML,
permítanme introducir una miga de pan en mi contenedor,
la primera fila de mi contenedor allí.
Así que aquí es donde el título Acerca de nosotros estaba
allí, así que allí voy a entrar e introducir un ol.
Solo estoy usando la etiqueta ol como una forma de introducir la miga de pan.
Puede usar incluso un div para esto y seguirá funcionando bien.
Sucede que el ejemplo en la documentación de bootstraps usó un ol, así que
me quedo con que incluso un div simple también funcionará bien aquí.
Por lo tanto, digo ol clase col-12 miga de pan.
Entonces se aplicaron las clases de miga de pan y
no el significado col-12 que extendió toda la pantalla.
Y ahí dentro, voy a entrar y añadir dos elementos de la lista.
Ahora ves por qué el uso de ol es útil aquí,
porque puedo usar los elementos de la lista para describir el elemento de la miga de pan.
Entonces, elemento de miga de pan aquí,
así que incluyo un elemento de la ruta de pan y luego dentro de allí usaré
la etiqueta A para definir un enlace de vuelta a mi página de inicio.
Así que digo, «A» y luego a esta A,
le doy el href como index.HTML y luego lo
incluyo en mi primera miga de pan y luego, después de esto,
el siguiente que voy a incluir es otro elemento de la lista y
el segundo elemento de la lista aplicaré la clase como elemento de miga de pan y activo.
Así que tenga en cuenta el uso de la clase activa aquí y luego dentro de allí diré «acerca de
nosotros» No necesito un enlace aquí porque ya estoy en la página,
por lo que no necesita ser incluido para este elemento de la lista.
Vamos a guardar los cambios,
para que pueda ver cómo se ha introducido la miga de pan en esta
página particular Acerca de nosotros aquí.
Vamos a echar un vistazo a la página web resultante.
Ir a mi página web, ahora puede ver que el color de la barra de navegación
ahora ha cambiado al púrpura oscuro que se introducen
a través del CSS y esto se ve bien en la pantalla aquí.
Morado oscuro, seguido de un púrpura más claro y luego en
la parte inferior púrpura aún más claro para mi pie de página.
Bueno, no soy diseñador,
pero esto es lo mejor que pude encontrar en términos de agregar cerca de sitios web.
Como saben por la historia, los hombres son daltónicos.
Así que tenemos muy mal gusto en los colores.
Si estás casado, tu esposa te lo recordará.
Vayamos a la página Acerca de y veamos cómo se ve.
Así que esta es la página Acerca de y en la página Acerca de usted puede
ver la barra de navegación con el color correcto
allí y anotar la miga de pan incluida en el Acerca de nosotros aquí abajo.
Así que puedes ver el Inicio que te lleva de vuelta a la página de índice y
luego Acerca de nosotros como viste aplicamos enlace
activo, clase activa a este.
Así es como se muestra el Acerca de nosotros y la Página de inicio.
Por lo tanto, este es el estilo de miga de pan predeterminado utilizado
en bootstrap y si hago clic en la página principal volveré a mi página principal.
Con esto completamos este ejercicio en barra de navegación y pan rallado.
Este es un buen momento para que hagas un commit git con el mensaje «barra de navegación y pan».