Accueil > Développement informatique et DevOps > Bootstrap 4 : Système de grille
Formation #DEV203

Formation Bootstrap 4 : Système de grille

Durée : 3 jours

Code : DEV203


Prochaines dates programmées :

Du 17 au 19 Juil. 2024

Du 20 au 22 Nov. 2024

Fin d'Inscription :
Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.
Si vous avez un besoin URGENT et que vous souhaitez une date de formation plus proche que les sessions programmées (minimum 15 à 20 jours ouvrés à date de votre demande)

Objectifs

  • Présenter les différentes fonctionnalités afin de vous permettre de maîtriser Bootstrap 4
  • Être à même d’adapter vous-même le code source de Bootstrap 4
  • Intégrer votre propre design grâce Bootstrap
  • L’utiliser comme socle fondateur dans vos sites web
Programme
1/ Présentation du framework
  • Qu’est-ce qu’un framework CSS ?
  • Évolution des technologies web : rappels sur HTML5 / CSS3
  • Les alternatives à bootstrap
  • Pourquoi utiliser bootstrap ?
  • Vue d'ensemble du framework Bootstrap
  • L'apport de Bootstrap par rapport à CSS
  • Vocabulaire Bootstrap
  • L'arborescence des fichiers Bootstrap 3 et Bootstrap 4
  • Différences en Bootstrap 3 et Bootstrap 4
  • Lier une page aux feuillles de style Bootstrap
2/ Mise en place de Bootstrap
  • Installation locale ou par Content Delivery Network
  • Comprendre les relations entre Bootstrap, CSS et JavaScript
3/ Mise en page avec la grille
  • Principe de structuration et d’intégration
  • Faire une mise en pages responsive
  • Passage en revue des responsive breakpoints (différentes tailles d’écran)
  • Du pixel au root em (rem)
  • Mise en place de la grille
  • Container, Row, Columns
  • Utilisation de Flexbox avec la grille Bootstrap
4/ Les contenus HTML et CSS
  • Titres, et mise en pages du texte
  • Les Images responsives
  • Tableaux et liste d’éléments
  • Surcharger les styles au profit de ceux développés
5/ Les composants HTML et CSS
  • Menus de navigation
  • Breadcrumb ou fil d’Ariane
  • Medias objects
  • Cards
  • Les listes
  • Boutons, groupes de boutons et boutons déroulants
  • Pagination
  • Formulaires et Inputs
  • Les alertes
  • Un peu de déco : les badges, les spinners
  • Jumbotron
  • Lecteurs vidéos et audios personnalisés
  • Intégrer du CSS personnalisé dans votre projet
6/ Utiliser Bootstrap avec JavaScript et jQuery
  • Carrousels de photos, accordéons
  • Collapse elements
  • Modals ou Boîtes modales
  • Popovers
  • Progress ou Barre de progression
  • Scrollspy
  • Toasts
  • Tooltips
  • Menus déroulants intelligents
  • Onglets
  • Tabulations
7/ Les utilities
  • Utilities layout, flexbox , float, clearfix, position, visibilité & display
  • Utilities borders
  • Utilities overflow
  • Utilities couleurs
  • Utilities shadow
  • Utilities sizing & spacing
  • Utilities textes
  • Utilities alignement
8/ 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
9/ Le pré-processeur Sass
  • Qu’est-ce qu’un pré-processeur ?
  • Avantages de Sass
  • Sass et Bootstrap 4
  • Variables et mixins
Approche Pédagogique

Approche Pédagogique

  • Pédagogie très opérationnelle fondée sur l'alternance entre théorie et pratique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
Public Cible

Personnes Visées

  • Webmasters
  • Développeurs
  • Intégrateurs
Dates

Dates

  • Du 17 au 19 Juil. 2024
  • Du 20 au 22 Nov. 2024
  • Fin d'Inscription :
    Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.