Orsys

Bootstrap 4, développer des pages Web Responsive

Par Orsys

Objectifs

  • Intégrer Bootstrap dans un projet Web
  • Réaliser des pages Web reprenant les codes esthétiques des sites actuels
  • Maîtriser les composants et les plug-ins du framework Bootstrap
  • Développer des sites Web responsive

Programme

Présentation du framework

  • Vue d'ensemble du framework Bootstrap.
  • L'apport de Bootstrap par rapport à CSS.
  • Les éléments du kit Bootstrap (grilles, Normalize.css, icônes, plug-ins jQuery...).
  • Comprendre l'arborescence des différents fichiers : feuilles de style, JavaScript...
  • Lier une page Web à la feuille de style de base de Bootstrap.

Travaux pratiques
Installation de Bootstrap. Habiller une page HTML avec Bootstrap.

Les feuilles de style de Bootstrap

  • Les CSS pour les éléments textuels et les images.
  • Les CSS pour les éléments de formulaires et les tableaux.
  • Utilisation des polices icônes pour afficher des icônes sur les pages.
  • Les CSS pour la mise en page, les blocs de texte.
  • Personnaliser sa feuille de style.

Travaux pratiques
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.

Les grilles

  • Comprendre le concept de grille.
  • Les grilles adaptatives (le Responsive Web Design, Media Queries, positionnement...).
  • Organisation de la grille. Manipuler les grilles.
  • Flexbox dans Bootstrap.
  • Disposition des colonnes.
  • L'ordre des blocks.

Travaux pratiques
Créer une page Web responsive basée sur une grille.

Les composants de base

  • Les deux fichiers JavaScript nécessaires.
  • Les marges de chaque block.
  • Les menus responsives améliorés.
  • Les composants de navigation et de pagination.
  • Les boutons, les badges, les alertes.
  • Les barres de progression.
  • Les tableaux, les listes d'éléments.

Travaux pratiques
Conception d'une page Web pour un site Internet ou intranet intégrant plusieurs composants Bootstrap.

Les plug-ins jQuery de Bootstrap

  • Les fenêtres modales. Les accordéons. Le carrousel de photos.
  • La barre de navigation. Les onglets. Les menus déroulants.
  • Les champs d'auto-complétion.
  • Intégration de plug-ins externes (Datepicker...).
  • Les cards conteneurs flexibles et extensibles.

Travaux pratiques
Intégrer des effets visuels modernes par le biais de plug-ins jQuery associés à la librairie Bootstrap.

Analyse des modèles Bootstrap

  • Analyser des modèles construits à partir de Bootstrap.
  • 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 SAAS avec un préprocesseur et/ou un serveur NodeJS.

Travaux pratiques
Créer son propre Bootstrap.css.

Pédagogie

Réalisation d'une interface administrateur back-office avec Bootstrap. Création d'un site Web Responsive depuis un modèle Bootstrap.

50% d'exposé, 50% de pratique.

Présentation du framework

  • Vue d'ensemble du framework Bootstrap.
  • L'apport de Bootstrap par rapport à CSS.
  • Les éléments du kit Bootstrap (grilles, Normalize.css, icônes, plug-ins jQuery...).
  • Comprendre l'arborescence des différents fichiers : feuilles de style, JavaScript...
  • Lier une page Web à la feuille de style de base de Bootstrap.

Travaux pratiques
Installation de Bootstrap. Habiller une page HTML avec Bootstrap.

Les feuilles de style de Bootstrap

  • Les CSS pour les éléments textuels et les images.
  • Les CSS pour les éléments de formulaires et les tableaux.
  • Utilisation des polices icônes pour afficher des icônes sur les pages.
  • Les CSS pour la mise en page, les blocs de texte.
  • Personnaliser sa feuille de style.

Travaux pratiques
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.

Les grilles

  • Comprendre le concept de grille.
  • Les grilles adaptatives (le Responsive Web Design, Media Queries, positionnement...).
  • Organisation de la grille. Manipuler les grilles.
  • Flexbox dans Bootstrap.
  • Disposition des colonnes.
  • L'ordre des blocks.

Travaux pratiques
Créer une page Web responsive basée sur une grille.

Les composants de base

  • Les deux fichiers JavaScript nécessaires.
  • Les marges de chaque block.
  • Les menus responsives améliorés.
  • Les composants de navigation et de pagination.
  • Les boutons, les badges, les alertes.
  • Les barres de progression.
  • Les tableaux, les listes d'éléments.

Travaux pratiques
Conception d'une page Web pour un site Internet ou intranet intégrant plusieurs composants Bootstrap.

Les plug-ins jQuery de Bootstrap

  • Les fenêtres modales. Les accordéons. Le carrousel de photos.
  • La barre de navigation. Les onglets. Les menus déroulants.
  • Les champs d'auto-complétion.
  • Intégration de plug-ins externes (Datepicker...).
  • Les cards conteneurs flexibles et extensibles.

Travaux pratiques
Intégrer des effets visuels modernes par le biais de plug-ins jQuery associés à la librairie Bootstrap.

Analyse des modèles Bootstrap

  • Analyser des modèles construits à partir de Bootstrap.
  • 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 SAAS avec un préprocesseur et/ou un serveur NodeJS.

Travaux pratiques
Créer son propre Bootstrap.css.

PDF

Imprimer

Envoyer

Envoyer la page à :

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

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

Cette formation vous présentera les principes de l'ergonomie des IHM et vous fera découvrir les bonnes pratiques pour concevoir et améliorer leur design.

Global Knowledge
Developing on Hyperledger Fabric BlockchainPar Global Knowledge

Découvrez les besoins en applications Blockchain, ainsi que Hyperledger Fabric, le framework open source pour le développement d'applications et de solutions Blockchain à architecture modulaire. Ce cours vous présentera l'outil Hyperledger Composer, qui vous aide à créer des applications Hyperledger Fabric grâce à des travaux pratiques complets.

Ce cours est enseigné par des experts de premier plan, qui vous guideront à travers les sujets de présentation et ceux plus approfondis, tels que les étapes pour intégrer / développer une application avec Hyperledger Fabric v1.1.

Pyramyd Formation
HTML5, CSS3 et le responsive Web designPar Pyramyd Formation

CERTIFICATION ENI

La certification valide des compétences et se présente sous la forme d’un questionnaire à choix multiple adaptatif avec plusieurs niveaux de questions.