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.

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

Attestation d'acquis ou de compétences;Attestation de suivi de présence

Connaissance du HTML5 / CSS3