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

【问题标题】：Do I have to duplicate the navbar code on every page with Bootstrap?我是否必须使用 Bootstrap 在每个页面上复制导航栏代码？
【发布时间】：2014-05-05 17:07:37
【问题描述】：

我目前正在制作一个包含多个页面的引导程序网站。我的方法是创建多个 html 文件，例如Index.html、Products.html、Contact.html。

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

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

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

【问题讨论】：

你应该看看 MVC 架构。
在这方面获得了更多经验后，我觉得我知道我的问题的答案，并且与已经发布的答案略有不同/更笼统，所以我把自己的答案放在下面和接受了。

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案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 文件中，您将拥有您的导航/标题/等。让您更新一个文件并让它跨站点更新。

【讨论】：

这似乎不允许根据您所在的站点将不同的导航栏元素设置为活动状态？
射击。错过了那部分。使用该示例编辑答案以允许它。
嗯，我喜欢这种方法，但是，一个缺点是它可能不适用于 Brackets（编辑器），因为需要 PHP 服务器。

【解决方案2】：

最好的解决方案是创建您的网站正文（导航栏 + 背景），然后使用 javascript 将不同的 html 加载到正文中。所以导航栏不会重复。

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：