Write Twitter Bootstrap navbar once for multiple pages

Question

I am trying to get started with Twitter Bootstrap 3. I would like to have each of the navbar items go to a new href. For example, I'd like to have navbar items "about" and "contact" link to corresponding to about.html and contact.html pages.

Many sites I've found seem to just scroll somewhere in a very tall page, but I'm not a huge fan of this approach, as when I'm navigating these pages it always throws me off and it seems like it would be slow when the page gets large.

The trouble with having the navbar items go to a new href, however, seems to be that I'd have to be keeping the navbar code synchronized across all the pages as I update and rewrite it. This obviously isn't correct.

Am I misunderstanding the intended use of the navbar--i.e. is using hrefs the incorrect approach? If not, can anyone tell me an efficient way to reuse the navbar code across different html pages? I've found solutions involving using .shtml files, but I'd prefer to do it without this.

Edit: Some of the solutions do give possibilities for essentially including html, which is great. But is this the "Bootstrap Way" to do things? Or am I fighting to use an old system when I should instead be doing it another way? This seems like a broad enough question that I've gone ahead and asked it here.

Answer 1

If you use grunt in your project, you also can use grunt-bake for html templates. You can create navbar.html and include this in any html file like that:

<!--(bake includes/navbar.html)-->