标签: popper.js

我刚刚创建了一个全新的angular-cli项目
并运行npm install bootstrap@4.0.0-beta jquery popper.js --save
并更改了.angular-cli.json的相关部分,如下所示

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/popper.js/dist/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

但是接收到以下错误

10:2287 Uncaught SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25)
    at scripts.bundle.js:1

任何想法如何解决它？

提前致谢...

我尝试安装bootstrap 4,并包含以下链接

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>

但发生以下错误:

未捕获的syntaxError:意外的令牌导出

任何想法如何解决它？

我老了,所以我将源代码下载到1.12.0然后执行以下操作:

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

但是我得到了:

Uncaught SyntaxError: Unexpected token export

在线2294说:

export default Popper;

从我到目前为止所读到的内容来看,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>

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

这似乎是一个蹩脚的问题,但我无法弄清楚.如何导入与Bootstrap 4 beta相关的popper.js？

我使用凉亭,我已经安装了Bootstrap 4 beta.现在在bower_components文件夹中有一个popper.js目录,其中包含一些子文件夹.问题是没有dist文件夹和popper.min.js文件.

Bootstrap 4指向CDN的指南:https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

但是如何在没有CDN的情况下导入popper.js？哪里可以找到popper.min.js文件？

编辑:即使我zip从popper.js网站下载它包含完全相同的文件bower.

所以,在过去的几个小时里我一直在努力让我的bootstrap导航栏在我的rails 5.1.3 app中工作.没有成功.我发现一个控制台错误说

未捕获的错误:Bootstrap下拉列表需要Popper.js

我知道bootstrap正在放弃tether而选择popper.js.我把它添加到Gemfile中

gem 'popper_js', '~> 1.11', '>= 1.11.1'

它没有做任何事.像这样添加到application.js

//= require popper

但仍然没有.过了一会儿,我碰到了Joshua Colvin关于Angular中popper.js 的回答.在代码中移动popper行后,就像这样

//= require popper
//= require turbolinks
//= require bootstrap

并得到它的工作.我想与社区分享这个,因为这是一个非常新的话题,很难找到这个修复.希望这能帮助很多程序员;)

当视口底部没有空间来容纳下拉菜单时,它会显示在其下拉按钮的顶部.是否有可能改变此行为并使下拉列表始终显示在底部？

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

我无法将bootstrap 4(beta)安装到我的MVC项目中.确切地说,popper.js nuget依赖是无法安装的.请让我知道任何可行的方法(凉亭安装仍然是一种方式,但我想与nuget一起去)

无法安装包'popper.js 1.11.0'.您正在尝试将此软件包安装到以".NETFramework,Version = v4.6.2"为目标的项目中,但该软件包不包含任何与该框架兼容的程序集引用或内容文件.有关更多信息,请与软件包作者联系

如果我不使用下拉菜单,我想询问Popper.js是否绝对必要.是否有任何其他由popper驱动的部分在没有库的情况下无法工作？

我正在使用Popper.js显示一个弹出.js-share-cf-popover 元素,在单击带有类的元素时使用该类.js-share-cf-btn.

但我希望弹出窗口只有在我点击它之外才能关闭.这是我显示弹出窗口的实际代码:

var reference = $('.js-share-cf-btn');
var popover = $('.js-share-cf-popover');
popover.hide();

$(document).on('click', reference, function(e) {
  e.preventDefault();

  popover.show();

  var popper = new Popper(reference, popover, {
    placement: 'top',
  });
});

我在这里发现了一些东西,但我无法让它发挥作用

在这里,我的jsfiddle