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

Question

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

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

(当然代码不会完全重复,例如每个html页面上的活动类不同,但99%是常见代码)

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

Answer 1

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

例

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

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

Bootstrap 是一个用于开发网站图形和布局的框架，它不包含任何带有菜单的多页面网站的“逻辑”以及它们之间的切换之类的东西。（它确实包含一些逻辑，但它是为了响应不同的设备尺寸，这是在 CSS 中完成的）。

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