библиотека Jquery не найден в Bootstrap

Question

В разделе главы моего сайта у меня есть этот ресы:

КОД 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 

Что это за ошибка и как я могу ее решить? Это неправильный порядок размещения ресурсов?

Не могли бы вы рассказать мне, как исправить эту ошибку?

Заранее благодарен!

Answer 1

Это потому, что вы пытаетесь использовать (как в, вы ссылаетесь на файл сценария) Загрузочный лоток перед тем, как вы ссылаетесь JQuery.

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 добирается до него и пытается его запустить, он не знает, что такое jQuery, и так не получится, потому что код Bootstrap пытается использовать биты jQuery внутри него.
Однако, если jQuery был разобран сначала механизмом JavaScript, он уже знал бы, что это было к тому моменту, когда он попал в код BootStrap, и все будет хорошо!

Таким образом, чтобы уточнить, эту строку:

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

Needs появляться перед этой линии:

<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> 

Answer 2

В официальной документации http://getbootstrap.com/customize/#plugins

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

Добавить этот тег (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>