Présentation
Cette formation complète sur Bootstrap 5.X vous permet de maîtriser la création d’interfaces web modernes et responsives sans effort. De la gestion des bases (texte, images, containers) à l’utilisation avancée des composants interactifs (modals, carrousels, tooltips), vous apprendrez à concevoir des pages web dynamiques, structurées et esthétiques, avec ou sans JavaScript.
Objectifs pédagogiques
Objectifs pédagogiques Comprendre la structure et les principes du Framework Bootstrap. Maîtriser les utilitaires de style et de positionnement pour un design responsive. Savoir intégrer et personnaliser les composants avec ou sans JavaScript. Concevoir une interface web complète en utilisant Bootstrap 5.X.
Niveau
Niveau Initiation
Public
Tous publics
Durée
8h30 environ
Prérequis
Aucun prérequis
Accessibilité média
Sans audio description ni sous-titrage
Matériel nécessaire
Matériel nécessaire Disposer d'un ordinateur ou d’une tablette Une connexion Internet
Modalités d’évaluation des acquis
Modalités d’évaluation des acquis Auto-évaluation sous forme de questionnaires Exercices sous formes d’ateliers pratiques Questionnaire de positionnement & Evaluation à chaud.
Moyens pédagogiques et techniques
Moyens pédagogiques et techniques Accès au cours en ligne Cours théorique au format vidéo Accessible via un ordinateur ou une tablette Assistance par téléphone et/ou email
Formateur(ice)
FORMATEUR(ICE) : Disposant de plusieurs années d’expérience dans l’enseignement de cette discipline.
Accessibilité
ACCESSIBILITE Formations en distanciel accessibles aux personnes à mobilité réduite Audiodescription et sous titrage non disponibles
Programme
•Introduction Introduction au Framework BootStrap •Gestion des bases Gestion des variables sur Bootstrap Gestion du conteneur (container) Gestion des points de ruptures (Breakpoints) Gestion du texte (Taille, style, forme, police) Gestion des images (taille, forme, apparence, responsive) Exercice pratique N°1 Exercice pratique N°2 •Gestion de contenu Gestion des tableaux(Taille, style, responsive, apparence) Gestion d’une figure •Gestion des utilitaires - Partie 01 Gestion de la couleur(color) Gestion de l'arrière-plan (background) Gestion des bordures (border avec type, épaisseur et couleur) Gestion des liens (link avec type, épaisseur et couleur Gestion des ombres et opacité (Shadow et opacity) •Gestion des utilitaires - Partie 02 Fonction display (d-block, d-inline) Fonction flex (toutes options) Fonction Overflow (dépassement en X et Y ou auto) Fonction Float (Flottaison à droite ou gauche) Gestion de l'espacement(Spacing: margin, padding, gap, gutters) Gestion de la position (Absolute, relative, static, sticky, fixed) Gestion du texte (taille, alignement, layer, type, forme) •Travaux pratique •Gestion des composants sans JavaScript Gestion des boutons et des badges Gestion d’une carte (card) Gestion des spinners et Progress Gestion du breadcrumb (fil d'ariane) et la pagination Gestion des composants avec JavaScript Gestion de la navigation simple et complexe Gestion d'un carousel (diaporama d'images) Gestion des fonctions Collapse et Accordion Gestion de DropDows, Alert, Modal Gestion de ToolTips, Toasts •Gestion du formulaire Gestion des formes de contrôles, taille, forme, Gestion des sélections, bouton radio, checkbox Gestion du layout et de la validation •Finalité sur BootStrap 5.X - Mise en pratique