5

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.

Community
  • 1
  • 1
user1978019
  • 3,008
  • 1
  • 29
  • 38
  • Maybe one of these methods? http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – Simon C Mar 24 '14 at 07:32
  • Really, most devs are using some type of server-side framework (php, .net, etc) which handle this sort of thing with a master page or similar. – Simon C Mar 24 '14 at 07:33

2 Answers2

4

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)-->
Evgeny Samsonov
  • 2,730
  • 4
  • 19
  • 28
  • 1
    I think the "correct" answer to this question is really more something along the lines of "use templates", rather than specifically grunt-bake. But, grunt-bake worked great for me, so I'm selecting this one. I also made [a template site called bootstrap-baked](https://github.com/srsudar/bootstrap-baked) that employs exactly this approach. It leverages all of the great Grunt tasks provided by `yo webapp`. If anyone else is wondering how to accomplish this, the template site could be a good place to start. – user1978019 Mar 29 '14 at 17:45
2

You can obviously change the file extension of your HTML files to .php and use the PHP include() function, but that may not be an option for you. The same applies for the various templating libraries.

For flat HTML, HTML imports exist, but aren't supported by every browser.

If you need to be able to include other files in flat HTML, my advice would be to use something like grunt-includes to generate the merged files on your development machine.

Matthew Daly
  • 9,212
  • 2
  • 42
  • 83