Aller au contenu principal

Module Bootstrap.9 – Projet Bootstrap

Objectif​

Créer un dashboard responsive complet avec Bootstrap pour valider toutes les compétences Bootstrap acquises : grille, composants, JavaScript, personnalisation.

Théorie​

Spécifications du projet​

Application : Dashboard responsive professionnel

Créer un dashboard complet avec toutes les fonctionnalités Bootstrap apprises.

Spécifications du projet​

Fonctionnalités requises​

1. Layout responsive

  • Navbar avec dropdown
  • Sidebar collapsible
  • Grille Bootstrap pour contenu
  • Footer

2. Composants

  • Cards avec statistiques
  • Tableaux de données
  • Formulaires stylisés
  • Modals pour actions
  • Alerts pour notifications

3. Interactivité

  • Navigation fonctionnelle
  • Modals qui s'ouvrent/ferment
  • Dropdowns fonctionnels
  • Tabs pour navigation
  • Collapse pour sidebar

4. Personnalisation

  • Thème personnalisé (variables SCSS)
  • Couleurs cohérentes
  • Typographie personnalisée

5. Responsive

  • Mobile : Sidebar cachée, menu hamburger
  • Tablet : Layout adapté
  • Desktop : Layout complet

Structure du projet​

Pages à créer :

dashboard/
├── index.html
├── scss/
│   ├── _variables.scss
│   └── main.scss
├── css/
│   └── main.css (compilé)
└── js/
    └── main.js

Guide de développement​

Étape 1 : Setup (1h)

  • Structure de fichiers
  • Installation Bootstrap
  • Configuration SCSS

Étape 2 : Layout (2h)

  • Navbar responsive
  • Sidebar collapsible
  • Grille pour contenu
  • Footer

Étape 3 : Composants (3h)

  • Cards de statistiques
  • Tableaux
  • Formulaires
  • Modals

Étape 4 : JavaScript (2h)

  • Initialisation composants
  • Interactions
  • Navigation

Étape 5 : Personnalisation (1h)

  • Variables SCSS
  • Thème cohérent
  • Compilation

Étape 6 : Responsive (1h)

  • Media queries
  • Navigation mobile
  • Tests toutes tailles

Critères d'évaluation​

Layout (25%) :

  • Grille Bootstrap utilisée
  • Responsive fonctionnel
  • Navigation accessible

Composants (25%) :

  • Cards, tables, forms stylisés
  • Modals fonctionnels
  • Alerts appropriés

JavaScript (20%) :

  • Composants interactifs fonctionnels
  • Navigation fluide
  • Data attributes corrects

Personnalisation (15%) :

  • Thème cohérent
  • Variables SCSS
  • Design unique

Code qualité (15%) :

  • Structure organisée
  • Commentaires
  • Performance

Exercice - Développement​

Dashboard principal​

Layout :

  • Navbar fixe en haut
  • Sidebar à gauche (collapsible)
  • Contenu principal au centre
  • Footer en bas

Sections :

  • Hero avec statistiques (cards)
  • Tableaux de données
  • Graphiques (placeholders)
  • Actions rapides (buttons)

Composants​

Cards de statistiques :

  • 4 cards avec icônes
  • Couleurs variées
  • Responsive (2x2 sur mobile, 4 sur desktop)

Tableaux :

  • Table Bootstrap stylisée
  • Pagination
  • Actions (dropdowns)

Formulaires :

  • Formulaire de création
  • Validation Bootstrap
  • Modal pour confirmation

Modals :

  • Modal de création
  • Modal de confirmation
  • Modal d'édition

Interactivité​

Navigation :

  • Sidebar avec collapse
  • Dropdowns dans navbar
  • Tabs pour sections

Actions :

  • Boutons avec modals
  • Alerts dismissibles
  • Tooltips sur icônes

Validation finale​

Checklist :

  • Layout responsive complet
  • Tous les composants utilisés
  • JavaScript fonctionnel
  • Thème personnalisé
  • Navigation accessible
  • Performance optimisée
  • Code organisé

Tests :

  1. Responsive : Toutes les tailles
  2. JavaScript : Tous les composants fonctionnels
  3. Accessibilité : WAVE 0 erreurs
  4. Performance : Lighthouse > 90
  5. Navigation : Clavier fonctionnel

Ressources​

Si vous êtes bloqué :

  • Documentation Bootstrap : getbootstrap.com
  • Exemples de dashboards
  • Revisitez les modules précédents

Bonnes pratiques :

  • Code organisé
  • Composants réutilisables
  • Performance prioritaire

Objectif final​

Créer un dashboard Bootstrap complet qui démontre :

  • Maîtrise de la grille Bootstrap
  • Utilisation de tous les composants
  • JavaScript fonctionnel
  • Personnalisation complète
  • Responsive parfait
  • Code professionnel

Validation : Vous avez terminé Bootstrap quand votre dashboard est fonctionnel, responsive, personnalisé et utilise toutes les fonctionnalités apprises.

Félicitations ! Vous avez terminé l'apprentissage complet de Bootstrap. Vous êtes maintenant capable de créer des interfaces professionnelles rapidement avec Bootstrap.