2014-03-24 48 views
2

我正在使用Twitter Bootstrap 3创建一个网页。我使用导航栏的本能是让每个项目导航到新的href。不过,我已经看到这种处理方式不同。使用Twitter Bootstrap导航栏导航的正确方法是什么?

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

我见过的其他页面似乎隐藏或显示包含内容的div。乍看起来,这似乎是一个折衷 - 一方面,一旦加载,你可以有一个活泼的,敏感的页面。另一方面,初始页面加载可能在一个大型网站上变得庞大。

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

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

我的问题是:什么是“Bootstrap方式”来做到这一点?毫无疑问,一切都是有效的但是在某个地方讨论选择一个而不是另一个的权衡和动机?对于小页面来说,隐藏div或滚动似乎是一个很好的解决方案,因为最终可能会出现像向用户快速加载内容那样的结果。但在大页面中,似乎你会想要另一种方法。也许你可以使用div方法获取顶级汇总项目,然后使用href方法导航到一个级别。

有没有人有什么建议他们的工作?或指向讨论有效使用导航栏的文章?

+0

我感兴趣的是如何处理导航栏,如果它是为您的网站上的每一页相同。看到[这里](http://stackoverflow.com/questions/23818206/bootstrap-navbar-interactive-structure) – HattrickNZ

回答

2

我从来没有发现任何关于这种或那种方式的讨论。 Bootstrap本身似乎使用hrefs方法。作为一个用户,我觉得这种方法是最容易包装你的头。

因为我找不到任何有效的方法模板,我创建了自己的模板called bootstrap-baked。导航栏的HTML在所有顶层页面中共享,使用grunt-bake模板任务在一个位置进行DRYED。如果你只是想使用Bootstrap创建一个基本站点,这可能是一个很好的开始。

它使用hrefs通过导航栏进行导航,因此每个新页面都是一个新的html文件。它配备了yeomanwebapp generator(配置为与grunt-bake配合使用)以及响应式导航栏提供的所有任务。

+0

这真的很有帮助,谢谢! – khiner