想要制作多页导航菜单"HTML，JS，jQuery，Bootstrap"； [英] Want to make a multi page navigation menu "HTML, JS, jQuery, Bootstrap"
问题描述
你好，我一直在寻找没有运气的答案.
Hello i have been looking for a answer with no luck.
我正在寻找一种方法，使我可以轻松添加到其他页面的导航栏来清理我的代码.
Im looking for a way to clean up my code by having a navigation bar that i can add to other pages with ease.
我一直在努力做到这一点，但运气不好.希望我能在这里得到答案.
I have been trying hard to get this right but whitout luck. Hope i can get an answer here.
我正在使用Bootstrap库，如果那里有人可以帮助我，那将是很棒的事情.
Im using the Bootstrap library and would be wonderful if someone out there would help me out.
您将在下面找到HTML代码.
HTML code you will find below.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<!--Main Menu-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">CompanyName</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">
Products
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Product 1</a>
<a class="dropdown-item" href="#">Product 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Another Product</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!--Futured posts-->
<div class="jumbotron">
<h1 class="display-4">Simple. Elegant. Awesome.</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<!--Roster Cards-->
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card mb-4">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card mb-4">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card mb-4">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<div class="row mt-sm-4 mt-md-0">
<div class="col-sm-12 col-md-8 text-sm-center text-md-left">
<h3>An important heading</h3>
<p class="lead">A sort of important subheading can go here, which is larger and gray.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="col-sm-12 col-md-4">
<h3 class="mb-4">Secondary Menu</h3>
<ul class="nav flex-column nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
推荐答案
使用运行服务器端(最常见)或在构建时运行的模板系统(或包含系统)(可以支持仅允许静态访问的HTTP服务器)文件).
Use a template system (or an include system) that either runs server side (most common) or at build time (which can support HTTP servers which only allow static files).
使用您喜欢的任何编程语言(如果要在服务器端进行操作，则需要服务器的支持)； PHP和运气一样普遍，Java是一种选择，我倾向于Perl(更具体地说: Template Toolkit )，还有很多其他内容.在此类工作中，JavaScript变得越来越流行，例如 assemble 这样的工具就可以使用了.您可以完全使用静态网站生成器.
Use whatever programming language you like (subject to support by your server if you are doing this server-side); PHP is as common as muck, Java is an option, I tend towards Perl (and more specifically: Template Toolkit), there are many others. JavaScript is becoming increasingly popular for this type of job, with tools such as assemble becoming available. You can go all the way with a static site generator.
使用搜索引擎查找流行的模板语言或包含您选择的编程语言的系统.
Use a search engine to find popular template languages or include systems for your programming language of choice.
这篇关于想要制作多页导航菜单"HTML，JS，jQuery，Bootstrap"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
