ENI SERVICE

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

Par ENI SERVICE

Objectifs

  • Intégrer la librairie Bootstrap dans votre projet
  • Structurer la page HTML et positionner le contenu avec une grille
  • Utiliser les styles prédéfinis
  • Mettre en oeuvre les composants simple
  • Personnaliser le thème
  • Intégrer des composants dynamiques avec la librairie complémentaire jQuery

Programme

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.

Pédagogie

Formation avec un formateur, qui peut être suivie selon l’une des 3 modalités ci-dessous :

1 – Dans la salle de cours en présence du formateur.

2 – Dans l’une de nos salles de cours immersives, avec le formateur présent physiquement à distance. Les salles immersives sont équipées d’un système de visio-conférence HD et complétées par des outils pédagogiques qui garantissent le même niveau de qualité.

3 – Depuis votre domicile ou votre entreprise. Vous rejoignez un environnement de formation en ligne, à l’aide de votre ordinateur, tout en étant éloigné physiquement du formateur et des autres participants. Vous êtes en totale immersion avec le groupe et participez à la formation dans les mêmes conditions que le présentiel. Pour plus d’informations : Le téléprésentiel – notre solution de formation à distance.

Le nombre de stagiaires peut varier de 1 à 12 personnes (5 à 6 personnes en moyenne), ce qui facilite le suivi permanent et la proximité avec chaque stagiaire.

Chaque stagiaire dispose d’un poste de travail adapté aux besoins de la formation, d’un support de cours et/ou un manuel de référence au format numérique ou papier (pour les sessions inter-entreprises, dans le cas où le support de cours officiel est en anglais, nous offrons en complément, s’il existe, un ouvrage de référence des Editions ENI au format numérique rédigé en français).

Pour une meilleure assimilation, le formateur alterne tout au long de la journée les exposés théoriques, les démonstrations et la mise en pratique au travers d’exercices et de cas concrets réalisés seul ou en groupe.

En début et en fin de formation, les stagiaires réalisent une auto-évaluation de leurs connaissances et compétences en lien avec les objectifs de la formation. L’écart entre les deux évaluations permet ainsi de mesurer leurs acquis.

En complément, pour les stagiaires qui le souhaitent, certaines formations peuvent être validées officiellement par un examen de certification. Les candidats à la certification doivent produire un travail personnel important en vue de se présenter au passage de l’examen, le seul suivi de la formation ne constitue pas un élément suffisant pour garantir un bon résultat et/ou l’obtention de la certification.

Pour certaines formations certifiantes (ex : ITIL, Prince2, DPO, …), le passage de l’examen de certification est inclus et réalisé en fin de formation. Les candidats sont alors préparés par le formateur au passage de l’examen tout au long de la formation.

Feuille de présence, émargée par demi-journée par chaque stagiaire et le formateur ;

Evaluation qualitative de fin de formation, qui est ensuite analysée par l’équipe pédagogique ENI ;

Attestation de fin de formation, remise au stagiaire en main propre ou par courrier électronique.

La formation est animée par un professionnel de l’informatique et de la pédagogie, dont les compétences techniques, professionnelles et pédagogiques ont été validées par des certifications et/ou testées et approuvées par les éditeurs et/ou notre équipe pédagogique. Il est en veille technologique permanente et possède plusieurs années d’expérience sur les produits, technologies et méthodes enseignés. Il est présent auprès des stagiaires pendant toute la durée de la formation.

Formations de la même catégories (5)

Feel Europe
Créer un site web REST avec Python et FlaskPar Feel Europe

Maitriser le développement d’un site Web moderne avec le framework Flask.

CCM Benchmark
UX et E-commercePar CCM Benchmark

Cette formation fournit les pistes à suivre pour améliorer la qualité de son site e-commerce, mettre en valeur son offre, optimiser l'accès aux fiches produit et le processus de commande et de paiement en ligne.
Elle s'appuie sur des exemples issus des dernières refontes et sur les initiatives récentes les plus exemplaires.

IB Formation
Ergonomie et UX design d'interfaces graphiques pour appareils tactilesPar IB Formation

Si le marché des ventes de PC s’essouffle, celui des tablettes et smartphones continue d’afficher de bonnes performances. C’est dire l’engouement du grand public pour ces appareils. Face à ce phénomène, les entreprises "commerciales" se doivent de réagir et de proposer, comme il y a quelques années sur Internet, des applications (Apps) ou des sites web adaptés à ces appareils. Mais la diversité des tailles d’écrans comme la nécessité de proposer une navigation "tactile" très intuitive impose une sérieuse réflexion quant au design et à l’ergonomie de ce type d’interfaces. A l’issue de cette formation, les participants disposeront des connaissances et compétences qui leur permettront de réaliser des applications web ou des sites web conviviaux pour tous les utilisateurs (web et mobiles).

Orsys
Analyse et ergonomie des IHM logiciellesPar Orsys

Qu’il s’agisse d’écrans directement intégrés aux machines, d’écrans d’ordinateur, de tablettes tactiles ou de Smartphones, le but des interfaces reste de dialoguer avec un utilisateur et de répondre à ses besoins. Afin découvrir ces besoins et le rôle de l’ergonome, cette formation vous présentera des méthodes de design d’interface centré utilisateur, et vous fera découvrir les principes d’ergonomie essentiels pour concevoir et auditer une IHM.

Orsys
Responsive web design: les techniques modernes de mise en pagePar Orsys

Ces tutoriels de formation 100% à distance ont pour objectifs de vous apprendre des techniques modernes de mise en page afin de créer des sites web dont l'affichage s'adapte automatiquement aux écrans sur lesquels ils sont diffusés. Ils s’adressent à un public de créateurs de site web, designers, chefs de projets, webmasters ou toute personne disposant des connaissances de base en langages HTML et CSS qui souhaite s'initier au responsive web design . La pédagogie s'appuie sur un autoapprentissage séquencé par actions de l’utilisateur sur l’environnement à maîtriser.