🚀 Semaine 4 - Jour 3 : Bootstrap Avancé

📚 Objectifs du jour

Découvrir les composants interactifs de Bootstrap : carousel, modal, accordion, tabs, collapse, offcanvas et dropdowns.

🎠 Carousel (Carrousel)

<div class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">...</div>
    <div class="carousel-item">...</div>
  </div>
  <button class="carousel-control-prev" data-bs-slide="prev">...</button>
  <button class="carousel-control-next" data-bs-slide="next">...</button>
</div>

🪟 Modal (Fenêtre modale)

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

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">Titre</div>
      <div class="modal-body">Contenu</div>
      <div class="modal-footer">Boutons</div>
    </div>
  </div>
</div>

🎵 Accordion (Accordéon)

Contenu de la section 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Contenu de la section 2. Sed do eiusmod tempor incididunt ut labore.

Contenu de la section 3. Ut enim ad minim veniam, quis nostrud exercitation.
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse">...</button>
    </h2>
    <div class="accordion-collapse collapse">
      <div class="accordion-body">Contenu</div>
    </div>
  </div>
</div>

📑 Tabs (Onglets)

Onglet Accueil

Contenu de l'onglet Accueil.

Onglet Profil

Contenu de l'onglet Profil.

Onglet Contact

Contenu de l'onglet Contact.

🍔 Offcanvas (Menu latéral)

Menu Offcanvas

Contenu du menu latéral qui glisse depuis le côté.

  • Item 1
  • Item 2
  • Item 3

📊 Dropdowns (Menus déroulants)

🔔 Toast (Notifications)

✅ Composants maîtrisés !

Vous connaissez maintenant tous les composants Bootstrap interactifs essentiels. Combinez-les pour créer des interfaces riches et professionnelles !

Froggiesplaining :


🎯 Objectifs :
✅ Créer un carousel d'images
✅ Utiliser des modals pour afficher du contenu
✅ Structurer avec accordion et tabs
✅ Ajouter offcanvas pour menu mobile
✅ Créer des dropdowns et toasts

📖 Points clés :
• data-bs-toggle : active le composant
• data-bs-target : cible l'élément
• Carousel : data-bs-ride="carousel"
• Modal : modal fade + modal-dialog
• Accordion : data-bs-parent pour fermer les autres

🏋️ Exercice :
Créez une page produit avec :
• Carousel d'images produit
• Modal "Ajouter au panier"
• Accordion FAQ
• Tabs pour description/avis/livraison
• Toast confirmation d'ajout

Froggie

GitHub - eCrea