🚀 Semaine 4 - Jour 1 : Introduction à Bootstrap

📚 Qu'est-ce que Bootstrap ?

Bootstrap est le framework CSS le plus populaire au monde. Il fournit des composants prêts à l'emploi (navbar, cards, buttons, etc.) et un système de grille responsive puissant.

Avantages : Développement rapide, responsive par défaut, compatible tous navigateurs, documentation excellente, grande communauté.

📦 Installation

Méthode CDN (Recommandée pour débuter)

Ajoutez ces lignes dans le <head> de votre HTML :

                                <!-- Bootstrap CSS -->

                                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"

                                  rel="stylesheet">

                                <!-- Bootstrap Icons -->

                                <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"

                                  rel="stylesheet">

                                <!-- Bootstrap JS (avant la fermeture du </body>) -->

                                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Pas d'installation : Fonctionne immédiatement, sans npm ou téléchargement !

🎯 Système de Grille Bootstrap

Concept : 12 colonnes

Bootstrap divise l'écran en 12 colonnes. Vous choisissez combien de colonnes chaque élément occupe.

                                <div class="container">

                                  <div class="row">

                                    <div class="col-md-4">4 colonnes</div>

                                    <div class="col-md-4">4 colonnes</div>

                                    <div class="col-md-4">4 colonnes</div>

                                  </div>

                                </div>

Exemples de grilles

3 colonnes égales (4 + 4 + 4 = 12)

col-md-4

2 colonnes (8 + 4 = 12)

col-md-8 (contenu principal)

col-md-4 (sidebar)

4 colonnes égales (3 + 3 + 3 + 3 = 12)

col-md-3

📱 Breakpoints Responsive

Préfixes de taille

Préfixe	Taille écran	Exemple	Usage
`.col-`	< 576px	`col-6`	Tous les écrans
`.col-sm-`	≥ 576px	`col-sm-6`	Mobile large
`.col-md-`	≥ 768px	`col-md-4`	Tablette
`.col-lg-`	≥ 992px	`col-lg-3`	Desktop
`.col-xl-`	≥ 1200px	`col-xl-2`	Large desktop

Exemple responsive : Mobile (12), Tablette (6), Desktop (4)

Responsive Box 1

Responsive Box 2

Responsive Box 3

Redimensionnez la fenêtre pour voir l'adaptation !

🎨 Classes Utilitaires

Spacing (Marges & Padding)

                                m-3 = margin: 1rem

                                p-4 = padding: 1.5rem

                                mt-2 = margin-top

                                mb-3 = margin-bottom

                                ms-2 = margin-start (left)

                                me-2 = margin-end (right)

                                mx-auto = margin horizontal auto

                                py-5 = padding vertical

Padding de 3

Couleurs

bg-primary text-white

bg-success text-white

bg-danger text-white

bg-warning

bg-info text-white

bg-dark text-white

Texte

text-start (gauche)

text-center (centré)

text-end (droite)

fw-bold (gras)

fst-italic (italique)

text-uppercase (MAJUSCULES)

text-primary (couleur)

Display & Flex

                                d-none = display: none

                                d-block = display: block

                                d-flex = display: flex

                                justify-content-center

                                align-items-center

                                flex-column

                                gap-3

Box 1

Box 2

🎯 Composants Bootstrap

Boutons

Alerts

Succès ! Opération réussie.

Attention ! Vérifiez les données.

Erreur ! Quelque chose s'est mal passé.

Cards (Cartes)

Titre de la carte

Ceci est un exemple de carte Bootstrap. Simple et élégant !

Carte colorée

Avec fond coloré et texte blanc.

Action

En-tête

Avec header

Et un footer en bas.

Footer

Froggiesplaining :

🎯 Objectifs :
✅ Installer Bootstrap via CDN
✅ Comprendre le système de grille (12 colonnes)
✅ Utiliser les breakpoints responsive (sm, md, lg, xl)
✅ Appliquer les classes utilitaires (spacing, couleurs, texte)
✅ Utiliser les composants (buttons, alerts, cards)

📖 Points clés :
• container = conteneur principal
• row = ligne de grille
• col-md-4 = 4 colonnes sur 12 (tablette+)
• Classes utilitaires = rapide et efficace
• Responsive par défaut = mobile first

🏋️ Exercice :
Créez une landing page avec navbar Bootstrap, 3 cards de features et un footer !