Dans ce tuto vidéo nous allons apprendre à réaliser un carousel en plein écran avec le framework Bootstrap 3. Ce tutoriel s'adresse à des personnes d'un niveau intermédiaire en HTML5/CSS3 et avec des notions sur Bootstrap. Si ce n'est pas le cas je vous invite à consulter les tutoriaux ci-dessous :
- Créer un site internet responsive webdesign (apprendre le HTML5)
- Débuter avec Bootstrap (apprendre le fonctionnement du framework)
- Les nouveautés Bootstrap 3 (se mettre à jour sur la version du framework)
Au programme de ce tuto carousel Boostrap plein écran :
Dans ce cours, nous aborderons différents points clés dans cette formation que je vous invite à découvrir :
- Adapter un carousel Bootstrap.
- Intégrer une vidéo Youtube de manière responsive.
- Savoir gérer des propriété CSS3 telles que "cover" ou "box-shadow".
- Comprendre la disposition premier plan et arrière plan avec "z-index".
- Adapter la grille Bootstrap en fonction de l'écran final.
Les fichiers sources sont fournis avec le tutoriel.
Table des matières de cette formation Bootstrap, CSS, HTML, Dreamweaver (durée : 1h39s)
-
Installation
- Introduction 00:01:06
- Téléchargement 00:02:19
- Doctype 00:01:59
- CSS 00:03:53
-
Slider
- Slider 00:07:23
- Caption 00:12:50
- Vidéo 00:05:14
- Bouton 00:04:32
-
Style CSS
- Images 00:06:57
- Caption 00:05:20
- Bouton 00:04:47
- Ajustements 00:04:19
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Benoît Philibert
-
Clair et précis Bonne maîtrise du sujet
-
Très bon tuto, bien expliqué avec un bon débit de paroles... Je suis débutant et j'ai jamais été perdu. Un grand merci et bonne continuation pour la suite de tes cours.
-
J'ai un soucis l'intégration de la class img1 définie dans mon style.css comme vous le décrivez l'image (../img/watchdogs.jpg) de fond ne s'affiche pas. je n'en comprends pas la raison. merci de votre réponse.
-
Avec quelles versions de logiciels ce tuto est-il compatible ?Bootstrap 3, HTML 5, Dreamweaver CS6, Dreamweaver CS5, Dreamweaver CC
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
-
Que contient le fichier source ?
Les fichiers sources contiennent tout ce qu'il vous faut pour suivre ce tutoriel.
-
Je voudrais savoir si la transition se fait uniquement de gauche a droite, est-il possible d'en avoir une en fondu ?De base la formation applique le mouvement d'origine du slider de bootstrap. Il est possible de changer l'animation en fadein / fadeout comme tu le souhaites mais je ne l'explique pas dans le tuto et les tuto que j'ai vu à propos de la technique sont en LESS CSS et non en CSS simple.
note moyenne
avis laissés