Bootstrap 安装问题

Question

我一直在尝试将 Bootstrap 安装到我正在处理的项目中，但我遇到了 Uncaught Error: Bootstrap's JavaScript requires jQuery。我已经通过 Bower 安装了这两个，所以我不确定这是否相关，但它在查找文件时没有问题，所以我不认为它是相关的。在谷歌上搜索这个问题后，我意识到我引用脚本文件的顺序很重要，所以我改变了它以反映我读过的内容，但这并没有解决问题。当我查看文件资源管理器中的目录时，我看到了一个名为 core.js 的文件，但包含该文件也无济于事。我相当确定这与我引用文件的方式有关，因此我将提供该代码，但请随时询问是否需要更多内容。

index.html（根文件夹，正文中有以下文字）：

<script src="./bower_components/jquery/dist/jquery.js"></script>

<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>

<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>

<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>

Answer 1

您需要 jquery 来消除错误

凉亭安装 jquery

Answer 2

我没有看到您在提供的代码中引用了 jQuery。您已通过 Bower 安装它，但您仍需要添加对它的引用。

<script src="./bower_components/jquery/jquery.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>

<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>

Answer 3

之前导入jQuery脚本，像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>

...

Answer 4

我认为您可能将 jQuery 与 angular 混淆了。您不包括 jQuery，但包括 angular（包括 angular-material，这是 bootstrap 的竞争框架）。

如果你想将 bootstrap 与 angular 一起使用，你可能想使用 ng-bootstrap 而不是标准的 Bootstrap JS，因为它允许你与Bootstrap 个组件来自 angular 个组件。如果你通过 "standard"（非 ng-bootstrap）JavaScript 执行此操作，一旦 Bootstrap JS 改变 DOM，事情就会开始崩溃。您也无法从组件状态推断视图状态（因为您需要调用 bootstrap JS 的函数而不是数据绑定），这几乎就是 angular 的全部想法.

Answer 5

Bootstrap 需要 jQuery 才能正常工作

以下是您应该如何将它们都包括在内

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"> <!--Bootstrap CSS-->
        <link rel="stylesheet" href="css/main.css"> <!--Your custom css file-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>
    <body>

        
        <!-- Your content goes here -->


    <script src="js/jquery-1.12.4.min.js"></script><!--jQuery -->
    <script src="js/bootstrap.min.js"></script><!--Bootstrap js-->
    <script src="js/main.js"></script> <!--Your custom javascript file-->
    </body>

</html>

Answer 6

我认为您在引用 JQuery 时犯了错误。

应该是这样的：

<script src="bower_components/jquery/dist/jquery.min.js"></script>

并确保在任何其他脚本文件之前包含它。

包含 JQuery 的正确方法也在 bower.io 的使用包 https://bower.io/

下给出

Bootstrap 安装问题

Bootstrap Installation Issues

html

javascript

jquery

twitter-bootstrap

bower