为多个页面编写一次Twitter Bootstrap导航栏

时间:2014-03-24 06:23:07

标签: twitter-bootstrap

我正在尝试使用Twitter Bootstrap 3.我想让每个导航栏项目转到新的href。例如,我想拥有导航栏项目" about"和"联系"链接到about.htmlcontact.html页面的相应内容。

我发现的很多网站似乎只是在一个非常高的页面中滚动,但我并不是这种方法的忠实粉丝,因为当我浏览这些页面时,它总是会让我失望关闭,当页面变大时似乎会很慢。

导航栏项目转到新的href的麻烦似乎是我必须在更新和重写导航条代码时保持所有页面的同步。这显然是不正确的。

我误解了导航栏的用途 - 即。使用hrefs是不正确的方法?如果没有,有人能告诉我在不同的html页面中重用导航条代码的有效方法吗?我找到了涉及使用.shtml文件的解决方案,但如果没有这个文件,我更愿意这样做。

编辑:有些解决方案确实提供了基本上包含html的可能性,这很棒。但这是" Bootstrap Way"做事吗?或者我是在努力使用旧系统,而应该采取另一种方式呢?这似乎是一个足够广泛的问题,我已经开始了asked it here

2 个答案:

答案 0 :(得分:4)

如果您在项目中使用 grunt ,则还可以将grunt-bake用于html模板。 您可以创建 navbar.html 并将其包含在任何类似的html文件中:

<!--(bake includes/navbar.html)-->

答案 1 :(得分:2)

您显然可以将HTML文件的文件扩展名更改为.php并使用PHP include()函数,但这可能不是您的选择。这同样适用于各种模板库。

对于平面HTML,HTML导入exist,但并非所有浏览器都支持。

如果您需要能够在平面HTML中包含其他文件,我的建议是使用grunt-includes之类的东西在开发机器上生成合并文件。