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

Question

从我到目前为止所读到的内容来看,popper.js对于Bootstrap 4来说是一个巨大的痛苦.我无法让它发挥作用.我一直收到这个错误:

错误:Bootstrap下拉列表需要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>

我有什么想法我做错了吗？

Answer 1

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

Answer 2

试着这样做:

npm install bootstrap jquery popper.js --save

有关更多信息,请参阅此页面:如何使用webpack中的bootstrap-in-your-project-bootstrap

Answer 3

对于popper,https: //cdnjs.com/libraries/popper.js看起来不是正确的src,它没有指定文件

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

它工作得非常好,试一试

Answer 4

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

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

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

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

npm install bootstrap --save

npm install popper.js --save

npm install jquery --save

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

（感谢上面评论中的@rakeshk-khanapure）

Answer 5

我在安装 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成功安装了！

Answer 6

npm install bootstrap jquery --save

您不必使用 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>