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
Ils nous font confiance
Cette année notre filière Développement Web & Fullstack a accompagné plus de 77 entreprises dont :
Avis des participants
session très agréable, dense mais toujours agréable. formateur très à l'écoute, prends le temps de répondre aux questions. on apprends l'utilisation des fonctions mais aussi les processus mis en œuvre derrière ces fonctions. cela contribue à une compréhension en profondeur des sujets.
Très bon instructeur qui explique toujours en montrant du code, aucune slide et une présentation vivante ce qui permet de rester intéressé et concentré tout au long ! On nous laisse beaucoup de temps pour faire les exercices aussi donc ça permet de vraiment réfléchir…
Super formateur, intense mais très belle formation.merci
Le formateur est vraiment l'un des meilleurs que j'ai jamais eu.
Merci à Yann pour sa pédagogie et sa bienveillance tout au long de la formation. Ce fut très enrichissant.
Votre formateur
Sofiane B.
Formateur
Sofiane intervient notamment sur les langages et écosystèmes backend, ainsi que sur les bases de données et le stockage.
Financement
Cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
Questions fréquentes
Combien de temps dure la formation Bootstrap 5 ?
Cette formation se déroule sur 3 jours.
Quels sont les prérequis pour suivre la formation Bootstrap 5 ?
Connaissances de base en HTML et CSS. Des notions de JavaScript sont un plus pour profiter pleinement de la formation.
Quel est le prix de la formation Bootstrap 5 ?
En inter-entreprises, elle est à 1 950 € HT par participant ; en intra-entreprise, elle est à 4 650 € HT pour le groupe. Un tarif sur-mesure est également disponible sur devis.
La formation Bootstrap 5 délivre-t-elle une certification ?
Cette formation ne délivre pas de certification. Une attestation de fin de formation vous sera remise à l'issue de la session.
La formation Bootstrap 5 est-elle éligible à un financement OPCO ?
Oui, cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
Choisissez votre formation
Mon contact chez SPARKS est professionnel et très réactif. Les échanges sont simples, efficaces, et la collaboration se déroule dans d'excellentes conditions.