解决方案:
您可以通过导入来使用捆绑的 bootstrap popper
<script src="/js/bootstrap.bundle.min.js"></script>
查看文档here.
或者使用UDMpopper 的版本,请参阅下面的详细信息。
波普尔的使用步骤
我喜欢包管理器。所以这里是:
npm init
只要对一切说“是”..
npm install bootstrap --save
npm install jquery --save
npm install popper.js --save
我使用index.html文件创建了两个文件夹js和css,如下所示:
index.html
package.json
package-lock.json
|_ js
|_ css
|_ node_modules
|_ bootstrap
|_ dist
|_ jquery
|_ dist
|_ popper.js
|_ dist
|_udm
|_esm
然后,我将文件从位于 node_modules 中的各个库中的 dist 文件夹复制到 css 和 js 文件夹。除了波普尔之外,使用位于 dist/udm 文件夹中的 popper.js 文件或 popper.min.js 文件
index.html文件内容如下:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Popper Test</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- <script src="/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>
运行我使用的示例:
找到 http 服务器here通过跑步
npm install http-server -g
http-server
如果您还没有使用UDM版本那么打开 chrome 并转到http://127.0.0.1:8080。打开我的页面,按 F12,然后尝试按下拉菜单失败,并显示错误消息:
bootstrap.min.js:6 Uncaught TypeError: Bootstrap's dropdowns require Popper.js (https://popper.js.org/)
at c.t.toggle (bootstrap.min.js:6)
at HTMLButtonElement.<anonymous> (bootstrap.min.js:6)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.c._jQueryInterface [as dropdown] (bootstrap.min.js:6)
at HTMLButtonElement.<anonymous> (bootstrap.min.js:6)
at HTMLDocument.dispatch (jquery.min.js:2)
at HTMLDocument.y.handle (jquery.min.js:2)
要么使用UDM上述版本或捆绑引导版本,通过切换:
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- <script src="/js/bootstrap.bundle.min.js"></script> -->
to :
<script src="/js/jquery.min.js"></script>
<!-- <script src="/js/popper.js"></script> -->
<!-- <script src="/js/bootstrap.min.js"></script>-->
<script src="/js/bootstrap.bundle.min.js"></script>
Works.
实施的版本是:
-
引导程序: 4.2.1
-
jquery: 3.3.1
-
波普尔.js: 1.14.6