Formations Web Webdesign Formation Bootstrap 5 : Framework CSS

Formation Bootstrap 5

Noté 4.7 sur 5
Logo Formation Bootstrap
Prix 1800€ HT / personne
Durée 3 jours (21 heures)

Paris | Classe Virtuelle

Il ne reste que quelques places
NewCafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Je ne veux pas me déplacer ? Option classe virtuelle gratuite

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

Noté 5 sur 5
8 avril 2022

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

Eric B. de chez Caisse Centrale de MSA

Afficher tous les témoignages

Noté 5 sur 5
8 avril 2022

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

Eric B. de chez Caisse Centrale de MSA
Noté 5 sur 5
8 avril 2022

La bonne connaissance du formateur par rapport au sujet de la formation et de tout l’environnement autour du sujet de formation

RAS

Cendrine S. de chez Caisse Centrale de MSA
Noté 4 sur 5
8 avril 2022

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

Hassan S. de chez Caisse Centrale de MSA
Noté 4 sur 5
29 septembre 2021

Je recommande la formation

Marie-José T. de chez BIOLOG ID
Noté 5 sur 5
29 septembre 2021

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

Grégoire D. de chez BIOLOG ID
Noté 5 sur 5
10 juin 2020

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.

Florian H. de chez Traceparts
Noté 4 sur 5
10 juin 2020

exemple concret, pédagogie de l’enseignant.

Sébastien H. de chez Traceparts
Noté 5 sur 5
10 juin 2020

Formateur à l’écoute et qui, par son expérience professionnelle, expose beaucoup de cas pratiques

Clara W. de chez Traceparts
Noté 5 sur 5
28 juin 2019

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.

Clément de Kang

Noter la formation

Prix 1800€ HT / personne
Durée 3 jours (21 heures)

Paris | Classe Virtuelle

Il ne reste que quelques places
NewCafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Je ne veux pas me déplacer ? Option classe virtuelle gratuite

UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?

Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.

ILS SE SONT FORMÉS CHEZ NOUS

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp