不明白为什么Bootstrap JS和Jquery的CDN不能工作，除非同时在HTML Head和HTML Body内使用
[英]Do not understand why the CDN for Bootstrap JS and Jquery will not work unless in both the HTML Head & within the HTML Body
问题描述
I'm having a weird problem getting my scripts to work on this page. 
我的脚本在此页面上无法正常工作。
If I take the Bootstrap CDN and Jquery CDN out of the HTML Body, it will not work on my page and vice versa, if I take it out of the body and leave in the HEAD it will not work. 如果我从HTML主体中取出Bootstrap CDN和Jquery CDN，它将无法在我的页面上工作，反之亦然，如果我从主体中取出它并将其留在HEAD中，它将无法工作。 It is only working if it is in BOTH the Head & Body. 仅当它在头部和身体中时才起作用。
Do you know why? 你知道为什么吗？ See code below: 参见下面的代码：
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<!-- Bootstrap css CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- bootstrap JS CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Jquery CDN-->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Navbar header -->
<div class="navbar-header">
<!-- collapse button -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- brand -->
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a>
</div>
<!-- hide at mobile size -->
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<!-- left side -->
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- right side -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><i class="fa fa-camera-retro" aria-hidden="true"></i> The Image Gallery</h1>
<p>A bunch of beautiful images that I didn't take!</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="photo1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="photo1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="photo1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="photo1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="photo1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="photo1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="photo1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="photo1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="photo1.jpg">
</div>
</div>
</div>
</div>
<!-- bootstrap JS CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Jquery CDN-->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.2.1.js"></script>
</body>
</html>
1 个解决方案
解决方案1
0 2017-08-20 20:25:33
You have your scripts in the wrong order - bootstrap needs jQuery to be loaded beforehand, so, in your head: 您的脚本顺序错误-引导程序需要事先加载jQuery，因此，在您的头上：
<!-- Jquery CDN-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- bootstrap JS CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
in that order. 以该顺序。
The reason you are getting confused is because in the head you get bootstrap (does nothing because jQuery isn't there) and then load jQuery.... Then, at the bottom of your body you are loading bootstrap again (will work this time because jQuery was included beforehand in the head), and then you load jQuery again (pointless). 您感到困惑的原因是，在您的头部获得了bootstrap（因为jQuery不存在而没有执行任何操作）， 然后加载了jQuery...。然后，在您的身体底部再次加载了bootstrap（这次可以工作） （因为jQuery预先包含在头部中），然后再次加载jQuery（毫无意义）。
So the idea is, you load jQuery, then bootstrap, and all is good! 因此，想法是，您加载jQuery，然后进行引导，一切都很好！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.