Formation Bootstrap 5
| 1800€ HT / personne |
| 3 jours (21 heures) |
Présentation
Bootstrap est un framework CSS front-end simplifiant la conception de sites ou d’applications web responsive. Ce framework contient de nombreux composants HTML et CSS : formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que plusieurs extensions JavaScript. Créé en 2010 par deux développeurs travaillant chez Twitter, il est passé open source en 2011 et, un an après, devient l’un des projets les plus populaires sur la plate-forme de GitHub. Bootstrap permet l’intégration rapide des pages d’un site et d’une application web, tout en maintenant la réutilisabilité du code, par le système de classes et de composant intégré au framework.
Bootstrap 4 et 5 sont des réécritures majeures de l’ensemble du projet, toujours pensé “mobile first”, il introduit notamment un nouveau breakpoint responsive permettant de s’adapter toujours mieux à l’usage des smartphones. Parmi les nombreux changements, le plus important se trouve au niveau du système de grille, avec le passage à Flexbox, fonctionnalité CSS poussée par le W3C, permettant une mise en page plus fluide et flexible et facilitant le passage sur mobile.
Dans notre nouvelle formation Bootstrap, vous verrez qu’avec l’intégration de Flexbox, Bootstrap se tourne vers l’avenir en abandonnant le support des vieilles versions d’Internet Explorer 8 et 9. Bootstrap 5 est moderne, conçu pour le web de demain, il se rend donc compatible IE 10+/ iOS 6+. Contrairement à la v3, il n’y a plus de limitation à une grille de 12 colonnes : votre grille devient infinie, responsive et les colonnes s’adapteront toutes seules dans l’espace qui leur est réservé. Avec le concept de Flexbox, vous apprendrez à devenir efficace et vous ne perdrez plus de temps à vouloir faire des colonnes de même hauteur ou à aligner des éléments proprement.
Durant cette formation nous aborderons également l’ensemble des classes utilities qui simplifient et accélèrent considérablement le développement de page HTML responsive. Nous aborderons également rapidement les différences avec la version 3, changements sur les noms de classe, des mixins et des variables, ainsi que la taille de la grille. Pour les composants, la suppression des panneaux et vignettes, l’introduction d’un nouveau composant générique : les cartes. On note aussi la suppression de la police d’icône Glyphicons et du composant pager de Bootstrap.
Notre formation complète abordera tous les concepts jusqu’au plus avancé, afin de vous rendre autonome dans vos projets Web les plus exigent ! Comme dans toutes nos formations, celle-ci vous présentera la toute dernière version à savoir Bootstrap 5.3.
Objectifs
- Présenter les différentes fonctionnalités afin de vous permettre de maîtriser Bootstrap 5
- Être à même d’adapter vous-même le code source de Bootstrap 5
- Intégrer votre propre design grâce Bootstrap
- L’utiliser comme socle fondateur dans vos sites web
Public visé
Développeur Web, Webdesigner et Webmaster
Pré-requis
Connaissances en HTML/CSS
Programme de notre formation Bootstrap 5
Introduction
- Qu’est-ce qu’un framework CSS ?
- Évolution des technologies web : rappels sur HTML5 / CSS3
- Les alternatives à Bootstrap
- Pourquoi utiliser Bootstrap ?
- Mise en place de Bootstrap dans son projet
La mise en pages avec la grille
Bootstrap 5 permet de créer rapidement des layouts (mise en pages) complexes, adaptés autant aux mobiles qu’aux ordinateurs.
Nous verrons comment tirer parti de la grille de bootstrap pour créer des pages web.
- Principe de structuration et d’intégration
- Faire une mise en pages responsive
- Passage en revue des responsive breakpoints (différentes tailles d’écran)
- Du pixel au root em (rem)
- Mise en place de la grille
- Container, Row, Columns
- Utilisation de Flexbox avec la grille Bootstrap
Les contenus HTML et CSS
- Titres et mise en pages du texte
- Les Images responsives
- Tableaux et liste d’éléments
Les composants HTML et CSS
Bootstrap 5 intègre de nombreux composants, facilitant toutes les parties de la création d’une page :
- Navs et Navbars pour la navigation
- Breadcrumb ou fil d’Ariane
- Medias objects
- Cards
- Les listes
- Boutons, groupes de boutons et boutons déroulants
- Pagination
- Formulaires et Inputs
- Les alertes
- Un peu de déco : les badges, les spinners
- Jumbotron
- Lecteurs vidéos et audios personnalisés
- Intégrer du CSS personnalisé dans votre projet
Utiliser Bootstrap avec JavaScript et jQuery
Bootstrap possède aussi de nombreux composants tirant parti de JavaScript pour proposer une plus grande interactivité, et flexibilité via l’utilisation de scripts personnalisés.
- Carrousels de photos, accordéons
- Collapse elements
- Modals ou Boîtes modales
- Popovers
- Progress ou Barre de progression
- Scrollspy
- Toasts
- Tooltips
- Menus déroulants
- Tabulations
La magie des Utilities
Bootstrap 5 a intégré des dizaines de classes utilitaires qui accélèrent et simplifient de développement.
- Utilities layout, flexbox , float, clearfix, position, visibilité & display
- Utilities borders
- Utilities overflow
- Utilities couleurs
- Utilities shadow
- Utilities sizing & spacing
- Utilities textes
- Utilities alignement
Le pré-processeur SASS
SASS est le pré-processeur utilisé pour le développement du bootstrap. Savoir manipuler des fichiers SASS permet de mieux comprendre et de personnaliser le framework.
- Qu’est-ce qu’un pré-processeur ?
- Avantages de SASS
- SASS et Bootstrap 5
- Variables et mixins
Ateliers & Intégration
- Intégration d’une maquette pour un site full responsive
- Introduction à WebPack
- Utiliser Bootstrap 5 avec Angular
- Utiliser Bootstrap 5 avec Symfony
Bootstrap avancé (Module sur demande +2 jours)
- Créer un site avec un des modèles / Templates
- l’API Bootstrap
- Plugins externes (Calendar, Clip-One…)
- Mise en place de bootstrap avec npm et bower
- Intégration d’une maquette pour un site full responsive
- Déploiement du projet
- Créer une page à partir d’un modèle en surchargeant le fichier CSS
- Utiliser Bootstrap 5 avec SASS (préprocesseur) et Gulp (Taskrunner)
- Utiliser des fichiers SASS et un serveur Nodejs
- Intégration avec Angular et React
- Les nouveautés futurs de Bootstrap 5 et l’avenir du projet : la fin de jQuery
- Optimiser son site web
- CSS optimization
- Inline styles
- Long identifier and class names
- Shorthand rules
- Grouping selectors
- Rendering times
- Minifying CSS & JavaScript
- JavaScript concatenation
- Supprimer les CSS et les commentaires inutilisés de notre site Web
- Traitement du HTML
- Déploiement des ressources
- Automatiser les tâches
- Mise en place de l’environnement avec Gulp
- Extends & placeholder, les différences
- Fonctions internes
- Compass & bourbon, des frameworks pour SASS
Pour aller plus loin
Formation Angular
Formation Ionic
Formation Firebase avec Angularfire
Formation Redux et RxJS
Formation MEAN Stack
Formation D3.js
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Nos Formateurs Référents
Témoignages
L’aspect intégration du framework CSS au framework JS best practice
le support de cours
dès le choix du framework JS opéré, une formation sur ce framework JS
Afficher tous les témoignages
L’aspect intégration du framework CSS au framework JS best practice
le support de cours
dès le choix du framework JS opéré, une formation sur ce framework JS
La bonne connaissance du formateur par rapport au sujet de la formation et de tout l’environnement autour du sujet de formation
RAS
Comment écraser certaines restrictions bootstrap, La découverte d’angular qui est un framework fréquemment utilisé
Peut-être moins se baser sur la doc pour présenter davantage d’exemples
Probablement des formations en machine learning ou big data avec Spark
Je recommande la formation
Adaptation de la formation au public,
vue global du css et application Bootstrap
Merci au formateur (Fabien Lainé) pour l’écoute et l’adaptation dynamique de sa formation à nos besoins
Points forts de la formation :
– Permet de bien poser les bases pour commencer à utiliser bootstrap et sass correctement.
– Les démonstrations de code et de rendu.
– Plusieurs sites plutôt pratique à regarder.
exemple concret, pédagogie de l’enseignant.
Formateur à l’écoute et qui, par son expérience professionnelle, expose beaucoup de cas pratiques
Super formation. Fabian était très cool, à l’écoute et s’est adapté à notre niveau et nos connaissances. J’ai appris plein de choses, maintenant il faut pratiquer.
Et sinon, locaux super, accueil chaleureux. Je recommande vivement cet organisme.
Noter la formation
| 1800€ HT / personne |
| 3 jours (21 heures) |
