想做一个多页导航菜单“HTML、JS、jQuery、Bootstrap”[关闭]
Posted
技术标签:
【中文标题】想做一个多页导航菜单“HTML、JS、jQuery、Bootstrap”[关闭]【英文标题】：Want to make a multi page navigation menu "HTML, JS, jQuery, Bootstrap" [closed] 【发布时间】：2019-07-18 05:24:54 【问题描述】：您好，我一直在寻找没有运气的答案。
我正在寻找一种方法来清理我的代码，方法是拥有一个导航栏，我可以轻松地将其添加到其他页面。
我一直在努力做到这一点，但没有运气。希望我能在这里得到答案。
我正在使用 Bootstrap 库，如果有人能帮助我，那就太好了。
您将在下面找到 html 代码。
<!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>【问题讨论】：
【参考方案1】：使用在服务器端（最常见）或在构建时（可以支持只允许静态文件的 HTTP 服务器）运行的模板系统（或包含系统）。
使用您喜欢的任何编程语言（如果您在服务器端执行此操作，则取决于您的服务器的支持）； php 和垃圾一样普遍，Java 是一种选择，我倾向于 Perl（更具体地说：Template Toolkit），还有很多其他的。 javascript 在这类工作中变得越来越流行，assemble 等工具变得可用。 a static site generator可以一路走好。
使用搜索引擎查找流行的模板语言或包含您选择的编程语言的系统。
【讨论】：
以上是关于想做一个多页导航菜单“HTML、JS、jQuery、Bootstrap”[关闭]的主要内容，如果未能解决你的问题，请参考以下文章
vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）