Bootstrap 4 Beta - Popper.js是否是必需的？

Question

Bootstrap 4 Beta - Popper.js是否是必需的？

twitter-bootstrapbootstrap-4popper.js

25

我想问一下，如果我不使用下拉菜单，Popper.js是否绝对必要？是否有其他由Popper驱动的部分没有该库将无法正常工作？

- AndiLeni

5个回答

17

如果你使用 bootstrap.bundle.js 或 bootstrap.bundle.min.js 代替 bootstrap.js 或 bootstrap.min.js，那么就不需要 Popper.js了。这是因为 bootstrap.bundle.* 库内部包含了 popper。

你可以从这里下载所有的 Bootstrap 文件。

- Prince Ahmed

2

在Bootstrap 4.3.1中，bootstrap.bundle.js比bootstrap.js更大，我非常确定它包括了popper，所以它基本上是相反的 :( - cancerbero

9

现在已经不用了，请查看此问题。Bootstrap将Popper和Bootstrap v4打包成一个bundle.min.js文件，可以直接下载使用。这里是指向捆绑的min文件的链接。希望这能帮助那些不想添加单独popper文件的人。

- PirateApp

5

另外，如果您只使用bootstrap的非Popper JS功能，则可以模拟Popper并加载bootstrap（这样Bootstrap将正常工作，并且不会抛出有关缺少Popper的错误）：

<script>
    window.Popper = {}
</script>
<script src="js/bootstrap.min.js"></script>

- Max

1

使用Bootstrap 4.1.x，它更像是var Popper = function() {}。 - AaA

2

如果你使用Bootstrap JS，那么需要使用Popper.js。如果只使用Bootstrap CSS，则不需要使用Popper.js。

阅读文档

- Carol Skelly

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- juzraai · Accepted Answer

如果你在Bootstrap 4的文档中搜索"popper"，将出现以下结果：

工具提示依赖于第三方库Popper.js进行定位。

弹出框依赖于第三方库Popper.js进行定位。

下拉菜单是基于第三方库Popper.js构建的，该库提供动态定位和视口检测。

因此这些是需要Popper.js的Bootstrap 4组件。尽管在Bootstrap 4中声明了Popper.js是必需的，并且如果找不到Popper.js，Bootstrap 4 JS会记录一个错误，但如果您不需要工具提示、弹出框、下拉菜单或模态框，则仍然可以使用Bootstrap 4 JS而不需要Popper。 例如导航栏的JS功能（右边的移动菜单）可以正常使用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>