Formation Bootstrap (inclus la mise à jour Bootstrap 4)

Développer un site adapté aux différents supports : mobile, tablette et ordinateur (responsive design) plus rapidement avec le framework Bootstrap 3 et 4. Bootstrap est disponible sous licence Open Source.

14 heures | 2 jours
Débutant
Dernière mise à jour : janvier 2020
Formation Bootstrap (inclus la mise à jour Bootstrap 4)
Objectifs
  • Comprendre les différences entre Bootstrap 3 et Bootstrap 4
  • Savoir modifier le code CSS de bootstrap sans modifier la feuille de style originale
  • Interpréter la documentation de bootstrap
Pré-requis
  • Bonne connaissances du HTML / CSS
  • Connaître le responsive web design
+ Afficher plus
Programme

Journée 1 :

Découverte de Bootstrap.
  • Introduction à Bootstrap
  • Historique des versions
  • Différence entre Bootstrap 3 et 4 et pourquoi les 2 versions sont toujours utilisés
  • Les préprocesseurs CSS Less et Sass dans Bootstrap
Développement d'un premier site avec Bootstrap 3.
  • Utiliser un exemple de site Bootstrap 3 pour démarrer un projet.
  • Interpréter la documentation officiel de Bootstrap 3
  • Normalisation du code entre tous les navigateurs (Normalize.css)
  • Installation de Bootstrap 3
  • Les container (.container et .container-fluid)
  • Utilisation de la grille (grid) adapté au responsive design
  • Manipulation des lignes (.row) et colonnes par tailles d'écran (.col-xs, .col-sm, .col-md, .col-lg)
Mise en place du code HTML / CSS à l'aide de la documentation Bootstrap 3.
  • Typographie
  • Les listes
  • Tableaux
  • Formulaires
  • Boutons
  • Images
Mise en place du code Javascript.
  • Boite de dialogue de type pop-up (Modal)
  • Liste déroulante (Dropdown)
  • Accordéon (Collapse)
  • Animation d'images et texte dans un carrousel (Carousel)
  • Fixer un élément ou un menu vers le haut lors d'un défilement de la page (Affix)
Composants principaux de Bootstrap 3
  • Utilisation de la police d'écriture Glyphicons
  • Menu de navigation (Navbar)
Bonne pratique pour modifier le code CSS de bootstrap sans modifier la feuille de style originale.

Journée 2 :

Nouveautés de Bootstrap 4.
  • Comprendre les différences et nouveautés majeurs de Bootstrap 4
  • Les flexbox dans Bootstrap 4
  • Non prise en charge des navigateurs IE8, IE9, iOS 6.
  • Utilisation de l'unité de mesure rem au lieu de px principalement pour les textes.
  • Taille de police globale augmentée de 14px à 16px (1 rem).
  • Réorganisation des grilles (5 niveaux de col-) par taille d'écran 
  • Réécriture de la barre de navigation (Navbar) avec les flexbox
  • Utilisation des polices d'icônes pour afficher des icônes sur les pages
  • D'autres nouveautés à découvrir
Développement d'un second site avec Bootstrap 4 à partir d'un template.

Formateur
Formateur Mickael
Mickael dispose d'une solide expérience front-end et notamment en référencement et graphisme. Il travail en informatique depuis plus de 15 ans. Mickael intervient également en administration système Linux et et macOS.
Autres formations qui pourraient vous intéresser
Formation Atomic Design
Dernière mise à jour : février 2019
1690 € HT
Formation Progressive Web App (PWA)
Dernière mise à jour : juin 2020
1290 € HT
Formation au préprocesseur SASS avec le framework Compass
1290 € HT
Formation Responsive Web Design
Dernière mise à jour : janvier 2020
1200 € HT
Formation Wordpress, initiation à la création d'un site professionnel
1690 € HT