Programme de la formation
Développer des sites web responsives avec Bootstrap 5

• Introduction à Bootstrap 5 et principes du Responsive Design

  - Présentation de Bootstrap 5 : Historique, avantages et versions
  - Comprendre le Responsive Web Design : Concepts clés et approche Mobile First
  - Installation et intégration de Bootstrap dans un projet web
  - Structure de base d'une page HTML avec Bootstrap (CDN vs. local)

• Le système de grille Bootstrap : Fondamentaux

  - Le conteneur (container, container-fluid) et ses propriétés
  - Utilisation des lignes (row) et colonnes (col) pour la mise en page
  - Gestion de la responsivité de la grille sur différents breakpoints (sm, md, lg, xl, xxl)
  - Agencement des colonnes et utilisation des classes col-*

• Personnalisation avancée de la grille et des espacements

  - Ordre des colonnes (order-*) et décalages (offset-*)
  - Alignement vertical (align-items-*) et horizontal (justify-content-*)
  - Gestion des marges (m-*) et paddings (p-*) responsives
  - Les gouttières (g-*) pour affiner les espacements entre colonnes

• Les composants de navigation et barres de navigation

  - Création de barres de navigation (Navbar) : marque, liens, menus déroulants
  - Intégration de formulaires de recherche dans la Navbar
  - Navbar responsives (toggler) et gestion des breakpoints
  - Navigation simple (Navs) : onglets, pilules et listes

• Boutons et groupes de boutons

  - Création de boutons stylisés : couleurs, tailles, états (active, disabled)
  - Utilisation des outlines buttons et des boutons blocs
  - Conception de groupes de boutons (Button group)
  - Intégration d'icônes avec les boutons (ex: Font Awesome)

• Alertes, Badges et Progress Bars

  - Affichage d'alertes informatives, de succès, d'erreurs (Alerts)
  - Utilisation des badges pour des notifications ou compteurs
  - Représentation de l'avancement avec les barres de progression (Progress Bars)
  - Personnalisation visuelle de ces composants

• Cartes (Cards) pour la présentation de contenu

  - Structure de base d'une carte : image, titre, texte, bouton
  - Cartes avec en-têtes et pieds de page
  - Regroupement de cartes (Card groups, Deck, Columns)
  - Cartes responsives et exemples d'utilisation pratiques

• Modales et Carrousel d'images

  - Création de fenêtres modales (Modal) pour informations ou formulaires
  - Paramétrage des modales (taille, défilement, centrage)
  - Implémentation d'un carrousel d'images (Carousel) avec contrôles
  - Options de configuration du carrousel (animation, auto-lecture)

• Formulaires et éléments d'interaction

  - Conception de formulaires stylisés : champs de texte, sélecteurs, cases à cocher
  - Validation de formulaires côté client avec les classes Bootstrap
  - Utilisation des input groups et floating labels
  - Création de formulaires responsives et accessibles

• Utilisation des Utilitaires Bootstrap

  - Classes d'affichage (d-*, display) et de visibilité (visible, hidden)
  - Classes de texte (text-*, font-*) pour le stylisme typographique
  - Classes de bordures, ombres et couleurs de fond
  - Utilisation des classes responsives pour modifier le comportement des utilitaires

• Intégration de JavaScript avec Bootstrap

  - Utilisation des data attributes pour activer les fonctionnalités JS
  - Travailler avec les plugins JS de Bootstrap (Collapse, Dropdown, Tooltip)
  - Événements JavaScript des composants Bootstrap
  - Exemples de personnalisation avancée des comportements

• Déploiement et bonnes pratiques Bootstrap