Vous êtes sur la page 1sur 2

Stage pratique de 2 jour(s)

Réf : BOO
Bootstrap, développer des pages Web Responsive
Participants Le framework Bootstrap, créé par les développeurs de Twitter, est devenu un framework CSS de référence
dans la conception de sites Web. Vous apprendrez dans ce stage à habiller vos pages et à les enrichir de
Webmasters, développeurs et
intégrateurs.
composants interactifs avec Bootstrap afin de rendre vos sites attractifs et adaptatifs.

Pré-requis OBJECTIFS PEDAGOGIQUES

Connaître HTML et CSS Intégrer Bootstrap dans un projet Web


et avoir des notions de Réaliser des pages Web reprenant les codes esthétiques des sites actuels
JavaScript. Maîtriser les composants et les plug-ins du framework Bootstrap
Développer des sites Web responsive
Prix 2019 : 1500€ HT
1) Présentation du framework 4) Les composants de base
Dates des sessions 2) Les feuilles de style de Bootstrap 5) Les plug-ins jQuery de Bootstrap
PARIS 3) Les grilles 6) Analyse des modèles Bootstrap
05 déc. 2019
Méthodes pédagogiques
50% d'exposé, 50% de pratique.
Modalités
d’évaluation Travaux pratiques
L’évaluation des acquis se Réalisation d'une interface administrateur back-office avec Bootstrap. Création d'un site Web Responsive
fait tout au long de la session depuis un modèle Bootstrap.
au travers des multiples
exercices à réaliser (50 à 70%
du temps). 1) Présentation du framework
- Vue d'ensemble du framework Bootstrap.
Compétences du - L'apport de BootStrap par rapport à CSS.
- Les éléments du kit Bootstrap (grilles, Normalize.css, icônes, plug-ins jQuery...).
formateur - Comprendre l'arborescence des différents fichiers : feuilles de style, JavaScript...
Les experts qui animent - Lier une page Web à la feuille de style de base de Bootstrap.
la formation sont des
spécialistes des matières Travaux pratiques
abordées. Ils ont été Installation de Bootstrap. Habiller une page HTML avec Bootstrap.
validés par nos équipes
pédagogiques tant sur le 2) Les feuilles de style de Bootstrap
plan des connaissances
métiers que sur celui de la - Les CSS pour les éléments textuels et les images.
pédagogie, et ce pour chaque - Les CSS pour les éléments de formulaires et les tableaux.
cours qu’ils enseignent. Ils - Utilisation des polices icones pour afficher des icônes sur les pages.
ont au minimum cinq à dix
- Les CSS pour la mise en page, les blocs de texte.
années d’expérience dans
leur domaine et occupent
- Personnaliser sa feuille de style.
ou ont occupé des postes à Travaux pratiques
responsabilité en entreprise.
Styler les différents éléments constituant une page Web avec les CSS de Bootstrap. Personnaliser le style de
certains éléments de la page.

Moyens 3) Les grilles


pédagogiques et - Comprendre le concept de grille.
techniques - Les grilles adaptatives (le Responsive Web Design, Media Queries, positionnement...).
• Les moyens pédagogiques - Organisation de la grille. Manipuler les grilles.
et les méthodes - Créer une page multigrille.
d'enseignement utilisés - Les grilles statiques et élastiques.
sont principalement : aides
audiovisuelles, documentation Travaux pratiques
et support de cours, exercices Créer une page Web responsive basée sur une grille.
pratiques d'application et
corrigés des exercices pour 4) Les composants de base
les stages pratiques, études
de cas ou présentation de cas - Les menus déroulants.
réels pour les séminaires de - Les composants de navigation et de pagination.
formation. - Les boutons, les badges, les alertes.
• A l'issue de chaque stage ou - Les barres de progression.
séminaire, ORSYS fournit aux - Les tableaux, les listes d'éléments.
participants un questionnaire
d'évaluation du cours qui Travaux pratiques
est ensuite analysé par nos Conception d'une page Web pour un site Internet ou intranet intégrant plusieurs composants Bootstrap.
équipes pédagogiques.
• Une feuille d’émargement
5) Les plug-ins jQuery de Bootstrap
par demi-journée de présence - Les fenêtres modales. Les accordéons. Le carrousel de photos.
est fournie en fin de formation
- La barre de navigation. Les onglets. Les menus déroulants.
ainsi qu’une attestation de fin
- Les champs d'auto-complétion.

ORSYS, La Grande Arche, Paroi Nord, 92044 Paris La Défense cedex. Tél : +33 (0)1 49 07 73 73. Fax : +33(0)1 49 07 73 78 page 1
de formation si le stagiaire a - Intégration de plug-ins externes (Datepicker...).
bien assisté à la totalité de la - Les cards conteneurs flexibles et extensibles.
session.
Travaux pratiques
Intégrer des effets visuels modernes par le biais de plug-ins jQuery associés à la librairie Bootstrap.

6) Analyse des modèles Bootstrap


- Analyser des modèles construits à partir de Bootstraps.
- Créer un site avec un des modèles.
- Créer une page à partir d'un modèle en surchargeant le fichier CSS.
- Utiliser des fichiers LESS avec un préprocesseur et un serveur Nodejs.
Travaux pratiques
Créer un site depuis un modèle.

ORSYS, La Grande Arche, Paroi Nord, 92044 Paris La Défense cedex. Tél : +33 (0)1 49 07 73 73. Fax : +33(0)1 49 07 73 78 page 2