Interfaces responsive avec Bootstrap 5
Assembler rapidement des interfaces adaptatives et soignées avec le framework CSS le plus répandu.
- Durée
- 14 h · 2 jours
- Niveau
- Débutant
- Format
- Présentiel · Distanciel · Mixte
- Effectif max.
- 12 participants
Présentation
Ce programme montre comment construire des sites adaptatifs avec Bootstrap 5 : système de grille, composants prêts à l’emploi, personnalisation du thème avec Sass et accessibilité. Les participants apprennent à gagner du temps sans sacrifier la qualité, puis à personnaliser le framework pour que leur site ne ressemble pas à tous les autres.
À qui s’adresse ce programme
- Développeurs web front-end débutants ou intermédiaires
- Intégrateurs et webdesigners
- Équipes qui veulent accélérer la production d’interfaces
Prérequis
- Connaissance de HTML et de CSS
- Notions sur la structure d’un site web
Objectifs pédagogiques
- Mettre en place Bootstrap dans un projet
- Composer des mises en page avec la grille et les utilitaires
- Utiliser les composants : barres de navigation, cartes, alertes, carrousels, modales
- Personnaliser les couleurs et les variables avec Sass
- Respecter les bonnes pratiques d’accessibilité
- Activer les composants interactifs avec JavaScript
Programme détaillé
4 modules · 14 h · 2 jours
Prise en main et grille
- Rôle de Bootstrap et alternatives
- Installer Bootstrap : CDN ou gestionnaire de paquets
- Conteneurs, lignes, colonnes et points de rupture
- Utilitaires d’espacement, d’affichage et de texte
- Typographie, images et tableaux
Construire la page d’accueil d’un site avec la grille Bootstrap.
Composants d’interface
- Barre de navigation et menu adaptatif
- Boutons, cartes, listes et badges
- Formulaires et validation visuelle
- Alertes, modales et info-bulles
- Carrousels et accordéons
Assembler plusieurs composants pour une page produit.
Personnalisation avec Sass
- Structure des fichiers sources de Bootstrap
- Surcharger les variables : couleurs, polices, arrondis
- Générer un thème sur mesure
- Mode sombre et variantes de couleurs
- Construire et optimiser le CSS final
Créer un thème aux couleurs d’une marque.
Accessibilité, JavaScript et mise en production
- Rôles ARIA et navigation clavier dans les composants
- Contrastes et conformité aux référentiels courants
- API JavaScript de Bootstrap
- Écouter les événements des composants
- Outils, icônes et bonnes pratiques de déploiement
Finaliser un site de quatre pages avec thème, composants et contrôles d’accessibilité.
Outils et technologies
Méthodes pédagogiques
- Alternance d’exposés courts et de travaux pratiques
- Démonstrations en direct par le formateur
- Projet fil rouge construit au fil des modules
- Corrections collectives et échanges sur les bonnes pratiques
Évaluation
- Exercices pratiques corrigés à chaque module
- Mini-projet réalisé en fin de formation
- Quiz de validation des acquis
Matériel requis
- Un ordinateur avec une connexion internet
- Un éditeur de code et un navigateur récent
Ressources fournies
- Support de cours et dépôt d’exercices corrigés
Débouchés
- Un site vitrine responsive bâti sur Bootstrap
- Un thème personnalisé réutilisable
Les cours vidéo associés
Mes cours en vidéo qui accompagnent ce programme : pour préparer la formation ou réviser ensuite. Accès gratuit avec un compte.
