webleads-tracker

Formation bootstrap, foundation - Medialibs

Manipuler les frameworks Bootstrap ou Foundation

Optimisez vos intégrations en utilisant les frameworks Foundation ou Bootstrap et capitalisez sur la performance web avec les préprocesseurs CSS (initiation)

Détail de la formation

Niveau : Intermédiaire

Durée : 14 heures (2 jours)

Type : Formation collective
Formation exclusive

Profil : Intégrateurs et développeurs

Tarifs : Formation collective 998€ HT
Formation exclusive 1400€ HT


Demander des informations

 

 

target-icon Objectifs

  • Mieux maîtriser la création de sites adaptatifs (Responsive Web Design)
  • Utiliser les frameworks Foundation et Bootstrap
  • Mettre en place une méthodologie de performance web
  • Découvrir l'interaction front-end avec les préprocesseurs CSS
 
 

check-iconPré-requis

  • Connaissances en langages HTML & CSS
  • Comprendre la logique de l'intégration web
 

list icon blueProgramme

Partie 1 : Les framework "copier-coller"

Introduction : framework 2.0

  • Pourquoi utiliser un framework CSS ?
  • Principe de structuration et d'intégration
  • Intérêts et objectifs
  • Système de grille
  • Vers le responsive web design (RWD)
  • Mise en forme structurelle et textuelle
  • Présentation de quelques templates

Atelier

Bootstrap

  • Bootstrap : présentation, apports, exemples 
  • Bootstrap et le Responsive Web Design (RWD)
  • Cohabitation de Bootstrap avec les autres frameworks javascript : jQuery, ExtJS,...
  • Grille Bootstrap, templates de base et layouts
  • Composants et classes CSS de base
  • Mécanisme de RWD (classes CSS / device)
  • Documentation, liens utiles
  • Glyphicons Vs FontAwesome

Atelier : Inclure Bootstrap dans un projet, utiliser une première grille flexible

Les composants CSS Bootstrap

  • Typographie et liens 
  • Eléments de formulaires, contrôles supportés 
  • Boutons : options, tailles, état 
  • Images et icônes : éviter les débordements
  • Navigation
  • Breadcrumb ( fil d'ariane )
  • Pagination: contenus longs
  • Badge
  • Barre de progression
  • Alertes

Atelier : Utilisation de classes bootstrap dans des pages web

3/ Utiliser les composants Bootstrap

  • Barres de navigation : tabs, pills, justified nav 
  • Menus déroulants : formulaires, boutons, positionnement 
  • Breadcrumb (fil d'ariane)
  • Pagination
  • Badges 
  • Alertes 
  • Barres de progression : labels, animations
  • Media object : slider, carousel
  • List group

Atelier : Multiples exemples d'intégration de composants Bootstrap

Partie 2 : Travaux pratique et performance

4/ Bootstrap & LESS

  • Intérêt de LESS
  • Customize Less Variables
  • Bootstrap Less Master
  • Environnement pour compiler, compresser, minifier LESS/ CSS/ JS

Atelier : Intégration d'éléments LESS à son projet

5/ Manipuler Bootstrap en Javascript

  • Mise en place de transitions 
  • Fenêtres modales : types, tailles 
  • Gestion des menus déroulants 
  • Tabulations 
  • Sliders 
  • Personnalisation de Bootstrap

Atelier : Intégration d'interactions et de transitions

6/ Automatiser ses tâches (DRY)

  • A la découverte de NodeJs & Grunt

Atelier : Trouver le bon eco-system (mode développement vs mode Production)

7/ Ressources

  • Liens utiles
  • Ressources

Questions / Réponses

 
 

Informations et inscription à la formation :
"Les frameworks Foundation et Bootstrap"