Mostrando la barra de navigation en múltiples páginas html usando bootstrap

He estado buscando la respuesta a esto por un time. Estoy usando el marco Bootstrap para crear un website de cartera. He completado mi index.html con una barra de navigation fija superior:

Esta es la página principal. La parte superior muestra la barra de navigation.

Esta barra de navigation tiene enlaces a una página "bio", un menu desplegable de "proyectos" y una página de "contacto". He creado páginas html separadas para cada una de ellas (por ejemplo, tengo index.html, bio.html, contact.html, video.html, design.html, etc.). Sin embargo, cuando presiono los enlaces, no muestran la barra de navigation ni ningún otro formatting.

Tengo este código para el layout gráfico html:

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Graphic Design</title> </head> <body> <h1>Graphic Design</h1> <p>Creating</p> </body> </html> 

Y esto es lo que aparece: graphicdesign.html page

Quería saber si hay una manera de tener la barra de navigation coherente en cada página HTML de un proyecto.

He visto esto: Bootstrap Navbar en varias páginas, pero me está costando cargarlo usando jQuery.

También he visto esto: ¿Tengo que duplicar el código de la barra de navigation en cada página con Bootstrap? pero no quiero usar PHP

Gracias por tu time.

En primer lugar, te felicito por tu pregunta.
Aborda una de las necesidades fundamentales y los principios más importantes en la progtwigción: DRY , que es la razón principal detrás del desarrollo y la implementación de las tecnologías web más comunes, como php o CSS (que pueden ser más DRY-ed por LESS o SASS ) .

php , por ejemplo, se inventó y se adoptó de manera instantánea ampliamente principalmente debido a esta "nueva característica muy buena (en ese momento)": todo lo que tenía que hacer era cambiar la extensión de .html a .php y podía include otras partes utilizando:

 <?php include "part.html"; ?> 

Habitualmente referenceda como carga de plantilla / componente , esta es también una tarea común que utiliza JavaScript . Bastantes bibliotecas lo proporcionan. Por ejemplo, jQuery proporciona $.load() mientras que AngularJS permite usar directive para include templates , que podrían definirse como HTML línea o externas. De hecho, todos los administradores de dependencies de packages y todos los frameworks lo proporcionan de una forma u otra, porque la web de hoy es impensable sin componentes reutilizables.

Si desea encontrar más opciones, le sugiero que comience a search combinaciones de html , include , templates , loading y components .

Tenga cuidado, la mayoría de las bibliotecas de JavaScript vienen con gastos generales. Sin embargo, los más populares generalmente brindan cierta flexibilidad, lo que le permite build selectivamente solo la funcionalidad que desee.

La inclusión de templates, muy probablemente, se convertirá en parte del núcleo HTML si (y cuándo) se enviará la presentación de componentes HTML de Microsoft al World Wide Web Consortium, utilizando la label <component> .
Actualmente, esto es posible usando el type:"E" AngularJS type:"E" directivas type:"E" .

Para include su navbar de navbar en cada página, debe usar php o javascript . De lo contrario, simplemente tendrá que copyr pegar el marcado html en cada página. solo testing estos dos pasos–

HTML

 <div class="container-fluid" id="footer"> </div> 

JAVASCRIPT

 <script type="text/javascript"> $(function(){ $("#footer").load("footer.html"); }); </script> 

NOTA: asegúrese de no agregar CDN s arranque en el file footer.html.

Editar

Como se menciona en el comentario de andrei, sí, es muy importante saber que mi respuesta requiere jquery .

Para usar jquery necesita usar el siguiente cdn en su label principal o puede download jquery y servirlo desde su propio sistema de files.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

Solo copie su marcado html de la barra de navigation de index.html (o como se llame su file) y péguelo en otra página. No compliques las cosas. Ver la image a continuación. enter image description here