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

发布时间：2020-12-17 21:22:26 所属栏目：安全来源：网络整理

导读：如果我不使用下拉菜单,我想询问Popper.js是否绝对必要. 是否有任何其他由popper驱动的部分在没有库的情况下无法工作？解决方法如果您在 Bootstrap 4’s documentation中搜索“popper”,将会出现以下结果： Tooltips rely on the 3rd party library Popper.

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

解决方法

如果您在 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.

所以这些是需要Popper.js的Bootstrap 4组件.

虽然Popper.js是Bootstrap 4所要求的,但Bootstrap 4 JS如果找不到Popper就会记录错误,如果你不需要工具提示,弹出窗口或下拉列表,你仍然可以使用没有Popper的Bootstrap 4 JS.

编辑：正如OP在下面的评论中指出的,模态也需要Popper.js.

例如,navbar的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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!