06 - Introduction à Bootstrap

Jusqu’à présent, nous avons créé un site avec HTML et CSS.

Mais écrire tout le CSS à la main peut être long.

Bootstrap est un framework qui permet de créer rapidement des interfaces modernes.

1. Qu’est-ce que Bootstrap ?

Bootstrap est une bibliothèque CSS prête à l’emploi.

Elle fournit :

• Une grille responsive
• Des composants prêts à l’emploi
• Des styles cohérents

2. Ajouter Bootstrap

Le plus simple est d’utiliser le CDN :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

À placer dans la balise .

3. La grille Bootstrap

Bootstrap utilise un système de grille basé sur 12 colonnes.

<div class="container">
    <div class="row">
        <div class="col">Colonne 1</div>
        <div class="col">Colonne 2</div>
    </div>
</div>

Les colonnes s’adaptent automatiquement selon l’écran.

4. Exemple avec tailles

<div class="row">
    <div class="col-md-6">50% sur écran moyen</div>
    <div class="col-md-6">50% sur écran moyen</div>
</div>

Sur mobile, les blocs passent automatiquement en colonne.

5. Les composants

Bootstrap propose de nombreux composants prêts à l’emploi.

Exemple : bouton

<button class="btn btn-primary">Cliquez ici</button>

Exemple : carte

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

6. Les classes utilitaires

Bootstrap permet aussi de styliser rapidement :

<div class="text-center mt-3">Texte centré</div>

• text-center : centrer le texte
• mt-3 : marge en haut

7. À retenir

• Bootstrap accélère le développement
• La grille permet de créer des layouts responsive
• Les composants sont prêts à l’emploi
• Les classes utilitaires simplifient le CSS

Conclusion

Vous pouvez maintenant créer des interfaces modernes rapidement.

Dans le prochain chapitre, nous allons introduire PHP pour rendre le site dynamique.

Navigation dans la série