在 Bootstrap 中找不到 jQuery 库

The jQuery library is not found in Bootstrap

在我网站的部分负责人中,我有以下资源:

代码 HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.2.1/jquery.velocity.min.js"></script>

问题是我得到这个错误:

Uncaught Error: Bootstrap's JavaScript requires jQuery

这个错误是什么,我该如何解决? 发布资源的顺序错了吗?

你能告诉我如何解决这个错误吗?

提前致谢!

在官方文档中http://getbootstrap.com/customize/#plugins

jQuery required All plugins require the latest version of jQuery to be included.

在 bootstrap 上方添加此标签(jquery 脚本):

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

在此处添加:

<!-- Jquery library -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.2.1/jquery.velocity.min.js"></script>

这是因为您在引用 jQuery.

之前尝试使用(例如,您正在引用脚本文件)Bootstrap

jQuery 是 Bootstrap 的先决条件,必须首先引用,如 Bootstrap 网站所述:Bootstrap - Getting Started

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.


虽然您确实在标记中包含了对 jQuery 的引用,但请务必注意引用出现的顺序。
当您的页面是 运行 时,JavaScript 引擎将从该列表的顶部开始,然后一个接一个地处理它,运行按此顺序在其中添加代码。
由于您在列表中的 BootStrap 比 jQuery 更高,当 JavaScript 引擎到达它并尝试 运行 它时,它不知道 [=42] =] 还没有,所以会失败,因为 Bootstrap 代码试图在其中使用 jQuery 的位。
但是,如果 jQuery 首先被 JavaScript 引擎解析,它在到达 BootStrap 代码时就已经知道它是什么了,一切都会好起来的!

所以,为了澄清,这一行:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

需要出现在这一行之前:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  

在您的标记中。

像这样:

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<!-- Include jQuery before any scripts that depend upon it -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<!-- Include Bootstrap after it's dependency (jQuery) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.2.1/jquery.velocity.min.js"></script>