Discussion :

[laurentSc]

Bonjour,

pour me former à Bootstrap, j'ai voulu ajouter dans ma page de test un composant "popover". J'ai d'abord pris un exemple de la doc officielle :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

comme ça ne fonctionnait pas (le clic sur le bouton ne produisait pas l'affichage de la fenêtre popup), je me suis inspiré de l'exemple dans https://o7planning.org/fr/11987/tuto...tstrap-popover pour arriver à

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<button type="button" class="btn btn-lg btn-danger myPopover" data-toggle="popover" data-placement="top" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
 
            <script>
                $(function(){
                   $(".myPopover").popover();
                });
             </script>

Il y a certes un peu plus de code, mais cette fois, la fenêtre popup apparaît sur le clic. Ai-je bien trouvé un bug dans la doc officielle ? https://getbootstrap.com/docs/4.1/components/popovers/

[Invité]

Bonjour Laurent,

• soit tu apprends l'anglais,
• soit tu utilises un "traducteur en ligne".

Et tu confonds "Exemple" et "Exemple COMPLET".

Le code HTML seul ne suffit pas.
Il faut ajouter le bout de script JS qui va avec.

...Il y a certes un peu plus de code...

Non : il y a juste le nécessaire.

[laurentSc]

Oui, je reconnais que l'exemple "officiel" ne se veut pas complet ; néanmoins cette doc est difficile à exploiter.

Ayant lu

•Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js

j'aurais pu penser à inclure ces 2 fichiers js par contre, vu nul part la mention de slim.js. Sans lui, ça ne marche pas et je l'aurais pas trouvé...

[psychadelic]

Ayant lu j'aurais pu penser à inclure ces 2 fichiers js par contre, vu nulle part la mention de slim.js. Sans lui, ça ne marche pas et je l'aurais pas trouvé...

erreur
il s'agit de jQuery => <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"la mention "slim" indique juste qu'il s'agit d'une version allégée de jQuery ( sans fonctions Ajax et autres)

Il existe bien aussi une librairie slim https://github.com/slimjs/slim.js , mais celle-ci n'a rien à voir avec Bootstrap.

Si tu te lances dans le codage, il faut être patient et précis

[laurentSc]

Si tu te lances dans le codage, il faut être patient et précis

Ca fait 12 ans que je me lance...A patient et précis, j'ajouterais attentif, car j'avais pas vu que c'était du jquery...

TOUT est CLAIREMENT indiqué sur cette page.

Pas tout, vu que j'étais parti d'un code Template qui fait toutes les inclusions nécessaires, par contre, j'ai fini par découvrir que le script jquery que je rajoute doit être placé après les inclusions :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" ></script>
    <script>
      $(function(){
         $(".myPopover").popover();
      });
   </script>

Mais y a pas de bug...

Une question sur la doc : pourquoi ils font l'inclusion de https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js au lieu de https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js ?

[psychadelic]

Une question sur la doc : pourquoi ils font l'inclusion de https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js au lieu de https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js ?

question de version
celle qui est sur le CDN est une ancienne version.
J'imagine que les gars qui ont la gestion de Bootstrap n'ont pas la main sur le serveur de chez maxcdn, et que ceux qui gèrent maxcdn ont d'autres priorités et ne s'y lanceront pas tant que la version 4 ne soit pas complètement stabilisée; on a attendu 3 ou 4 ans (plus?) que la version 3 de jQuery soit stable, et pour les versions de bootstrap ça a été pire.
Un serveur cdn ça doit avoir une centaine de réplications sur toute la planète, alors ils y vont pas à la hussarde.

j'imagine mal que stackpath puisse avoir les mêmes ressources que maxcdn, ou alors BS veut se défaire de maxcdn qui doit être trop surchargé ? faudrait comparer les performances, et si tu trouve que l'un ou l'autre ralentissent le démarage de ton site, rien ne t'interdit d'y mettre directement ces différentes copies,
https://fr.wikipedia.org/wiki/R%C3%A...ion_de_contenu

par contre, j'ai fini par découvrir que le script jquery que je rajoute doit être placé après les inclusions

oui, on ne met pas la charrue avant les bœufs

[Invité]

Pourquoi tu ne commences pas par le DÉBUT ?

• https://getbootstrap.com/docs/4.1/ge.../introduction/

TOUT est CLAIREMENT indiqué sur cette page.