使用 Twitter Bootstrap 导航栏导航的正确方法是什么？

Question

我正在使用 Twitter Bootstrap 3 创建一个网页。我使用导航栏的直觉是让每个项目导航到一个新的 href。但是，我已经看到以不同的方式处理这个问题。

某些页面确实导航到新的 href 并触发页面加载，可能是使用某种模板在其所有 html 页面中使用相同的导航栏代码，如 this SO question 中所述。

我看到的其他页面似乎隐藏或显示带有内容的 div。乍一看，这似乎需要权衡取舍——一方面，一旦加载，您就可以拥有一个活泼、响应迅速的页面。另一方面，在大型网站上，初始页面加载量最终可能会很大。

其他页面使用导航栏项目滚动到一个非常高的页面中的特定位置。当我使用这些页面时，我发现不使用导航栏项目的导航会让人迷失方向。我想这个解决方案也会随着页面大小的增加而变得不那么有吸引力。

还有一些人使用导航栏项来添加重新加载页面的查询参数。我不确定这些是如何做到的，这是我发现的最不常见的方法。

我的问题是：“引导方式”是什么？毫无疑问，一切都是有效的。但是，是否在某处讨论了选择其中一个的权衡和动机？对于小页面，隐藏 div 或滚动似乎是一个很好的解决方案，因为您最终可能会看到向用户快速加载内容。但是在大页面中，您似乎需要另一种方法。也许您可以对顶级摘要项目使用 div 方法，然后使用 href 方法向下导航。

有人对什么对他们有用有什么建议吗？或者指向讨论有效使用导航栏的文章？

Answer 1

我从来没有发现任何关于这种或另一种方式的讨论。 Bootstrap 本身似乎使用了 hrefs 方法。作为用户，我发现这种方法最容易理解。

由于我找不到任何关于如何有效使用这种方法的模板，我创建了自己的模板called bootstrap-baked。导航栏的 html 在所有顶级页面之间共享，使用 grunt-bake 模板任务在一个地方干掉。如果您只是想使用 Bootstrap 创建一个基本网站，这可能是一个不错的起点。

它使用hrefs 通过导航栏导航，因此每个新页面都是一个新的html 文件。它带有 yeoman webapp generator 提供的所有任务（配置为与 grunt-bake 配合使用）和响应式导航栏。