代码之家  ›  专栏  ›  技术社区  ›  4thSpace wkw

如何安装提升器。带引导4的js?

  •  63
  • 4thSpace wkw  · 技术社区  · 7 年前

    据我所知,波普。js是Bootstrap 4的一大难题。我无法让它工作。我一直遇到这个错误:

    错误:引导下拉需要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>
    

    知道我做错了什么吗?

    11 回复  |  直到 7 年前
        1
  •  79
  •   Jobayer Ahmmed    6 年前

    Bootstrap 4有两个依赖项:jQuery 1.9.1和popper。js 1.12.3。安装引导4时,需要安装这两个依赖项。

    • 安装提升阀。js: npm install popper.js@^1.12.3 --save
    • 安装jQuery: npm install jquery@1.9.1 --save
    • 安装引导程序: npm install bootstrap@4.0.0-beta.2 --save

    用于引导4.1

    • npm install popper.js@^1.14.3 --save
    • npm install jquery@3.3.1 --save
    • npm install bootstrap@4.1.1 --save
        2
  •  26
  •   Sam Hajari    7 年前

    https://cdnjs.com/libraries/popper.js 看起来不像popper的右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>
    

    它工作得很好,试试看

        3
  •  25
  •   Miriam    6 年前

    尝试这样做:

    npm install bootstrap jquery popper.js --save
    

    有关更多信息,请参阅本页: how-to-include-bootstrap-in-your-project-with-webpack

        4
  •  7
  •   Jan Erik Schlorf DavidLio    5 年前

    我在安装it Bootstrap时也遇到了问题,所以我做到了:

    安装提升阀。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审核修复 ,一个接一个 npm audit fix --force 它已成功安装!

        5
  •  7
  •   Chris    4 年前

    选项1: <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适用于角度,不确定其他框架)

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

        6
  •  5
  •   Remus Case    4 年前

    npm install bootstrap jquery --save

    你不必安装popper。js带有npm,因为它在 bootstrap.bundle.js .

    捆绑的JS文件(bootstrap.bundle.JS和minified bootstrap.bundle.min.JS)包括Popper,但不包括jQuery。

    要验证的源: Link

    现在,您只需在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>
    
        7
  •  3
  •   hackwithharsha    6 年前

    帕维尔 已经提到了如何安装popper。js通过npm。

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

    bower install popper.js --save
    
        8
  •  3
  •   novice programmer    4 年前

    很简单,你可以 Visit this ,并将文件另存为popper。最小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');
    
        9
  •  1
  •   kmiklas    6 年前

    以下是解决方法:

    1. 创建 js
    2. js公司 目录 https://github.com/FezVrasta/popper.js#installation

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

    1. 将脚本include的src更改为如下所示:

      src=“js/popper.min.js”

    请注意,您已将Popper从 npm

        10
  •  0
  •   user9900365 user9900365    4 年前

    这是我的解决方案 安装jquery

    npm install jquery@1.9.1 --save
    npm install popper.js@^1.12.9 --save
    
        11
  •  -1
  •   user8009263    4 年前

    而不是从CDN远程放置popper js 您可以直接将其安装在angular项目中。

    npm install popper.js --save 
    

    此查询安装了popper的更新版本。js公司 不要在那里提及任何版本,它将适用于您。