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)
Table des matières de cette formation Bootstrap, CSS (durée : 1h53m)
-
Création du template
- Getting started & Template 00:02:10
- Téléchargement des fichiers sources 00:02:03
- Découverte du template carousel 00:04:28
- Intégration des images de notre carousel 00:03:47
- Intégration de la classe Bootstrap h-100 00:05:57
- La notion de spacing 00:03:02
- La notion de sizing 00:02:20
- Mise en forme de la colonne image du carousel 00:06:24
- Intégration du carousel-caption 00:05:31
-
Customisation CSS
- Compiler notre code en CSS 00:09:28
- Changer le mouvement de rotation du carousel 00:05:00
- Suppression de la navigation et stylisation des carousel-indicators 00:14:38
- Création du carousel-caption-block 00:08:02
- Animation CSS3 avec Animista et intégration de Google Font 00:05:26
- Finaliser la stylisation de carousel-caption-block 00:11:59
-
Responsive design
- Responsive design & Media Queries Bootstrap 4 00:23:05
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Benoît Philibert
-
Excellent tuto très bien expliqué qui m'a permis de comprendre beaucoup de choses sur bootstrap.
-
I'm very happy......
-
Avec quelle version de logiciel ce tuto est-il compatible ?Bootstrap 4
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissés