Abb*_*bby 7 html javascript css twitter-bootstrap twitter-bootstrap-3
我一直在寻找这个问题的答案.我正在使用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.
感谢您的时间.
为了将您的内容包含navbar在每个页面中，您必须使用php或javascript。否则，您只需将 html 标记复制粘贴到每个页面中即可。试试这两个步骤——
HTML
<div class="container-fluid" id="footer">
</div>
爪哇脚本
<script type="text/javascript">
$(function(){
$("#footer").load("footer.html");
});
</script>
注意：确保您没有CDN s在 footer.html 文件中添加引导程序。
编辑
正如安德烈在评论中提到的，是的，知道我的答案需要jquery.
为了使用 jquery，您需要在head标签中使用以下 cdn，或者您可以下载 jquery 并从您自己的文件系统中提供它。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
首先,我祝贺你的问题.
它解决了编程中的一个基本需求和最重要的原则:DRY这是开发和实现最常见的Web技术背后的主要原因,例如php或CSS(可以进一步干燥LESS或者SASS).
php例如,发明并立即被广泛采用,主要是因为这个"非常酷的新(当时)功能":您所要做的就是将扩展名更改为.html,.php并且您可以使用以下内容包括其他部分:
<?php include "part.html"; ?>
通常称为模板/组件加载,这也是一个常见的任务使用JavaScript.相当多的图书馆提供它.例如jQuery提供$.load()而AngularJS允许您使用directives到包括模板 s,这既可以被定义为行内或外部HTML.实际上,所有包依赖管理器和所有框架都以一种或另一种形式提供它,因为如果没有可重用的组件,今天的Web是不可想象的.
如果您想了解更多的选择,我建议你开始搜索的组合html,include,templates,loading和components.
请注意,大多数JavaScript图书馆都有开销.然而,最流行的通常提供一些灵活性,允许您有选择地仅构建您想要的功能.
HTML如果(以及何时)使用标签,将采用微软提交给万维网联盟的HTML组件,那么包含模板很可能会成为核心的一部分<component>.
目前,这可以使用AngularJSs type:"E"指令.