javascript - 如何解决Bootstrap中的 "style sheet could not be loaded"

标签 javascript html css twitter-bootstrap

我至少应该得到灰色导航栏,但我在底部收到红色符号错误“无法加载样式表”。即使尝试一次删除一个 css 但没有任何帮助。

我还在控制台中收到此错误“ReferenceError:Popper 未定义”。 即使我没有在 sublime 中得到与 Bootstrap 类相关的自动建议。

<!DOCTYPE html>
<html>
    <head>
        <!-- Website Title & Description for Search Engine purposes -->
        <title></title>
        <meta charset="UTF-8" name="description" content="">

        <!-- Mobile viewport optimized -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Bootstrap CSS -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="includes/css/styles.css" rel="stylesheet">

        <!-- Include Modernizr in the head, before any other Javascript -->
        <script src="includes/js/modernizr-2.6.2.min.js"></script>
    </head>
    <body>

    <div class="container" id="main">

        <div class="navbar navbar-fixed-top">
            <div class="container">
                <a class="navbar-brand" href="/" src="/images/logo.png" alt="your logo"/>
            </div><!-- end container-->
        </div><!-- end navbar-->

        <div class="carousel slide" id="myCarousel">

        </div><!-- end Carousel -->

        <div class="row" id="bigCallout">

        </div><!-- end bigCallout-->

        <div class="row" id="featuresHeading">

        </div><!-- end featuresHeading-->

        <div class="row" id="features">

        </div><!-- end features-->

        <div class="row" id="moreInfo">

        </div><!-- end moreInfo-->

        <div class="row" id="moreCourses">
        </div> <!-- end moreCourses -->

    </div><!--end container -->

    <footer>
    </footer>

    <!-- All Javascript at the bottom of the page for faster page loading -->

    <!-- First try for the online version of jQuery-->
    <script src="http://code.jquery.com/jquery.js"></script>

    <!-- If no online access, fallback to our hardcoded version of jQuery -->
    <script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>

    <!-- Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!-- Custom JS -->
    <script src="includes/js/script.js"></script>

    </body>
</html>

最佳答案

来自Bootstrap网站

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

<script src="path/jquery"></script>
<script src="path/popper"></script>
<script src="path/bootstrap"></script>

您似乎需要在应用程序中添加 popper.js。请注意上述代码片段中的文件顺序

关于javascript - 如何解决Bootstrap中的 "style sheet could not be loaded",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47525249/

相关文章:

javascript - chop 循环内文本的字符

javascript - onmouseover="document.getElementById 多个 div

angularjs - 我想通过视频js流式传输.m3u8格式的音频

javascript - 解码这个动态增加输入宽度的例子

jquery - 让两个div具有相同的高度

javascript - 具有不同时刻的谷歌图表时间轴

javascript - imacros/javascript 循环,在下一个按钮上有条件

javascript - 如何更改 botman.io 小部件的默认背景颜色

css - Bootstrap 布局在宽屏显示器上表现得很奇怪

javascript - 在 WordPress 中使用 Headroom.js