📝 TP Bootstrap – Durée : 4h
🎯 Objectifs pédagogiques
- Intégrer Bootstrap dans un projet web
- Utiliser la grille responsive (Grid)
- Mettre en forme une page avec des composants Bootstrap (Navbar, Cards, Alerts, Formulaires, Carousel)
- Créer une page vitrine moderne et responsive
- Personnaliser l’apparence avec un CSS additionnel
📑 Plan du TP
1️⃣ Mise en place (30 min)
- Créer un dossier
tp_bootstrap
- Préparer un fichier
index.html
avec Bootstrap CDN - Tester avec un bouton
btn btn-primary
et une alerte
2️⃣ Grille et containers (40 min)
- Créer une navbar fixe
- Ajouter une row avec 3 colonnes
- Vérifier le comportement responsive
3️⃣ Composants principaux (60 min)
- Créer une section avec 3 cartes (Card)
- Insérer une alert en haut
- Ajouter un footer sombre
4️⃣ Formulaire de contact (50 min)
- Nom (input text)
- Email (input email)
- Message (textarea)
- Bouton “Envoyer” (
btn btn-success
)
5️⃣ Composants avancés (40 min)
- Ajouter un carousel d’images
- Utiliser des icônes Bootstrap
6️⃣ Personnalisation (20 min)
- Créer un fichier
style.css
- Modifier la couleur d’un bouton et le fond du footer
- Explication : combiner Bootstrap + CSS perso
✅ Livrable attendu
Une page vitrine responsive avec :
- Navbar
- Section grille 3 colonnes
- 3 cartes
- Formulaire de contact
- Carousel d’images
- Footer personnalisé
Ce contenu est réservé aux membres du site. Si vous êtes un utilisateur existant, veuillez vous connecter. Les nouveaux utilisateurs peuvent s'inscrire ci-dessous.