Sélectionner une page
Formations Formation Bootstrap 5 : Framework CSS

Formation Bootstrap 5

Logo Formation Bootstrap
Prix 1800€ HT / personne
3 jours (21 heures)

Paris | Classe Virtuelle

Dernières places Virtuelle uniquement
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

Présentation

Notre formation Bootstrap vous apprendra à créer des pages web rapidement en profitant de toute la puissance du HTML et du CSS. Avec Bootstrap 5, la conception de site mobile et responsive n’est plus un calvaire.

En effet, grâce à son approche « mobile-first », Bootstrap 5 vous permettra une compatibilité multiplateforme pour les éléments essentiels d’un site web : la navigation, la grid, les forms, les carousels, les cards, les boutons, les accordéons ou encore les tables.

La maîtrise de cet outil est un avantage conséquent pour accélérer la vitesse de développement d’un site web.

Durant notre formation bootstrap, nous vous présenterons les bases de ce framework CSS, que ce soit en termes de conception d’éléments UI et UX ou de styles (typographie, icônes, les popups et popovers).

Suite à ce cours, vous saurez comment personnaliser un site rapidement. Nous vous enseignerons également l’utilisation du JavaScript et de JQuery afin de créer des animations dynamiques.

 

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 son propre design grâce Bootstrap
  • L’utiliser comme socle fondateur dans vos sites web

 

Public visé

Développeur Web, Webdesigner et Webmaster

 

Pré-requis

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

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

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
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
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
29 septembre 2021

Je recommande la formation

Marie-José T. de chez BIOLOG ID
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
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
10 juin 2020

exemple concret, pédagogie de l’enseignant.

Sébastien H. de chez Traceparts
10 juin 2020

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

Clara W. de chez Traceparts
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
3 jours (21 heures)

Paris | Classe Virtuelle

Dernières places Virtuelle uniquement
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

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