Easy-Micro

LOGICIEL Bootstrap
Plugins 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>
Source : OpenClassrooms

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>


Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]