logo标签列表

如何在Bootstrap 4中安装popper.js？

twitter-bootstrappopper.js
67

根据我目前所了解的，popper.js 在 Bootstrap 4 中很麻烦，我无法让它工作。我一直在收到以下错误：

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

我尝试过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>

然后尝试使用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>

我做错了什么？

当您检查代码时，是否遇到任何与JavaScript相关的错误？另请参阅：http://getbootstrap.com/docs/4.0/getting-started/introduction/ - Robert
@RobertC：从那个链接获取的CDN似乎解决了这个问题。我想至少对于bs4，你需要Popper 1.12.3而不是1.12.6（NPM版本）。 - 4thSpace
1
只需前往Bootstrap主页，复制/粘贴脚本和CSS的CDN条目即可。 - scottrudy
11个回答
83

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

  • 安装popper.js: npm install popper.js@^1.12.3 --save
  • 安装jQuery: npm install jquery@1.9.1 --save
  • 安装Bootstrap: npm install bootstrap@4.0.0-beta.2 --save

对于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
1
我记得曾经看到过一篇帖子，可以让你使用这三个软件包进行一行操作...可惜我找不到它了！ - klewis
1
我已经使用npm安装了popper，但它仍然被引用自bootstrap文件夹下：ERROR in .//bootstrap/dist/js/bootstrap.js Module not found: Error: Can't resolve 'popper.js' in 'D:\Code\MyApp\node_modules\bootstrap\dist\js' @ .//bootstrap/dist/js/bootstrap.js 7:101-121 @ ./ClientApp/boot.ts @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts - Adrian Rosca
我只更改了jQureey和Popper的版本，并且与Bootstrap 4良好兼容。npm install popper.js@^1.12.9 --save npm install jquery@3.2.1 --save npm install bootstrap@4.0.0 --save - mikia
2
还有一个叫做popper的数据包，我总是搞混它们。 - user6490459
1
将以下脚本文件添加到angular.json文件的scripts数组中。请注意，脚本文件的顺序很重要，并且您需要使用popper js的umd版本。"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" ] - Rakeshk Khanapure
27

https://cdnjs.com/libraries/popper.js不像是正确的popper源，因为它没有指定文件。

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

它完美地运行，试一试吧。

它有效。你能解释一下它们之间的区别吗？ - Si7ius
这个：<script src="https://cdnjs.com/libraries/popper.js"></script> 应该引用一个“.js”文件。但他所提供的链接会带你到一个包含不同版本popper.js的网页。复制链接并粘贴到浏览器中，你就能看到那个页面了。希望这有所帮助。 - Sam Hajari
25
适用于我，但需要添加特定版本。 - racar
8

我有两种方法让这个工作。

选项1： 在你的.html文件中，在结束的</body>标签之前添加以下3个<script>标签：

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

选项2 （选项2适用于Angular，不确定其他框架）

步骤1：使用NPM安装3个库：

npm install bootstrap --save

npm install popper.js --save

npm install jquery --save

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

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

（感谢评论区中的@rakeshk-khanapure提供的信息）
我尝试过这个，因为我喜欢 angular.json 的解决方案。但是这对我不起作用。下拉按钮无法工作 :/ 使用的 Angular 版本是 12.2.11。 - jksevend
7

我也曾遇到安装Bootstrap的问题，所以我采取了以下步骤：

安装popper.js：npm install popper.js@^1.12.3 --save

安装jQuery：npm install jquery@1.9.1 --save

然后在安装jquery@1.9.1时，我收到了一个 高危漏洞 的警告信息，显示如下：

运行npm audit fix来修复这些问题，或者运行npm audit查看详情

于是我执行了npm audit fix，再执行npm audit fix --force，最终成功地安装了它！

5

npm install bootstrap jquery --save

这里安装Bootstrap和jQuery的命令，不必使用npm安装popper.js，因为它在bootstrap.bundle.js中已包含。

捆绑的JS文件（bootstrap.bundle.js和经过压缩的bootstrap.bundle.min.js）包括Popper，但不包括jQuery。

验证来源：链接

现在只需在您的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>
3

Pawel和Jobayer已经提到了如何通过npm安装popper.js。

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

bower install popper.js --save
3

很简单，你可以访问此链接，将文件保存为popper.min.js。

然后导入它。

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');
1
我认为这很简单，虽然我没有以这种方式使用它 :) - Ayemun Hossain Ashik
1
随你便，兄弟。但这很简单。 - novice programmer
1
0

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

npm install jquery@1.9.1 --save
npm install popper.js@^1.12.9 --save
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接