Formation Programmation Bootstrap

Presentation

La formation programmation Boostrap proposée par Easy Learn s’adresse aux personnes qui veulent structurer une interface web propre et adaptable à tous les écrans, sans réinventer la roue à chaque page. Vous progressez sur les fondamentaux de Bootstrap (grilles, colonnes, alignements), puis sur les classes utilitaires pour styliser vite et bien (couleurs, espacements, bordures, ombres). Ensuite, vous assemblez les composants essentiels pour un site professionnel : tableaux, boutons, formulaires, barres de navigation, menus déroulants, alertes, modales, cartes et carrousel. Easy Learn met l’accent sur la pratique, afin de produire des résultats visibles et directement exploitables.

• Comprendre le fonctionnement de Bootstrap et ses usages en production

• Maîtriser le système de grilles, colonnes, alignements et imbrications

• Accélérer la mise en forme grâce aux classes utilitaires (couleurs, marges, bordures, ombres)

• Styliser tableaux, images, boutons, listes et formulaires avec des composants fiables

• Construire une navigation complète : navbar, dropdown, pagination, scrollspy

• Ajouter des composants interactifs : alertes, modales, toast, popovers

• Mettre en page des blocs visuels efficaces : cards, collapse, carrousel

Objectifs pedagogiques

• Comprendre l’architecture et les principes d’utilisation du framework Bootstrap

• Utiliser le système de grilles pour créer des layouts responsives

• Gérer l’alignement, l’espacement, l’ordre d’affichage et l’imbrication des colonnes

• Mettre en forme textes et éléments via les classes Bootstrap

• Modifier couleurs, fonds, opacité, dimensions, bordures et marges via les utilitaires

• Gérer l’affichage (display, flex), le positionnement et les dépassements (overflow)

• Créer et styliser tableaux, images/figures, boutons, groupes de listes et formulaires

• Construire une navigation complète (menu, dropdown, navbar, pagination, scrollspy)

• Mettre en place des composants informatifs (alertes, modales, toast, popovers)

• Utiliser des composants visuels (badges, cards, collapse, carrousel)

Public concerne

• Développeurs web débutants ou intermédiaires

• Intégrateurs HTML/CSS souhaitant accélérer la production responsive

• Webdesigners qui prototypent des interfaces structurées

• Chefs de projet web qui doivent comprendre Bootstrap pour cadrer un site

• Étudiants ou personnes en reconversion vers les métiers du web

• Toute personne souhaitant maîtriser Bootstrap pour des projets web professionnels

Prerequis

• Connaître les bases de HTML et CSS (structure, sélecteurs simples)

• Savoir éditer des fichiers web (éditeur de code recommandé)

• Disposer d’un ordinateur Mac ou PC

• Utiliser un navigateur récent (Chrome, Edge, Firefox, Safari)

• Connexion internet stable pour accéder aux ressources

Programme

Module 1 - Fondamentaux de Bootstrap et système de grilles

• Présentation de Bootstrap et logique d’intégration

• Comprendre le système de grilles

• Créer des colonnes et gérer leur taille

• Aligner et espacer les colonnes

• Gérer l’ordre d’affichage et l’imbrication de lignes

Module 2 - Classes Bootstrap et normalisation des styles

• Reboot et normalisation des styles HTML

• Mise en forme des textes avec les classes Bootstrap

• Couleurs, arrière-plans et opacité

• Dimensions et gestion des tailles

• Bordures et marges

Module 3 - Layout avancé : display, flex, positionnement, overflow, ombres

• Gérer l’affichage : display et display:flex

• Choisir et appliquer un positionnement adapté

• Cacher des éléments et gérer les dépassements

• Ajouter des ombres pour hiérarchiser l’interface

Module 4 - Styliser des éléments complexes : tableaux, images, boutons, listes, formulaires

• Créer des tableaux stylisés

• Gérer les images et figures

• Créer des boutons et variantes

• Construire des groupes de listes

• Structurer et styliser des formulaires

Module 5 - Navigation Bootstrap : menus et barres de navigation

• Créer un menu de navigation

• Menus déroulants et éléments de navigation

• Construire des barres de navigation plus complètes

• Utiliser breadcrumb, pagination et scrollspy

Module 6 - Composants informatifs et visuels : interactions et UI

• Alertes, boîtes modales et notifications toast

• Info-bulles et popovers

• Barres de progression et spinners

• Badges, jumbotron, cards, collapse

• Créer un carrousel