不明白為什么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