时间戳

首页 > 解决方案 > Bootstrap 4 不会运行 Javascript 依赖文件

jquery - Bootstrap 4 不会运行 Javascript 依赖文件

问题描述

我很难理解为什么以下代码无法正常工作。

页脚中的 .js 脚本似乎根本不起作用，包括 .css 在内的所有 3 个脚本都是从今天的“GetBoostrap”直接获取的，并且是他们的建议版本，所以不知道为什么它们在运行时不起作用本地存储在我的电脑上，代码中显示的所有文件路径都是正确的。CSS 工作正常，并使用与 .js 文件相同的路径样式。此外，.js 文件的顺序完全按照 GetBootstrap 的指示。

使用的脚本版本如下（并且都是可用的最新版本）：

请忽略中间使用的虚拟文本 - 它只是为页面添加一些结构。

<!DOCTYPE html>
<html lang="en">

    <head>

            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <title>PAGE TITLE HERE</title>

            <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

        </head>

        <body>

        <header>

            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">WebSiteName</a>
                    </div>
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Page 1</a></li>
                            <li><a href="#">Page 2</a></li>
                            <li><a href="#">Page 3</a></li>
                        </ul>
                </div>
            </nav>

        </header>

            <div class="container">
                <div class="col-xs-10">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>

                    <p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
                    <p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>

                    <p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>

                    <p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>

                    <p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>

                    <p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>

                    <p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>

                    <p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
                </div>
            </div>

            <div class="jumbotron jumbotron-fluid">
                <div class="container">
                    <h2>Jumbatron</h2>
                    <h6>This is an example of the use of a Jumbatron on the page. It can hold all sorts of content and is a good way to break up long sections of page content or draw a users eye to specific content that you would like them to see. The title in this Jumbatron is using the H2 tag where as the main body of content is using the H6 tag.</h6>
                </div>
            </div>

            <div class="container">
                <div class="col-xs-10">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>

                    <p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
                    <p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>

                    <p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>

                    <p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>

                    <p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>

                    <p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>

                    <p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>

                    <p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
                </div>
            </div>

        <footer>
            <script src="js/jquery-3.3.1.js"></script>
            <script src="js/popper.js"></script>
            <script src="js/bootstrap.js"></script>
        </footer>

        </body>

</html>

标签： jqueryhtmlbootstrap-4navbarpopper.js

解决方案

我已经意识到问题出在哪里，我觉得自己像个白痴一样没有早点意识到......

这些脚本实际上都可以正常工作，因为我认为应该是这样，没有工作的是我输入的导航代码，我认为由于脚本而无法工作。

原来我在导航中使用的是 Bootstrap 3 代码，而不是我有意设置的 Bootstrap 4。菜鸟失误！

一个工作导航的例子是：

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        <a class="navbar-brand" href="#">Logo</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
    </nav>

推荐阅读