Formation Développer des sites web responsives avec Bootstrap 5

01.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)

02.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-*

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

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

05.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)

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

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

08.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)

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

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

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

12.Déploiement et bonnes pratiques Bootstrap