我是否必须使用Bootstrap复制每个页面上的导航栏代码？

Question

我目前正在创建一个包含多个页面的bootstrap的网站。我的方法是创建多个html文件，例如Index.html，Products.html，Contact.html。

现在，我是否必须在每个文件中复制导航栏的代码？这似乎相当麻烦，因为当我想在导航栏中更改某些内容时，我必须在每个文件中更改它。

（当然，代码不会完全重复，例如每个html页面上的活动类都不同，但99％是常见代码）

我当然知道我可以使用像Joomla这样的CMS来处理这个问题。但如果我不想采取这一步骤，是否可以使用Bootstrap？或者那不是Bootstrap的用途？ 奇怪的是，我无法通过查询获得该主题的任何谷歌搜索。也许我错过了什么。

Answer 1

即使您不打算使用它的后端方面，我建议将文件切换为.php并使用包含。

示例

PHP（页面）

<?php
    $active = "ID-THAT-CORRESPONDS-WITH-ID-IN-NAV-ANCHOR"; 
    include '_includes/header.php';
?>

    page body here

<?php
    include '_includes/footer.php';
?>

PHP（标题）

<nav class="<?php echo $active; ?>">
    <a href="#" id="home">Home</a>
    <a href="#" id="about">About</a>
    <a href="#" id="contact">Contact</a>
</nav>

<强> CSS / LESS

nav {
    /* if nav has class of home, style id of home to active state */
    &.home #home {
        ...
    }

    /* if nav has class of about, style id of about to active state */
    &.about #about {
        ...
    }
}

在header.php文件中，您将获得nav / header / etc。允许您更新一个文件并让它更新跨站点。

Answer 2

最佳解决方案包括创建您的网站正文（导航栏+背景），然后使用javascript将不同的html加载到正文中。因此，navbar不会重复。

想象一下两个盒子，第一个盒子包含你不会改变的所有块子（导航栏）。而第二个包含所有内容的人。第二个框内有第二个框。

Answer 3

我觉得这个问题的最佳答案是“不，只有Bootstrap不可能”，更重要的是，“不，这不是Bootstrap的用途。”

Bootstrap是一个用于开发网站图形和布局的框架，它不包含多页面的任何“逻辑”，菜单和它们之间的切换以及类似的东西。 （它确实包含一些逻辑，但它适用于响应性w.r.t.不同的设备大小，并且在CSS中完成）。

你真正想要的是像Rails或Django这样的Web框架，或CMS，然后在其上使用Bootstrap进行设计和布局。或者，使用PHP或Javascript中的任何其他建议答案来获得更“自制”的解决方案。