javascript - 想做一个多页导航菜单“HTML、JS、jQuery、Bootstrap”
问题描述
您好，我一直在寻找没有运气的答案。
我正在寻找一种通过导航栏来清理我的代码的方法，我可以轻松地将其添加到其他页面。
我一直在努力做到这一点，但没有运气。希望我能在这里得到答案。
我正在使用 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>