Formation Bootstrap 5
Maîtriser en 3 jours l'utilisation de Bootstrap pour créer des sites web modernes, responsive et ergonomiques !
Vue d'ensemble
Connaissances de base en HTML et CSS.
Des notions de JavaScript sont un plus pour profiter pleinement de la formation.
Objectifs pédagogiques
Programme détaillé
Introduction à Bootstrap
Présentation de Bootstrap 5 et des autres framework
Objectifs et avantages de l’utilisation de Bootstrap 5 VS CSS
Version actuelle et nouvelles fonctionnalités
Composants inclus dans Bootstrap 5 (Systèmes de grille, normalize.css, icônes et différents plug-ins complémentaires…)
Comprendre la structure des fichiers Bootstrap (feuilles de style, JavaScript).
Lier une page HTML au framework Bootstrap 5
Installation et mise en place rapide de Bootstrap via CDN ou téléchargement local
Exemple de cas pratique : Mettre en place une page de base en utilisant Bootstrap 5 installé.
Bootstrap 5 et le CSS
Mise en forme des éléments textuels, images, formulaires et tableaux.
Les styles CSS pour organiser la mise en page et structurer les sections d’une page web.
Application des polices icônes et personnalisation des styles de mise en page
Modifier et surcharger les styles pour une personnalisation avancée.
Exemple de cas pratique : Créez une page de profil utilisateur en utilisant Bootstrap 5 pour structurer les sections, mettre en forme les textes, images, formulaires et tableaux, tout en personnalisant les styles CSS.
Système de grille et mise en page
Compréhension du concept de grille en Bootstrap 5
Création de mises en page fluides et adaptatives (Media queries, positionnement…)
Structuration des éléments au sein de la grille pour une présentation fluide
Réorganisation des sections de la page
Création de mises en page complexes avec le système de grille (Grid Layout)
Gestion de ll’alignement et la disposition des éléments (Flexbox)
Ajustement de la largeur et la structure des colonnes dans la grille
Modification de l’ordre des éléments pour une flexibilité accrue
Exemple de cas pratique : Créer une mise en page responsive avec différentes configurations de grille.
Utilisation des plugins JavaScript
Présentation des plug-ins JavaScript intégrés de Bootstrap 5
Intégration et personnalisation d’un carrousel pour afficher des images de manière interactive
Création de menus responsives pour une navigation fluide sur tous les types d’écrans
Mise en place de barres de navigation et de systèmes de pagination pour faciliter la navigation dans les pages
Utilisation des boutons interactifs, des badges et des alertes pour améliorer l’interactivité et l’affichage des notifications
Ajout de barres de progression pour indiquer l’avancement d’un processus ou d’une tâche
Exemple de cas pratique : Créez un tableau de bord interactif en intégrant un carrousel, un menu responsive, des boutons, des alertes, des barres de progression et des composants de navigation avec Bootstrap 5.
Personnalisation des modules Bootstrap 5
Configuration d’un serveur JavaScript tel que Node, Deno ou Parcel
Sélection des composants nécessaires de Bootstrap pour une utilisation optimale et personnalisée
Inclusion des modules bootstrap.js dans Webpack
Exemple de cas pratique : Personnaliser Bootstrap 5 en n’incluant que les modules nécessaires afin d’améliorer les performances.
Extension des fonctionnalités avec les plug-ins Bootstrap 5
Utilisation des fenêtres modales pour afficher des contenus dynamiques et des accordéons pour organiser l’information de manière interactive
Intégration d’un carrousel d’images pour afficher des contenus visuels de manière fluide et engageante
Mise en place de formulaires interactifs avec des outils de validation pour assurer la qualité des données saisies
Ajout de champs d’autocomplétion pour faciliter la saisie des utilisateurs
Création d’une navigation verticale pour une expérience fluide et d’un carrousel permettant l’affichage de plusieurs éléments à la fois
Intégration d’un éditeur WYSIWYG (What You See Is What You Get) pour faciliter l’édition de contenu visuel
Exemple de cas pratique : Ajouter des effets interactifs à une page web en utilisant des plug-ins JavaScript de Bootstrap 5 pour améliorer l’expérience utilisateur avec des fonctionnalités avancées.
Analyse et ajustement des modèles Bootstrap 5
Étude des modèles Bootstrap existants
Utilisation d’un modèle Bootstrap 5 pour créer un site web complet
Personnalisation d’une page en modifiant le fichier CSS d’un modèle existant
Travailler avec des fichiers SAAS et intégrer un préprocesseur ou un serveur JavaScript (comme NodeJS) pour améliorer le développement
Exemples de cas pratiques : Concevoir un fichier personnalisé Bootstrap.css en fonction des besoins spécifiques du projet.
Prochaines sessions
Avis des participants
Formation claire, structurée et directement applicable. Le formateur a pris le temps de répondre à toutes nos questions avec des exemples concrets.
Très bon équilibre entre théorie et pratique. Les exercices permettent de comprendre rapidement les concepts et de les mettre en œuvre.
Un formateur expérimenté, pédagogue et disponible. Je repars avec des méthodes et des outils que je peux utiliser immédiatement dans mon travail.
Le contenu était dense, mais très bien expliqué. Le rythme a été adapté au niveau du groupe et chacun a pu progresser.
Des formateurs experts, reconnus par nos apprenants
Chez Sparks Formation, la qualité de nos formations repose sur l'expertise de nos formateurs et la satisfaction de nos apprenants.
Note moyenne attribuée par les participants à nos formateurs
formateurs experts partenaires
Sparks Formation
sujets IT délivrés chaque jour partout en France
Financement
Cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
En savoir plus sur le financement