Bootstrap 4 Beta - 是否需要 Popper.js？

Question

如果我不使用下拉菜單，我想問一下 Popper.js 是否絕對必要。 是否有任何其他由 popper 驅動的部件在沒有庫的情況下無法工作？

Answer 1

如果在Bootstrap 4 的文檔中搜索“popper”，會出現以下結果：

工具提示依賴於 3rd 方庫 Popper.js 進行定位。

Popovers 依靠 3rd 方庫 Popper.js 進行定位。

下拉列表建立在第三方庫 Popper.js 之上，該庫提供動態定位和視口檢測。

所以這些是需要 Popper.js 的 Bootstrap 4 組件。

雖然 Popper.js 被聲明為 Bootstrap 4 所必需的，並且 Bootstrap 4 JS 如果找不到 Popper 會記錄一個錯誤，但如果您不需要工具提示、彈出框、下拉菜單，您仍然可以使用沒有 Popper 的 Bootstrap 4 JS模態。

例如導航欄的 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 2

如果您使用bootstrap.bundle.js或bootstrap.bundle.min.js而不是bootstrap.js或bootstrap.min.js ，則不需要 Popper.js 。 那是因為 bootstrap.bundle.* 庫在內部包含 popper。 您可以從這里下載所有引導程序文件

Answer 3

不再，檢查這個問題 似乎 Bootstrap 已將 Popper 和 Bootstrap v4 捆綁到一個 bundle.min.js 文件中，如果您現在嘗試下載，該文件可用。 這里是直接指向捆綁的 min 文件的鏈接。 希望能幫助那些對添加單獨的 popper 文件不感興趣的人

Answer 4

或者，如果您只使用 bootstrap 的非 Popper JS 功能，您可以偽造 Popper 並加載 bootstrap（因此 Bootstrap 將起作用並且不會拋出有關缺少 Popper 的錯誤）：

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

Answer 5

如果您使用 Bootstrap JS，則需要 Popper.js。 如果你只使用CSS引導它不是必需的。

閱讀文檔