Question

我一直在寻找这个问题的答案。我正在使用Bootstrap框架来创建一个投资组合网站。我已经使用固定顶部导航栏完成了我的index.html：

This is the home page. The top shows the navbar.

此导航栏链接到＆＃34; bio＆＃34;页面，＆＃34;项目＆＃34;下拉菜单，以及＆＃34;联系人＆＃34;页。我为每个人创建了单独的html页面（例如：我有index.html，bio.html，contact.html，video.html，design.html等）。但是，当我按下链接时，它们不显示导航栏，也不显示任何其他格式。

我有这个代码用于图形设计html：

-1

这就是出现的情况： graphicdesign.html page

我想知道是否有办法让导航栏在项目的每个HTML页面上保持一致。

我已经看到了这个：Bootstrap Navbar in multiple pages但是我很难用jQuery加载它。

我也看到过：Do I have to duplicate the navbar code on every page with Bootstrap?但我不想使用PHP。

感谢您的时间。

Answer 1

首先，我祝贺你的问题它解决了编程中的基本需求和最重要原则之一：DRY，这是开发和实施大多数常见Web技术背后的主要原因，例如php或CSS（可以由LESS或SASS进一步干预。

例如，

php 是发明并立即被广泛采用，主要是因为这个＆＃34;非常酷的新（当时）功能＆＃ 34;：您所要做的就是将扩展名从.html更改为.php，并且您可以使用以下内容包含其他部分：

<?php include "part.html"; ?>

通常称为 模板/组件加载 ，这也是使用JavaScript的常见任务。相当多的图书馆提供它。例如jQuery提供$.load()，而AngularJS则允许您使用directive来包含template s，可以将其定义为内联{{1} }}。实际上，所有包依赖管理器和所有框架都以一种或另一种形式提供它，因为如果没有可重用的组件，今天的Web是不可想象的。

如果您想查找更多选项，建议您开始搜索HTML，html，include，templates和loading的组合。

请注意，大多数components库都带有开销。然而，最流行的通常提供一些灵活性，允许您有选择地仅构建您想要的功能。

如果（及时）微软的HTML Components提交给万维网联盟，将使用{{1>，那么包含模板很可能会成为核心JavaScript的一部分标签。
目前，这可以使用HTML s <component>指令。

Answer 2

要在每个页面中加入navbar，您必须使用php或javascript。否则，您只需要在每个页面中复制粘贴html标记。试试这两步 -

<强> HTML

<div class="container-fluid" id="footer">

</div>

<强> JAVASCRIPT

<script type="text/javascript">
 $(function(){
 $("#footer").load("footer.html"); 
 });
   </script>

注意：确保您没有在footer.html文件中添加bootstrap CDN s。

修改

如andrei的评论中所述，是的，知道我的答案需要jquery非常重要。

要使用jquery，您需要在head标记中使用以下cdn，或者您可以下载jquery并从您自己的文件系统中提供它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 3

由于问题的标题吸引了对Bootstrap导航栏感兴趣的人，因此这里是一个导航栏的演示。假定Bootstrap和jQuery。

我的主要观点是展示如何正确激活导航栏链接，该链接在每个页面中都必须不同。

nav-bar.html

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
   <a class="navbar-brand" href="#">
     <img alt="Brand" src="icon.png">
     <span class=px-2>My Site</span>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav ml-auto">
         <li class="nav-item ">
            <a class="nav-link" href="#">Home Page </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Page1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Page2</a>
         </li>
      </ul>
   </div>
</nav>

现在将以下代码放入应该显示导航栏的每个页面的<head>部分中。

关注到li:nth-child(2)部分。该数字应根据其在导航栏中的位置在每个html源中进行修改。

<script type="text/javascript">
  window.onload = function(){
      $.get("navbar.html", function(data){
          $("#common-navbar").html(data);
          $('.navbar-nav').find('li:nth-child(2)')
            .addClass('active')
            .find('a').append('<span class="sr-only">(current)</span>');
      });
  }
</script>

现在剩下的是，每个页面都以div开头，导航栏将被加载到其中：

<body>
  <div id="common-navbar"></div>

使用bootstrap在多个html页面上显示导航栏

3 个答案: