Formation Bootstrap 4

4,6 rating
Logo Formation Bootstrap 4

2000€

1800€ HT / personne

3 jours (21 heures)

Paris
Il ne reste que quelques places
Disponible aussi en intra-entreprise pour former votre équipe.

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 est une réécriture majeure 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 4 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 (Bootstrap 4.3.1 version sortie en février 2019 à la date de rédaction de l’article).

 

Objectifs

  • Présenter les différentes fonctionnalités afin de vous permettre de maîtriser Bootstrap 4
  • Être à même d’adapter vous-même le code source de Bootstrap 4
  • 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 4

 

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 4 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 4 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 4 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 4
  • Variables et mixins

 

Ateliers & Intégration

  • Intégration d’une maquette pour un site full responsive
  • Introduction à WebPack 4
    • Utiliser Bootstrap 4 avec Angular 7
    • Utiliser Bootstrap 4 avec Symfony 4

 

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 4 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
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

    Afficher tous les témoignages

    Noter la formation

    2000€

    1800€ HT / personne

    3 jours (21 heures)

    Paris
    Il ne reste que quelques places
    Disponible aussi en intra-entreprise pour former votre équipe.

    Une question ? Un projet ?

    Pour des informations complémentaires, n’hésitez pas à nous contacter.