使用 Twitter Bootstrap Navbar 进行导航的正确方法是什么? [英] What is the correct way to navigate using the Twitter Bootstrap Navbar?

问题描述

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

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.

有些页面确实导航到新的 href 并触发页面加载，大概是使用某种模板在所有 html 页面中使用相同的导航栏代码，如 这个问题.

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.

我见过的其他页面似乎隐藏或显示带有内容的 div.乍一看，这似乎需要权衡——一方面，一旦加载，您就可以拥有一个活泼的响应式页面.另一方面，在大型网站上，初始页面加载可能会很大.

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.

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

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?

推荐答案

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

I never found any discussion on this one way or the other. Bootstrap itself seems to use the hrefs approach. As a user, I find this approach is the easiest to wrap your head around.

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

Since I couldn't find any templates on how to use this approach efficiently, I created my own template called bootstrap-baked. The html for the navbar, which is shared across all the top-level pages, is DRYed out in a single place using the grunt-bake template task. If you're just looking to create a basic site using Bootstrap, this might be a good place to start.

它使用 hrefs 通过导航栏导航，因此每个新页面都是一个新的 html 文件.它带有 yeoman webapp 生成器(配置为与 grunt-bake 配合使用)和响应式导航栏.

It uses hrefs to navigate via the navbar, so each new page is a new html file. It comes with all the tasks provided with the yeoman webapp generator (configured to play nice with grunt-bake), and a responsive navbar.

这篇关于使用 Twitter Bootstrap Navbar 进行导航的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！