Bootstrap 导航栏可用于我的所有 html 页面

Question

I am building out some front end html, css and js to display information passed through websockets. At this stage, I am currently manually typing all of the html pages by hand, and referencing the pages together through button clicks. However, after doing some reading on the internet, I believe there is a better way of doing this. Specifically, I would like bootstrap's nav-bar element to be shared across all of my pages. However, at present, I have to manually type the code in to each of my html pages 10+ for the nav bar. There has to be a better way of doing this that is more extensible and scale-able.

You might say, "Yes I know what will fix it, use node.js backend and react front end". The only problem with this however, is that the project which I am working on requires a solutions that can work without CDN's. In addition, it must be as lightweight as possible.

Is there some easier way/library of doing this in js which I am missing? I am quite new to web development, however I do have experience in embedded systems.

Answer 1

If you are trying to add the same content on different pages you need to create an element with the same id, create a external .js file with the content you want to repeat, and call it from the bottom of the page.

General example:

<div id="demo"></div> <!-- this where the content would be. Create this div on different pages and embed the script inorder to get content. -->
<script src="demo.js"></script>

demo.js file: 
<script>
var nav = // the content - example of bootstrap's nav
'<nav class="navbar navbar-expand-lg navbar-light bg-light">'+
'  <a class="navbar-brand" href="#">Navbar</a>'+
'  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">' +
'    <span class="navbar-toggler-icon"></span>' +
'  </button>' +
'  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">'+
'    <div class="navbar-nav">'+
'      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>' +
'      <a class="nav-item nav-link" href="#">Features</a>' +
'      <a class="nav-item nav-link" href="#">Pricing</a>' +
'      <a class="nav-item nav-link disabled" href="#">Disabled</a>' +
'    </div>' +
'  </div>' +
'</nav>';

var demo = document.getElementById('demo'); // target element.
demo.insertAdjacentHTML('beforeend', nav); // add content.
</script>

Read this for more possibilities, Hope that help.

Answer 2

If you are developing on visual studio then try making master page which will act as parent page for all your page.

And if not, then use Bootstrap 4 classes which makes really easy to create the navigation bar

note: Download the bootstrap 4 offline files rather than adding it via cdn to make it load faster