在每个页面上都包含Bootstrap的导航栏

-1

我正在为自己开发一个网站，其中包含多个HTML文件，并且希望使用Bootstrap提供的导航栏。我得到它的工作，我只是在每个HTML文件中键入相同的代码，但我不想这样做，因为很难对导航栏进行更改，只是不好的做法。在每个页面上都包含Bootstrap的导航栏

我的问题是如何在每个网站的页面（每个HTML文件）中包含导航栏，而不必在每个文件中复制和粘贴导航栏的代码？下面是我的导航栏的代码的副本：

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 

 
\t \t <link rel="stylesheet" href="main.css"> 
 
\t \t <!-- Latest compiled and minified CSS --> 
 

 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
\t \t <!-- Optional theme --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
\t </head> 
 
\t \t <body> 
 

 
\t \t <header class = "navbar-default"> 
 
\t  <div class="container"> 
 
\t  <nav class="navbar navbar-inverse" role = "navi"> 
 
\t  
 
\t   <!-- Brand and toggle get grouped for better mobile display --> 
 
\t   <div class="navbar-header"> 
 
\t   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
\t    <span class="sr-only">Toggle navigation</span> 
 
\t    <span class="icon-bar"></span> 
 
\t    <span class="icon-bar"></span> 
 
\t    <span class="icon-bar"></span> 
 
\t   </button> 
 
\t   <a class="navbar-brand" href="mainPage.html">Connor Svrcek</a> 
 
\t   </div> 
 
\t   <!-- Collect the nav links, forms, and other content for toggling --> 
 
\t   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
\t   <ul class="nav navbar-nav"> 
 
\t    <li><a href="resume.html">Resume <span class="sr-only"></span></a></li> 
 
\t    <li class="dropdown"> 
 
\t    <a href="projects.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a> 
 
\t    <ul class="dropdown-menu"> 
 
\t     <li><a href="#">SpartaHack 2017</a></li> 
 
\t     <li><a href="#">Another action</a></li> 
 
\t     <li><a href="#">Something else here</a></li> 
 
\t     <li role="separator" class="divider"></li> 
 
\t     <li><a href="#">Separated link</a></li> 
 
\t     <li role="separator" class="divider"></li> 
 
\t     <li><a href="#">One more separated link</a></li> 
 
\t    </ul> 
 
\t    </li> 
 
\t    <li><a href="connect.html">Connect</a></li> 
 
\t   </ul> 
 
\t   
 
\t   
 
\t   </div><!-- /.navbar-collapse --> 
 
\t  </div><!-- /.container-fluid --> 
 
\t  </nav> 
 
\t </header> 
 

 
\t <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    
 
\t </body> 
 
\t </html> 
 
\t

我知道这是很长，但谢谢大家的帮助！

来源

2017-06-27 Connor Svrcek

如果你想使用jquery，添加像'NAV-partial.html'到您的网站的根目录中的文件，添加一个'<导航ID = “导航”>'到您的网页，使用类似'$（'＃nav'）。load（'/ nav-partial.html'）;' –

你必须使用jquery/javascript这个，或者如果你使用一些服务器端代码，如PHP等，那么可以为你做诡计！在html自己这是不可能的。 – neophyte

你不能删除代码，你必须在那里复制和粘贴。 您可以使用元素。只需拿起导航栏代码，然后制作并将其复制到每个页面中。确保你有正确的html文档，并且iframe指向该文档的路径。

您还可以使用jQuery像迈克尔·科克说：

添加像NAV-partial.html到您的网站的根目录中的文件，添加一个<nav id="nav">到您的网页，并使用类似$（” #nav '）负载（'/ NAV-partial.html'）;

$('#nav').load('/nav-partial.html');

来源

2017-06-27 01:50:20 InvincibleM

你所做的只是让他将其复制到每个文件中，而不是将其复制到每个文件中。 – Rob

但它的一小行iframe是。 – InvincibleM

没关系。他不想复制任何东西。 – Rob

在每个页面上都包含Bootstrap的导航栏

回答

相关问题