Seb-Info

TP 2 Bootstrap

TP 2 Bootstrap

📝 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.

Connexion pour les utilisateurs enregistrés
   
Nouvel utilisateur ?
*Champ requis
Powered by WP-Members