Evolution MM

Formations à l'informatique
Découvrez la différence ENI

Lien accueil

Téléchargez le Calendrier des formations

Nantes, Rennes, Niort, Nice, Paris

jusqu'à juillet 2018

Rechercher
Rechercher une formation
 

Bootstrap 3 : Créez facilement le design de vos sites Web

L'étude de Bootstrap 3 permettra aux stagiaires de :
  • Maitriser la présentation Responsive des applications Web ;
  • Disposer d'une bibliothèque complète de fonctionnalités permettant de résoudre le casse-tête du développement Web ;
  • Faire un rappel concret des nouveautés HTML5 et CSS3.

Public :

  • Toute personne souhaitant mettre en œuvre le framework Bootstrap 3 pour faciliter la conception les applications Web Responsive

Objectifs :

  • Mettre en place une interface HTML5 et CSS3.
  • Créer un site web responsive.
  • Manipuler les bases de jQuery.
  • Utiliser l'ensemble de la bibliothèque Bootstrap 3.

Pré-requis :

  • Maîtriser les bases de HTML, CSS et JavaScript.

Contenu pédagogique

Introduction générale

Présentation de HTML5 et CSS3

  • Structure d'une page HTML 5 et CSS 3
  • Balises importantes
  • Présentation des attributs HTML5

Introduction à jQuery

  • Présentation du framework jQuery
  • Gestion des événements
  • Manipuler le DOM
  • Manipuler le CSS
  • Manipuler les attributs HTML5

Introduction à Bootstrap 3

  • Présentation du framework Bootstrap 3
  • Télécharger et installer Bootstrap 3
  • Créer une première page HTML utilisant Bootstrap 3

Créer une interface Web Responsive

  • Présentation du concept de grilles de Bootstrap 3
    • 4 grilles pour 4 types de supports
    • Créer une page multi-grilles
  • Manipuler les grilles
    • Afficher et cacher des zones en fonction du support
    • Changer l'ordre des zones
    • Décaler les éléments d'une grille

La typographie

  • Disposition du texte
  • Mise en forme contextuelle
    • Texte simple
    • Bandeaux d'alerte contextuels
    • Les badges
    • Les labels
  • La bibliothèque Glyphicons

Les listes

  • Introduction
  • Les listes simples
  • Les listes en ligne
  • Les listes de définition
  • Les listes de définition horizontales
  • Les list-group
  • Media Objects

Les boutons

  • Les boutons contextuels
  • One class, multiple tag
  • Taille des boutons
  • Les boutons groupés
  • Boutons avec menu déroulant
  • Manipuler les boutons avec l'API Bootstrap 3
    • Via les attributs HTML5
    • Via la fonction .button()

Les formulaires

  • Principes de base
  • Formulaires horizontaux
  • Formulaires verticaux
  • Largeur des éléments du formulaire
  • Hauteur des éléments du formulaire
  • Les éléments groupés
  • Les messages d'aide
  • Messages d'aide contextuels

La navigation

  • Objectif
  • La barre de navigation principale
    • Première barre de navigation
    • Fixer la barre en haut ou en bas
    • Aligner le contenu
    • Insertion d'un bouton
    • Insertion d'un formulaire
    • Insertion d'un menu déroulant
    • Rendre la barre responsive
  • Les sous-menus
    • Sous-menus avec onglets
    • Sous-menus sans onglet
    • Sous-menus verticaux

Les images

  • Mise en forme
  • Manipuler la taille des images
  • Créer une étiquette
  • Le carrousel de Bootstrap 3
  • Manipuler le carrousel avec l'API Bootstrap 3
    • Via les attributs HTML5
    • Via la fonction .carousel()

Les infobulles

  • Objectif
  • Les tooltips
    • Présentation
    • Manipuler les tooltips avec l'API Bootstrap 3
  • Les popovers
    • Présentation
    • Manipuler les popovers avec l'API Bootstrap 3
  • Les fenêtres modales
    • Présentation
    • Manipuler les fenêtres modales avec l'API Bootstrap 3

Les tableaux et panneaux

  • Les tableaux
    • Présentation des différents types de tableaux
    • Lignes et cellules contextuelles
    • Tableaux adaptés aux supports mobiles
  • Les panneaux
    • Panneau simple
    • Panneau et tableau

Travaux pratique final

  • Nous terminons cette formation par un cas pratique d'une durée d'environ 2 heures. Il est demandé aux stagiaires de créer un mini site Web reprenant l'ensemble des éléments étudiés en cours. Le contenu est adapté en fonction des attentes initiales des stagiaires et des questions / intérêts de chacun.
Durée : 3 jour(s)
Tarif : Consultez-nous
Réf : T448-035

Dates des sessions

Nantes (44) Consultez-nous Rennes (35) Consultez-nous Paris (75) Consultez-nous Niort (79) Consultez-nous Nice (06) Consultez-nous in-class™