I am creating a webpage using Twitter Bootstrap 3. My instinct using the navbar was to have each item navigate to a new href. However, I've seen this handled in different ways.
Some pages do navigate to a new href and trigger a page load, presumably using a template of some sort to use the same navbar code across all their html pages, as discussed in this SO question.
Other pages I've seen appear to be hiding or displaying divs with content. At first glance it appears that this would come with a tradeoff--on the one hand, once loaded, you can have a snappy, responsive page. On the other, initial page loads could end up being huge on a large website.
Other pages use the navbar items to scroll to a particular place in a very tall page. When I use these pages, I find navigation not using the navbar items to be disorienting. This solution, too, I would imagine becomes less attractive as page size increases.
Still others use the navbar items to add a query parameter that reloads the page. I'm not sure how these do it, and it is the least common approach that I've found.
My question is: what is the "Bootstrap Way" to do it? No doubt all are valid. But is there a discussion somewhere of the tradeoffs and motivations for choosing one over the other? For small pages, the hiding divs or scrolling seems like a good solution, as you could end up with what appears like quick loading of content to the user. But in big pages it seems like you would want another approach. Perhaps you could go with the div approach for the top level summary items and then the href approach to navigate down a level.
Does anyone have any suggestions about what has worked for them? Or pointers to articles discussing efficient use of the navbar?
