[英]How to install popper.js with Bootstrap 4?
From what I've read so far, popper.js is a big pain with Bootstrap 4. I can't get it to work.从我目前所读到的,popper.js 对 Bootstrap 4 来说是一个很大的问题。我无法让它工作。 I keep getting this error:我不断收到此错误:
Error: Bootstrap dropdown require Popper.js ( https://popper.js.org )错误:Bootstrap 下拉菜单需要 Popper.js ( https://popper.js.org )
I've tried the CDN and NPM install.我试过 CDN 和 NPM 安装。 Same result.结果一样。 At the bottom of my HTML file, I have this for the NPM install:在我的 HTML 文件的底部,我有这个用于 NPM 安装:
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Then tried this for the CDN:然后为 CDN 尝试了这个:
<script src="/js/jquery.min.js"></script>
<script src="/js/tether.min.js"></script>
<script src="https://cdnjs.com/libraries/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>
Any ideas what I'm doing wrong?任何想法我做错了什么?
Bootstrap 4 has two dependencies: jQuery 1.9.1 and popper.js 1.12.3. Bootstrap 4 有两个依赖项:jQuery 1.9.1 和 popper.js 1.12.3。 When you install Bootstrap 4, you need to install these two dependencies.安装Bootstrap 4时,需要安装这两个依赖。
npm install popper.js@^1.12.3 --save
安装 popper.js: npm install popper.js@^1.12.3 --save
npm install jquery@1.9.1 --save
安装 jQuery: npm install jquery@1.9.1 --save
npm install bootstrap@4.0.0-beta.2 --save
安装 Bootstrap: npm install bootstrap@4.0.0-beta.2 --save
For Bootstrap 4.1对于 Bootstrap 4.1
npm install popper.js@^1.14.3 --save
npm install jquery@3.3.1 --save
npm install bootstrap@4.1.1 --save
https://cdnjs.com/libraries/popper.js does not look like a right src for popper, it does not specify the file https://cdnjs.com/libraries/popper.js看起来不像 popper 的正确 src,它没有指定文件
with bootstrap 4 I am using this使用 bootstrap 4 我正在使用这个
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
and it is working perfectly fine, give it a try它工作得很好,试一试
Try doing this:尝试这样做:
npm install bootstrap jquery popper.js --save
See this page for more information: how-to-include-bootstrap-in-your-project-with-webpack有关更多信息,请参阅此页面: how-to-include-bootstrap-in-your-project-with-webpack
Two different ways I got this working.我得到这个工作的两种不同方式。
Option 1: Add these 3 <script>
tags to your .html
file, just before the closing </body>
tag:选项 1:将这 3 个<script>
标签添加到您的.html
文件中,就在结束</body>
标签之前:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Option 2 (Option 2 works with Angular, not sure about other frameworks)选项 2 (选项 2 适用于 Angular,不确定其他框架)
Step 1: Install the 3 libraries using NPM:步骤 1:使用 NPM 安装 3 个库:
npm install bootstrap --save
npm install popper.js --save
npm install jquery --save
Step 2: Update the script:
array(s) in your angular.json
file like this:第 2 步:像这样更新angular.json
文件中的script:
array(s):
"scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"]
(thanks to @rakeshk-khanapure above in the comments) (感谢上面评论中的@rakeshk-khanapure)
I had problems installing it Bootstrap as well, so I did:我在安装 Bootstrap 时也遇到了问题,所以我做了:
Install popper.js: npm install popper.js@^1.12.3 --save
安装 popper.js: npm install popper.js@^1.12.3 --save
Install jQuery: npm install jquery@1.9.1 --save
安装 jQuery: npm install jquery@1.9.1 --save
Then I had a high severity vulnerability message when installing jquery@1.9.1 and got this message:然后我在安装 jquery@1.9.1 时收到了一个高危漏洞消息,并得到了这个消息:
run
npm audit fix
to fix them, ornpm audit
for details运行npm audit fix
来修复它们,或者npm audit
以获取详细信息
So I did npm audit fix
, and after another npm audit fix --force
it successfully installed!所以我做了npm audit fix
,并在另一个npm audit fix --force
之后成功安装!
Pawel and Jobayer has already mentioned about how to install popper.js through npm. Pawel和Jobayer已经提到了如何通过 npm 安装 popper.js。
If you are using front-end package manager like bower.如果您使用像 bower 这样的前端包管理器。 use the following command使用以下命令
bower install popper.js --save
It's simple you can Visit this , And save the file as popper.min.js很简单,你可以访问这个,并将文件保存为 popper.min.js
then import it.然后导入它。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import 'bootstrap/dist/js/popper.min.js';
global.jQuery = require('jquery');
require('bootstrap');
npm install bootstrap jquery --save
You don't have to install popper.js with npm as it comes with npm Bootstrap in bootstrap.bundle.js
.您不必使用 npm 安装 popper.js,因为它在bootstrap.bundle.js
随 npm Bootstrap 一起提供。
Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not jQuery.捆绑的 JS 文件(bootstrap.bundle.js 和缩小的 bootstrap.bundle.min.js)包括 Popper,但不包括 jQuery。
Now you only have to do this in your HTML file:现在您只需在 HTML 文件中执行此操作:
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Here is a work-around:这是一个解决方法:
js
directory in the same directory as your index.html在与 index.html 相同的目录中创建一个js
目录js
directory https://github.com/FezVrasta/popper.js#installation从以下站点下载 popper.min.js 到上述js
目录https://github.com/FezVrasta/popper.js#installationeg: https://unpkg.com/popper.js/dist/umd/popper.min.js例如: https : //unpkg.com/popper.js/dist/umd/popper.min.js
Change your the src of your script include to look like this:将您的脚本包含的 src 更改为如下所示:
src="js/popper.min.js" src="js/popper.min.js"
Note that you've removed Popper from npm
version control, so you'll have to manually download updates.请注意,您已从npm
版本控制中删除了 Popper,因此您必须手动下载更新。
I have the same problem while learning Node.js Here is my solution for it to install jquery我在学习 Node.js 时遇到了同样的问题 这是我安装 jquery 的解决方案
npm install jquery@1.9.1 --save
npm install popper.js@^1.12.9 --save
Instead of remotely putting popper js from CDN you can directly install it in your angular project.您可以直接将 popper js 安装在您的 angular 项目中,而不是从 CDN 远程放置 popper js。
Try this.试试这个。
npm install popper.js --save
This query installs an updated version of popper.js Don't mention any version there, it will work for you.此查询安装 popper.js 的更新版本 不要在那里提及任何版本,它将为您工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.