Développer des pages web responsive
Bootstrap 5 est la dernière version du populaire framework de développement frontal open source, Bootstrap. Il comprend plusieurs nouvelles fonctionnalités et améliorations par rapport à son prédécesseur, Bootstrap 4. Cette formation de 2 jours vous permettra de réaliser des pages web reprenant les codes esthétiques des sites actuels ainsi que la maîtrise des composants et des plug-ins du framework Bootstrap 5.
Bulletin d’
inscription Demande de
devis Détail du
programme
Programme de la formation Bootstrap 5
- Présentation générale
- Vue d’ensemble du framework Bootstrap 5 et des autres frameworks
- L’apport de Bootstrap 5 par rapport à CSS
- Les éléments du kit Bootstrap 5 (grilles, normalize.css, icônes, plug-ins…)
- Comprendre l’arborescence des différents fichiers : feuilles de style, JavaScript…
- Lier une page web à la feuille de style de base de Bootstrap 5
- Les feuilles de style de Bootstrap 5
- Les CSS pour les éléments textuels et les images
- Les CSS pour les éléments de formulaires et les tableaux
- Utilisation des polices icônes pour afficher des icônes sur les pages
- Les CSS pour la mise en page, les blocs dans une page
- Surcharger la feuille de style
- Méthodes et instructions
- Syntaxe d’invocation des méthodes
- Méthodes de classes et méthodes d’instances
- Définition et utilisation des méthodes
- La surcharge des méthodes
- La surcharge des méthodes
- Notion de sous-bloc
- Catégories d’instructions
- Principales instructions de contrôle : if, while, for, return, break
- Les grilles
- Comprendre le concept de grille
- Les grilles adaptatives (le responsive web design, media queries, positionnement…)
- Organisation de la grille. Manipuler les grilles
- Grid Layout dans Bootstrap 5
- Flexbox dans Bootstrap 5
- Disposition des colonnes
- L’ordre des blocs
- Les composants de base JavaScript
- Utilisation du carrousel
- Les menus responsives améliorés
- Les composants de navigation et de pagination
- Les boutons, les badges, les alertes
- Les barres de progression
- Les modules à la carte de Bootstrap 5
- Utiliser un serveur JavaScript (Node, Deno, Parcel)
- Définir un Bootstrap sur mesure avec uniquement le nécessaire
- Inclure des modules bootstrap.js dans le Webpack
- Les plug-ins de Bootstrap 5
- Les fenêtres modales. Les accordéons. Le carrousel de photos
- Formulaire validateur
- Les champs d’autocomplétion
- Navigation verticale
- Multi-item carrousel
- Editeur WYSIWYG (What You See Is What You Get)
- Analyse des modèles Bootstrap 5
- Analyser des modèles construits à partir de Bootstrap 5
- Créer un site avec un des modèles
- Créer une page à partir d’un modèle en surchargeant le fichier CSS
- Utiliser des fichiers SAAS avec un préprocesseur et/ou un serveur JavaScript (NodeJS)
|