web-dev-qa-db-fra.com

Bootstrap 4 Beta - Popper.js est-il nécessaire?

je voulais demander si Popper.js est absolument nécessaire ou pas si je n'utilise pas de menus déroulants. Existe-t-il d'autres éléments entraînés par popper qui ne fonctionneraient pas sans la bibliothèque?

twitter-bootstrapbootstrap-4popper.js
3
AndiLeni

Si vous recherchez "popper" dans la documentation de Bootstrap 4 , les résultats suivants apparaîtront:

Les info-bulles s'appuient sur la bibliothèque tierce, Popper.js, pour le positionnement.

Popovers s'appuie sur la bibliothèque tierce partie Popper.js pour le positionnement.

Les listes déroulantes reposent sur une bibliothèque tierce, Popper.js, qui fournit une détection dynamique du positionnement et des vues. 

Ce sont donc les composants de Bootstrap 4 qui ont besoin de Popper.js.

Bien que Popper.js soit indiqué comme étant requis pour Bootstrap 4, et Bootstrap 4 JS enregistre une erreur s’il ne parvient pas à trouver Popper, vous pouvez toujours utiliser Bootstrap 4 JS sans Popper, si vous n’avez pas besoin d’aides des listes déroulantes.

EDIT: comme OP l’a souligné dans les commentaires ci-dessous, les modaux nécessitent également Popper.js .

Par exemple, la fonctionnalité JS de navbar (menu mobile à droite) fonctionne bien:

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

9
juzraai

Proper.js n'est pas requis si vous utilisez bootstrap.bundle.js ou bootstrap.bundle.min.js au lieu de bootstrap.js ou bootstrap .min.js . vous pouvez télécharger bootstrap.bundle.js ou bootstrap.bundle.min.js à partir de hrere

3
Prince Ahmed

Plus maintenant, vérifiez THIS issue Il semble que Bootstrap ait intégré Popper et Bootstrap v4 dans un fichier bundle.min.js disponible si vous essayez de télécharger maintenant. ICI est un lien direct vers le fichier min fourni. J'espère que cela aidera quelqu'un qui n'est pas intéressé par l'ajout d'un fichier popper séparé

3
PirateApp

Popper.js est requis SI vous utilisez Bootstrap JS. C'est not requis si vous utilisez uniquement le CSS Bootstrap.

Lire la documentation

2
Zim

Alternativement, si vous utilisez uniquement la fonctionnalité non-Popper JS de bootstrap, vous pouvez simuler Popper et charger bootstrap (Bootstrap fonctionnera donc et ne générera pas d'erreur de non-présence de Popper):

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