Module Bootstrap.4 – Composants

Objectif

Maîtriser les composants Bootstrap essentiels : buttons, forms, cards, navbar, modals pour créer des interfaces complètes rapidement.

Théorie

Buttons

Bouton de base :

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Tailles :

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-lg">Large</button>

Outlines :

<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-secondary">Outline Secondary</button>

États :

<button class="btn btn-primary active">Active</button>
<button class="btn btn-primary" disabled>Disabled</button>

Groupes de boutons :

<div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Forms

Input de base :

<div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
</div>

Textarea :

<div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="3"></textarea>
</div>

Select :

<div class="mb-3">
    <label for="select" class="form-label">Select</label>
    <select class="form-select" id="select">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</div>

Checkboxes :

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">
        Checkbox label
    </label>
</div>

Radio buttons :

<div class="form-check">
    <input class="form-check-input" type="radio" name="radio" id="radio1">
    <label class="form-check-label" for="radio1">
        Radio 1
    </label>
</div>

Switch :

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch1">
    <label class="form-check-label" for="switch1">Switch</label>
</div>

Validation :

<div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control is-invalid" id="email">
    <div class="invalid-feedback">
        Email invalide
    </div>
</div>

<div class="mb-3">
    <label for="name" class="form-label">Nom</label>
    <input type="text" class="form-control is-valid" id="name">
    <div class="valid-feedback">
        Parfait !
    </div>
</div>

Input groups :

<div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

Cards

Card de base :

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Titre</h5>
        <p class="card-text">Contenu de la carte</p>
        <a href="#" class="btn btn-primary">Action</a>
    </div>
</div>

Card avec image :

<div class="card">
    <img src="image.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Titre</h5>
        <p class="card-text">Contenu</p>
    </div>
</div>

Card avec header/footer :

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Contenu</div>
    <div class="card-footer">Footer</div>
</div>

Card groups :

<div class="card-group">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

Navbar

Navbar de base :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Accueil</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">À propos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Navbar avec dropdown :

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
        Dropdown
    </a>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action 1</a></li>
        <li><a class="dropdown-item" href="#">Action 2</a></li>
    </ul>
</li>

Couleurs :

<nav class="navbar navbar-dark bg-dark">
<nav class="navbar navbar-light bg-light">
<nav class="navbar navbar-dark bg-primary">

Modals

Modal de base :

<!-- Button 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">
                <p>Contenu du modal</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary">Sauvegarder</button>
            </div>
        </div>
    </div>
</div>

Tailles :

<div class="modal-dialog modal-sm">Petit</div>
<div class="modal-dialog">Normal</div>
<div class="modal-dialog modal-lg">Grand</div>
<div class="modal-dialog modal-xl">Très grand</div>

Autres composants

Alerts :

<div class="alert alert-primary">Alert primary</div>
<div class="alert alert-success">Alert success</div>
<div class="alert alert-danger">Alert danger</div>

Badges :

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>

Breadcrumbs :

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Accueil</a></li>
        <li class="breadcrumb-item"><a href="#">Section</a></li>
        <li class="breadcrumb-item active">Page actuelle</li>
    </ol>
</nav>

Exercices guidés

Exercice 1 : Buttons

Créez des boutons :

• Toutes les variantes (primary, secondary, etc.)
• Toutes les tailles
• Groupes de boutons

Exercice 2 : Forms

Créez un formulaire complet :

• Inputs, textarea, select
• Checkboxes et radios
• Validation (valid/invalid)
• Input groups

Exercice 3 : Cards

Créez des cards :

• Card simple
• Card avec image
• Card avec header/footer
• Groupe de cards

Exercice 4 : Navbar

Créez une navbar :

• Responsive (hamburger)
• Dropdown
• Différentes couleurs
• Fonctionnelle

Exercice 5 : Modal

Créez un modal :

• Trigger button
• Modal complet
• Tailles variées
• Testez l'ouverture/fermeture

❌ Erreurs fréquentes

Erreur 1 : Oublier data-bs-* pour JavaScript

❌ Mauvais :

<button class="btn" data-toggle="modal">Ne fonctionne pas (Bootstrap 4)</button>

✅ Bon :

<button class="btn" data-bs-toggle="modal" data-bs-target="#modal">Bootstrap 5</button>

Pourquoi : Bootstrap 5 utilise data-bs-* (pas data-*).

Erreur 2 : Oublier le JavaScript

❌ Mauvais :

<!-- Modal sans JS = ne s'ouvre pas -->

✅ Bon :

<script src="bootstrap.bundle.min.js"></script>

Pourquoi : Composants interactifs nécessitent JS.

Erreur 3 : Structure incorrecte pour cards

❌ Mauvais :

<div class="card-body">
    <div class="card">Titre</div>
</div>

✅ Bon :

<div class="card">
    <div class="card-body">Titre</div>
</div>

Pourquoi : Structure HTML correcte nécessaire.

Erreur 4 : Navbar sans container

❌ Mauvais :

<nav class="navbar">
    <a class="navbar-brand">Brand</a>
</nav>

✅ Bon :

<nav class="navbar">
    <div class="container-fluid">
        <a class="navbar-brand">Brand</a>
    </div>
</nav>

Pourquoi : Container = structure correcte.

Erreur 5 : Form sans labels

❌ Mauvais :

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

✅ Bon :

<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">

Pourquoi : Accessibilité et UX.

🚀 Mini-projet

Mission : Créer une page avec tous les composants

Créez une page complète avec :

Composants :

• Navbar responsive
• Hero section
• Cards en grille
• Formulaire de contact
• Modal pour actions
• Buttons variés
• Alerts

Fonctionnalités :

• Navigation fonctionnelle
• Modal qui s'ouvre/ferme
• Formulaire avec validation
• Responsive complet

Critères :

• ✅ Tous les composants utilisés
• ✅ JavaScript fonctionnel
• ✅ Responsive
• ✅ Accessibilité
• ✅ Page professionnelle

Objectif : Maîtriser tous les composants Bootstrap essentiels pour créer des interfaces complètes.

---

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les composants Bootstrap et créez des interfaces complètes.