Aller au contenu principal

Module Bootstrap.6 – JavaScript Bootstrap

Objectif​

Maîtriser les composants JavaScript Bootstrap : modals, dropdowns, tooltips, popovers, et utiliser les data attributes pour créer des interfaces interactives.

Théorie​

JavaScript Bootstrap​

Bootstrap 5 = JavaScript vanilla (plus de jQuery).

Composants JavaScript :

  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Alerts
  • Carousels
  • Collapse
  • Tabs
  • Et plus...

Data attributes​

Syntaxe Bootstrap 5 : data-bs-*

Exemples :

<!-- Modal -->
<button data-bs-toggle="modal" data-bs-target="#myModal">Ouvrir</button>

<!-- Dropdown -->
<button data-bs-toggle="dropdown">Dropdown</button>

<!-- Collapse -->
<button data-bs-toggle="collapse" data-bs-target="#content">Toggle</button>

Différence Bootstrap 4 vs 5 :

  • Bootstrap 4 : data-toggle, data-target
  • Bootstrap 5 : data-bs-toggle, data-bs-target

Modals​

Activation avec data attributes :

<!-- Trigger -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#exampleModal">
    Ouvrir modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Titre</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Contenu
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

Options :

<div class="modal fade" 
     id="modal" 
     data-bs-backdrop="static"      <!-- Pas de fermeture au clic -->
     data-bs-keyboard="false">       <!-- Pas de fermeture avec ESC -->

JavaScript API :

// Créer une instance
const myModal = new bootstrap.Modal(document.getElementById('myModal'));

// Ouvrir
myModal.show();

// Fermer
myModal.hide();

// Toggle
myModal.toggle();

// Événements
myModalEl.addEventListener('show.bs.modal', function () {
    // Avant l'ouverture
});

myModalEl.addEventListener('shown.bs.modal', function () {
    // Après l'ouverture
});

Activation :

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" 
            type="button" 
            id="dropdownMenuButton" 
            data-bs-toggle="dropdown">
        Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action 1</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Action 3</a></li>
    </ul>
</div>

JavaScript API :

const dropdown = new bootstrap.Dropdown(element);
dropdown.show();
dropdown.hide();
dropdown.toggle();

Tooltips​

Activation :

<button type="button" 
        class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top" 
        title="Tooltip text">
    Hover me
</button>

Initialisation JavaScript :

// Initialiser tous les tooltips
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

Options :

<button data-bs-toggle="tooltip" 
        data-bs-placement="top"
        data-bs-html="true"
        data-bs-delay="500"
        title="Tooltip">

Popovers​

Activation :

<button type="button" 
        class="btn btn-lg btn-danger" 
        data-bs-toggle="popover" 
        data-bs-title="Popover title" 
        data-bs-content="Popover content">
    Cliquer pour popover
</button>

Initialisation :

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

Collapse​

Toggle de contenu :

<button class="btn btn-primary" 
        type="button" 
        data-bs-toggle="collapse" 
        data-bs-target="#collapseExample">
    Toggle
</button>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Contenu caché/montré
    </div>
</div>

Accordion :

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                Item 1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Contenu
            </div>
        </div>
    </div>
</div>

Tabs​

Navigation par onglets :

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home">Home</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile">Profile</button>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="home">Home content</div>
    <div class="tab-pane fade" id="profile">Profile content</div>
</div>

Carousels​

Carousel de base :

<div id="carouselExample" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

Alerts​

Alert dismissible :

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Attention !</strong> Message d'alerte
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Exercices guidés​

Exercice 1 : Modal​

Créez un modal :

  • Trigger button
  • Modal complet
  • Testez l'ouverture/fermeture
  • Événements JavaScript

Exercice 2 : Dropdown​

Créez un dropdown :

  • Button trigger
  • Menu avec items
  • Testez l'ouverture/fermeture

Exercice 3 : Tooltips​

Créez des tooltips :

  • Plusieurs tooltips
  • Placements variés
  • Initialisation JavaScript

Exercice 4 : Collapse​

Créez :

  • Toggle simple
  • Accordion complet
  • Testez l'animation

Exercice 5 : Tabs​

Créez une navigation par onglets :

  • Plusieurs onglets
  • Contenu pour chaque onglet
  • Testez la navigation

❌ Erreurs fréquentes​

Erreur 1 : data-* au lieu de data-bs-*​

❌ Mauvais :

<button data-toggle="modal">Bootstrap 4</button>

✅ Bon :

<button data-bs-toggle="modal">Bootstrap 5</button>

Pourquoi : Bootstrap 5 utilise data-bs-*.

Erreur 2 : Oublier l'initialisation JavaScript​

❌ Mauvais :

<button data-bs-toggle="tooltip" title="Tooltip">Hover</button>
<!-- Tooltip ne fonctionne pas sans JS -->

✅ Bon :

<button data-bs-toggle="tooltip" title="Tooltip">Hover</button>
<script>
const tooltip = new bootstrap.Tooltip(document.querySelector('[data-bs-toggle="tooltip"]'));
</script>

Pourquoi : Tooltips/popovers nécessitent initialisation JS.

Erreur 3 : ID manquant pour target​

❌ Mauvais :

<button data-bs-target="#modal">Ouvrir</button>
<!-- Pas de modal avec id="modal" -->

✅ Bon :

<button data-bs-target="#myModal">Ouvrir</button>
<div id="myModal" class="modal">...</div>

Pourquoi : Target doit correspondre à un ID existant.

Erreur 4 : Structure HTML incorrecte​

❌ Mauvais :

<div class="modal">
    <div class="modal-content">...</div>
</div>

✅ Bon :

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">...</div>
    </div>
</div>

Pourquoi : Structure HTML correcte nécessaire.

Erreur 5 : JavaScript chargé avant le DOM​

❌ Mauvais :

<script src="bootstrap.js"></script>
<!-- Script avant le contenu -->
<div class="modal">...</div>

✅ Bon :

<div class="modal">...</div>
<script src="bootstrap.js"></script>
<!-- Script après le contenu -->

Pourquoi : DOM doit être chargé avant JS.

🚀 Mini-projet​

Mission : Créer une page interactive avec JavaScript Bootstrap

Créez une page avec :

Composants interactifs :

  • Modal fonctionnel
  • Dropdown dans navbar
  • Tooltips sur les boutons
  • Accordion pour FAQ
  • Tabs pour navigation
  • Carousel d'images

Fonctionnalités :

  • Tous les composants fonctionnels
  • JavaScript initialisé correctement
  • Événements gérés
  • UX fluide

Critères :

  • ✅ Tous les composants JS utilisés
  • ✅ Data attributes corrects (data-bs-*)
  • ✅ JavaScript initialisé
  • ✅ Interactions fluides
  • ✅ Page professionnelle

Objectif : Maîtriser les composants JavaScript Bootstrap pour créer des interfaces interactives.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les composants JavaScript Bootstrap et créez des interfaces interactives fonctionnelles.