4.8/5 Trustpilot (1384 avis)
Intégration web et mobile avec Bootstrap 4
Intégration web et mobile avec Bootstrap 4
Dans ce tutoriel en vidéo vous apprendrez a créer un carrousel innovant en adaptant son apparence avec la toute dernière version de Bootstrap 4 sans toucher une seule ligne du script JavaScript du composant.
La démarche de cette formation sera de comprendre comment le composant carrousel fonctionne et ce qu'on peut faire avec, sans aucune connaissance en JavaScript.
Au programme de ce tuto carrousel Bootstrap
Nous aborderons plusieurs points importants listés ci-dessous :
- Flexbox (flex-column, align-items, justify-content, ...)
- les classes h-* et w-* ou encore les spacing
- les nouvelles media queries
- la notion de theming dans Bootstrap 4
- les animations CSS3 avec keyframes
- l'adaptation responsive du rendu sur mobile et tablette
- un QCM de fin pour valider vos nouvelles connaissances !
Ce tutoriel vidéo s'adresse à des personnes d'un niveau intermédiaire en HTML/CSS qui connaissent un minimum le framework Bootstrap. Cependant, il reste accessible à des débutants volontaires. Nous découvrirons plusieurs aspects du framework ensemble, cependant, il est bon de connaitre quelques notions ou de parcourir la documentation avant de vous lancer.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Ce tutoriel n'est pas :
- Une formation complète à Bootstrap 4
- Ne contient pas de suite (rendu dynamique, etc...)
- N'apprend pas a compiler votre SCSS en CSS manuellement (on utilise un compilateur gratuit)
- Fait pour des débutant en HTML/CSS/SASS (même si les plus motivés y arriveront)
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Création du template
Création du template
Chapitre 2
Customisation CSS
Customisation CSS
Chapitre 3
Responsive design
Responsive design
Table des matières
Chapitre 1 : Création du template
35m42
Leçon 1Getting started & Template
Leçon 2Téléchargement des fichiers sources
Leçon 3Découverte du template carousel
Leçon 4Intégration des images de notre carousel
Leçon 5Intégration de la classe Bootstrap h-100
Leçon 6La notion de spacing
Leçon 7La notion de sizing
Leçon 8Mise en forme de la colonne image du carousel
Leçon 9Intégration du carousel-caption
Chapitre 2 : Customisation CSS
54m33
Leçon 1Compiler notre code en CSS
Leçon 2Changer le mouvement de rotation du carousel
Leçon 3Suppression de la navigation et stylisation des carousel-indicators
Leçon 4Création du carousel-caption-block
Leçon 5Animation CSS3 avec Animista et intégration de Google Font
Leçon 6Finaliser la stylisation de carousel-caption-block
Chapitre 3 : Responsive design
23m05
Leçon 1Responsive design & Media Queries Bootstrap 4
Aperçus
Avis des apprenants