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

Question

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

Answer 1

如果您使用 Bootstrap JS，则需要

Popper.js。如果您仅使用 Bootstrap CSS.

，则 不需要

Read the docs

Answer 2

如果您在 Bootstrap 4's documentation 中搜索“popper”，将会出现以下结果：

Tooltips rely on the 3rd party library Popper.js for positioning.

Popovers rely on the 3rd party library Popper.js for positioning.

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection.

所以这些是 Bootstrap 4 个组件，需要 Popper.js。

虽然 Popper.js 是 Bootstrap 4 的要求，Bootstrap 4 如果找不到 Popper 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>

Answer 3

不再是，检查 THIS issue It seems Bootstrap has bundled Popper and Bootstrap v4 into a bundle.min.js file that is available if you try downloading now. HERE 是 link 直接到捆绑的 min 文件。希望对那些对添加单独的 popper 文件不感兴趣的人有所帮助

Answer 4

Popper.js 如果您使用 bootstrap.bundle.js 或 bootstrap.bundle.min.js 而不是 bootstrap.js 或 bootstrap.min.js。那是因为 bootstrap.bundle.* 库内部包含 popper。您可以从 here

下载所有 bootstrap 个文件

Answer 5

或者，如果您只使用 bootstrap 的非 Popper JS 功能，您可以伪造 Popper 并加载 bootstrap（因此 Bootstrap 将起作用并且不会抛出关于 Popper 丢失的错误):

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

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

Bootstrap 4 Beta - Is Popper.js required?

twitter-bootstrap

bootstrap-4

popper.js