twitter-bootstrap 如何使用 Bootstrap 4 安装 popper.js？

How to install popper.js with Bootstrap 4?

提问by 4thSpace

From what I've read so far, popper.js is a big pain with Bootstrap 4. I can't get it to work. I keep getting this error:

从我目前所读到的，popper.js 是 Bootstrap 4 的一大痛点。我无法让它工作。我不断收到此错误：

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. Same result. At the bottom of my HTML file, I have this for the NPM install:

我试过 CDN 和 NPM 安装。结果一样。在我的 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?

任何想法我做错了什么？

采纳答案by Sam Hajari

https://cdnjs.com/libraries/popper.jsdoes 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

它工作得很好，试一试

回答by Jobayer Ahmmed

Bootstrap 4 has two dependencies: jQuery 1.9.1 and popper.js 1.12.3. When you install Bootstrap 4, you need to install these two dependencies.

Bootstrap 4 有两个依赖项：jQuery 1.9.1 和 popper.js 1.12.3。安装Bootstrap 4时，需要安装这两个依赖。

• Install popper.js: npm install popper.js@^1.12.3 --save
• Install jQuery: npm install [email protected] --save
• Install Bootstrap: npm install [email protected] --save

• 安装 popper.js： npm install popper.js@^1.12.3 --save
• 安装 jQuery： npm install [email protected] --save
• 安装引导程序： npm install [email protected] --save

For Bootstrap 4.1

对于 Bootstrap 4.1

• npm install popper.js@^1.14.3 --save
• npm install [email protected] --save
• npm install [email protected] --save

• npm install popper.js@^1.14.3 --save
• npm install [email protected] --save
• npm install [email protected] --save

回答by Pawel Nieradka

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

回答by Chris

Two different ways I got this working.

我得到这个工作的两种不同方式。

Option 1:Add these 3 <script>tags to your .htmlfile, 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 bootstrap --save

npm install popper.js --save

npm install popper.js --save

npm install jquery --save

npm install jquery --save

Step 2:Update the script:array(s) in your angular.jsonfile like this:

第 2 步：像这样更新文件中的script:数组angular.json：

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

回答by DavidLio

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 [email protected] --save

安装 jQuery：npm install [email protected] --save

Then I had a high severity vulnerabilitymessage when installing [email protected] and got this message:

然后我在安装 [email protected] 时收到了一个 高危漏洞消息，并得到了这个消息：

run npm audit fixto fix them, or npm auditfor details

运行npm audit fix以修复它们，或npm audit了解详细信息

So I did npm audit fix, and after another npm audit fix --forceit successfully installed!

所以我做到了npm audit fix，然后又npm audit fix --force成功安装了！

回答by Harsha Vardhan

Paweland Jobayerhas 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. use the following command

如果您使用像 bower 这样的前端包管理器。使用以下命令

bower install popper.js --save

回答by kmiklas

Here is a work-around:

这是一个解决方法：

1. Create a jsdirectory in the same directory as your index.html
2. Download popper.min.js from the following site into said jsdirectory https://github.com/FezVrasta/popper.js#installation

1. js在与 index.html 相同的目录中创建一个目录
2. 从以下站点下载 popper.min.js 到上述js目录 https://github.com/FezVrasta/popper.js#installation

e.g.: https://unpkg.com/popper.js/dist/umd/popper.min.js

例如：https: //unpkg.com/popper.js/dist/umd/popper.min.js

1. Change your the src of your script include to look like this:

   src="js/popper.min.js"

2. 将您的脚本包含的 src 更改为如下所示：

   src="js/popper.min.js"

Note that you've removed Popper from npmversion control, so you'll have to manually download updates.

请注意，您已从npm版本控制中删除了 Popper ，因此您必须手动下载更新。

回答by novice programmer

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');

回答by Adetoro E.Adewale

I have the same problem while learning Node.js Here is my solution for it to install jquery

我在学习 Node.js 时遇到了同样的问题 这是我安装 jquery 的解决方案

npm install [email protected] --save
npm install popper.js@^1.12.9 --save

回答by user8009263

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 的更新版本 不要在那里提及任何版本，它会为您工作。