🎨 Semaine 4 - Jour 2 : Composants Bootstrap

📚 Objectifs du jour

Découvrir et maîtriser les composants Bootstrap essentiels : cards, navbar, buttons, forms, badges, alerts, modals, et plus encore !

🎴 Cards (Cartes)

Card Simple

Une carte basique avec titre et texte.

Action

Card avec Image

Image en haut, contenu en dessous.

En-tête

Card Colorée

Avec header et fond coloré.

Footer

                <div class="card">

                  <div class="card-body">

                    <h5 class="card-title">Titre</h5>

                    <p class="card-text">Texte</p>

                    <a href="#" class="btn btn-primary">Action</a>

                  </div>

                </div>

🧭 Navbar (Navigation)

                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

                  <div class="container-fluid">

                    <a class="navbar-brand" href="#">Logo</a>

                    <button class="navbar-toggler" data-bs-toggle="collapse">...</button>

                    <div class="collapse navbar-collapse">

                      <ul class="navbar-nav">

                        <li class="nav-item"><a class="nav-link">Lien</a></li>

                      </ul>

                    </div>

                  </div>

                </nav>

🔘 Buttons (Boutons)

Couleurs

Variantes

                <button class="btn btn-primary">Primary</button>

                <button class="btn btn-outline-success">Outline</button>

                <button class="btn btn-lg btn-warning">Large</button>

                <button class="btn btn-sm btn-info">Small</button>

📝 Forms (Formulaires)

                        <div class="mb-3">

                          <label class="form-label">Email</label>

                          <input class="form-control" type="email">

                        </div>

                        <select class="form-select">...</select>

                        <div class="form-check">

                          <input class="form-check-input" type="checkbox">

                          <label class="form-check-label">...</label>

                        </div>

🔔 Alerts & Badges

Succès ! Opération réussie.

Attention ! Vérifiez les données.

Erreur ! Quelque chose s'est mal passé.

Badges

Primary Success 4 Danger Pill

📋 List Group

Item actif
Item 2
Item 3
Item désactivé

Inbox 14
Sent 2
Drafts 5

Lien actif Lien 2 Lien 3

🎯 Pagination & Breadcrumb

Pagination

Breadcrumb

⏳ Progress & Spinners

Progress Bars

25%

50%

75%

Spinners

🎨 Tooltips & Popovers

Note: Nécessite JavaScript Bootstrap pour fonctionner

Froggiesplaining :

🎯 Objectifs :
✅ Utiliser cards pour présenter du contenu
✅ Créer une navbar responsive
✅ Styliser des formulaires avec Bootstrap
✅ Utiliser alerts, badges, progress bars
✅ Ajouter pagination et breadcrumb

📖 Points clés :
• Cards : conteneurs flexibles
• Navbar : navbar-expand-lg pour responsive
• Forms : form-control, form-label, form-select
• Alerts : alert alert-success/warning/danger
• Badges : badge bg-primary

🏋️ Exercice :
Créez une landing page avec :
• Navbar avec logo et menu
• Hero section avec texte et boutons
• 3 cards de features
• Formulaire de contact
• Footer avec liens