使用Bootstrap在多个HTML页面上显示导航栏

Question

使用Bootstrap在多个HTML页面上显示导航栏

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

11

我一直在寻找答案，想使用Bootstrap框架创建一个作品集网站。经过努力，我已经完成了带有固定顶部导航栏的index.html页面：

此导航栏链接到“个人简介”页面、“项目”下拉菜单和“联系方式”页面。我为每个页面创建了单独的HTML文件，例如：index.html、bio.html、contact.html、video.html、design.html等。但是，当我点击这些链接时，它们不会显示导航栏或任何其他格式。

以下是我用于图形设计HTML的代码:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Graphic Design</title>
</head>
<body>
     <h1>Graphic Design</h1>
    <p>Creating</p>
</body>
</html>

以下是显示的内容： graphicdesign.html页面

我想知道是否有一种方法可以使导航栏在项目中的每个HTML页面上保持一致。

我看到了这个：使用Bootstrap Navbar在多个页面上，但我很难使用jQuery加载它。

我也看到了这个：使用Bootstrap，我是否必须在每个页面上重复导航栏代码?，但我不想使用PHP。

谢谢你的时间。

- Abby

3个回答

6

为了让每个页面都包含您的导航栏，您需要使用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。

编辑

如andrei的评论所述，是的，了解我的答案需要jquery。

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

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

- neophyte

谢谢。我现在正在尝试这个。针对您提到的第二点，即复制和粘贴HTML标记的问题，我确实将整个index.html代码复制并粘贴到其他页面中，但它们显示的效果与index不同。 - Abby

@Abby：当你复制标记时，不要复制整个标记。只需复制标题部分即可。还要记得包括必要的样式CSS表。但是使用jQuery是更好的方法。 - neophyte

@neophyte：你的回答没有任何问题。我相信我们周围有一个巨魔潜伏着，因为我的回答也被踩了。阻止我点赞你的回答的原因是你没有指定它使用jQuery。这非常重要，如果没有jQuery，它将无法正常工作。 - tao

不用谢。有人可能会认为 Twitter Bootstrap 需要 jQuery 才能工作，但这并不是真的。它的 JavaScript 部分完全是可选的。 - tao

1

我正在尝试做同样的事情 - 尝试您上面的建议并没有起作用。我在主HTML文件中放置了JavaScript，位于页脚上方。它应该放在其他地方吗？ - BruceWayne

显示剩余3条评论

0

由于问题标题吸引了对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>

- ishahak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tao · Accepted Answer

首先，我祝贺你提出了这个问题。
它涉及编程中最基本的需求和最重要的原则之一：DRY，这也是大多数常见 Web 技术（如php或CSS）开发和实现的主要原因，这些技术可以通过LESS或SASS进一步实现DRY。

php，例如，之所以被发明并立即广泛采用，主要是因为这个“非常酷的新功能”：你只需要将扩展名从.html更改为.php，就能够使用以下方式包含其他部分：

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

通常被称为模板/组件加载，这也是使用JavaScript的常见任务。许多库提供此功能。例如，jQuery提供$.load()，而AngularJS允许您使用directive来包含模板，可以定义为内联或外部HTML。事实上，所有软件包依赖管理器和所有框架都以某种形式提供它，因为现代Web离不开可重用组件。

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

请注意，大多数JavaScript库都带有开销。然而，最受欢迎的库通常提供一定的灵活性，允许您选择性地构建所需的功能。

如果 Microsoft 的 HTML 组件提交给万维网联盟并采用了 <component> 标签，那么引入模板很可能会成为核心 HTML 的一部分。
目前，可以使用 AngularJS 的 type:"E" 指令实现此功能。