不明白为什么Bootstrap JS和Jquery的CDN不能工作，除非同时在HTML Head和HTML Body内使用

Question

我的脚本在此页面上无法正常工作。

如果我从HTML主体中取出Bootstrap CDN和Jquery CDN，它将无法在我的页面上工作，反之亦然，如果我从主体中取出它并将其留在HEAD中，它将无法工作。 仅当它在头部和身体中时才起作用。

你知道为什么吗？ 参见下面的代码：

<!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>

Answer 1

您的脚本顺序错误-引导程序需要事先加载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>

以该顺序。

您感到困惑的原因是，在您的头部获得了bootstrap（因为jQuery不存在而没有执行任何操作），然后加载了jQuery...。然后，在您的身体底部再次加载了bootstrap（这次可以工作）（因为jQuery预先包含在头部中），然后再次加载jQuery（毫无意义）。

因此，想法是，您加载jQuery，然后进行引导，一切都很好！

不明白为什么Bootstrap JS和Jquery的CDN不能工作，除非同时在HTML Head和HTML Body内使用

问题描述

1 个解决方案

解决方案1
0 2017-08-20 20:25:33

不明白为什么Bootstrap JS和Jquery的CDN不能工作，除非同时在HTML Head和HTML Body内使用

问题描述

1 个解决方案

解决方案1 0 2017-08-20 20:25:33

解决方案1
0 2017-08-20 20:25:33