Do not understand why the CDN for Bootstrap JS and Jquery will not work unless in both the HTML Head & within the HTML Body
Question
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. 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 answers
solution1
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 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).
So the idea is, you load jQuery, then bootstrap, and all is good!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.