BootstrapPlugins JQuery
Les librairies JQuery de Bootstrap
⚠ Attention
Bootstrap depuis sa version 5 n'utilise plus la bibliothèque JQuery et propose dorénavant du pur JavaScript (voir le concept de Vanilla JS) mais JQuery reste accessible dans Bootstrap pour ceux qui le veulent.Les librairies JQuery de Bootstrap
Bootstrap propose un certain nombre de plugins pour améliorer les pages web, ils sont tous fondés sur jQuery. Il y a plusieurs façons de faire appel à ces plugins :- Soit vous référencez juste ce qui vous est utile en prenant la librairie correspondante dans le pack de Bootstrap comme ici la librairie Tab (onglet)
<script src="js/jquery.js"></script> <script src="js/tab.js"></script> - Soit vous référencez la bibliothèque complète
<script src="https://ajax.googleapis.com/ajax/ libs/jquery/1.11.0/jquery.min.js"></script> - Soit vous référencez toutes les bibliothèques
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/ bootstrap/4.1.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/ libs/popper.js/1.14.3/ umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/ bootstrap/4.1.1/js/bootstrap.min.js"></script>
Exemple d'affichage dynamique de contenu (effet accordéon)
Utilisation d'un plugin Bootstrap (effet accordéon) à partir de l'attribut data-toggle (basculer)
<a href="#item" data-toggle="collapse">Afficher le contenu</a>
<div id="item" class="collapse">Mon contenu, bla bla bla</div>Utilisation d'un plugin Bootstrap (effet accordéon) en JQuery pur
<a>Afficher</a>
<div id="item" class="collapse">
Contenu
</div>
<script>
$(function() {
$('a').click(function() {
$('#item').collapse('toggle');
});
});
</script>