diseno-web-mini-04

Barra de navegación – diseño web básico 4

Barra de navegación: elemento universal en tu web

episodio 4 - barra de navegación

episodio 4 – barra de navegación

El primer elemento más importante y más común en cualquier página web es la barra de navegación. Es un componente importante de cualquier web, ya que es la principal manera que tiene el usuario de navegar por la página y visitas las diferentes secciones. Por ello, tiene sentido hacer esto en primer lugar.

Así pues, una buena manera de trabajar con Bootstrap es echar un vistazo a sus plantillas oficiales. Entre ellas, existen un buen número de páginas comunes que podríamos estar interesados en hacer. Dichas plantillas son útiles para utilizar ciertos elementos como barras de navegación, barras laterales, tablas, etc.

De esta manera, nos evitamos tener que construir la web línea a línea y directamente podemos copiar y pegar componentes de Bootstrap enteros.

Una buena manera de comenzar a crear la barra de navegación es buscar cualquier plantilla que tenga dicha barra y copiarla y adaptarla.

Por ahora, necesitaremos sólo lo básico: el nombre del blog, algunos enlaces (que no serán necesariamente los finales) y además debemos asegurarnos de que el botón de despliegue de la barra de navegación funciona.

Como hemos comentado anteriormente, la utilidad principal de Bootstrap consiste en adaptar el contenido de la web a cualquier tamaño de pantalla, haciendo que la web sea adaptativa (responsive design).

En este caso, nos enfrentamos al primer problema. En ciertos dispositivos, si la pantalla es muy estrecha, puede suceder que la barra de navegación sea demasiado ancha y no quepa en pantalla. Sin embargo, no nos interesa que se salga y que el usuario tenga que moverse horizontalmente por la página sólo para usar la barra de navegación.

Por eso, gracias a Bootstrap, a partir de cierto punto, la barra esconde sus enlaces y en su lugar muestra un botón que, al ser pulsado, despliega los enlaces ocultos. Esto sólo sucede en móviles y tabletas de pantalla estrecha, pero funciona realmente bien.

¿Te ha gustado? ¡Colabora en Patreon!

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *