Découvrez comment vous pouvez ajouter des effets sur les images, les mettre en forme très rapidement avec le Framework BootStrap 3.
Et bien sûr, réalisez votre propre diaporama très simplement.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer un diaporama avec le Framework BootStrap 3
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours consacré au framework BootStrap 3, vous allez découvrir comment vous pouvez ajouter des effets sur les images, les mettre en forme très rapidement, ou créer des zones, des contenus HTML complexes avec des images et que tous soit aligné parfaitement.
Les images
C’est parti, le framework CSS BootStrap3 facilite énormément la mise en forme des images pour les rendre de façon professionnelles et élégantes et sans connaissance approfondi avec CSS, c’est ça qui est génial, à la fois, ce sera compatible avec la majorité des navigateurs et les smartphones, tablettes et ordinateurs de bureau, et en plus à chaque fois c’est des simples classes CSS à utiliser, par exemple, vous allez voir tout à l’heure dans ce cours comment créer un carousel, enfin, un diaporama de photos, carousel c’est le nom de la méthode appelée avec jQuery.
Il y a trois classes CSS pour les mises en forme sur votre balise image, img-rounded ça va mettre des bords arrondis sur votre image, img-circle ça va afficher votre image dans un cercle, img-thumbnail ça va afficher votre image avec un cadre tout autour. Bien évidemment vous pouvez utiliser le système de grille, le fameux système de grille qui est un des piliers du framework BootStrap, si vous ne savez pas à quoi ça sert, je vous renvoie, il y a deux cours qui traitent de ce système de grilles pour que vous appreniez à l’utiliser, ça va vous permettre de modifier la taille des images en choisissant, bien évidemment, le nombre de colonne sur 12 pour un smarthphone, pour une tablette, et pour un ordinateur de bureau.
Vous avez également les vignettes BootStrap 3 qui vont vous permettre d’ajouter de l’interactivité utilisateur avec les images grâce à la classe thumbnail, par exemple un lien sur une image, etc. ça permet également cette classe thumbnail de créer du contenu HTML complexe comme je vous l’ai dit, avec une image et du texte en paragraphe tout autour pour une mise en forme.
Le diaporama BootStrap 3
BootStrap 3 contient un élément, c’est le diaporama photo par défaut avec un système de défilement automatique des photos, les flèches précédentes, suivantes, et les petits cercles à la Apple, comme sur le site d’Apple, pour choisir directement la photo à afficher. Il suffit d’utiliser les classes carousel, c’est très simple, dans votre balise div, vous allez rajouter les classes carousel slide avec l’attribut data-ride, et ça va vous créer un carousel avec vos images donc c’est hyper rapide.
Les images et le contenu HTML eux utilises la classe CSS carousel–inner, et les flèches de défilement pour leur préciser la classe CSS carousel-control, tout simplement, pour les petits cercles à la Apple, c’est la classe carousel–indicator qu’il faut utiliser.
Le diaporama possède plusieurs options de configurations via des attributs, l’attribut data-interval c’est la vitesse de défilement en millisecondes que vous renseignez, vous avez l’attribut data-pause, ça permet de faire une pause sur le défilement des photos, vous cliquez deux fois, pause, et après ça peut reprendre le défilement des photos.
Et vous avez … par défaut les photos défilent indéfiniment, si vous avez trois photos ça affiche la une, la deux, la trois, ça repend, une, deux, trois, etc.
Vous avez l’attribut data-wrap que vous mettez à false, et ça va faire défiler les photos une seule fois.
Le diaporama BootStrap 3 – API JavaScript
Vous pouvez arrêter le défilement des photos sur un simple clic grâce à l’API JavaScript, il suffit d’appeler l’identifiant de votre diaporama .carousel pause, pour reprendre le défilement .carousel cycle, et avec la fonction carousel, vous pouvez afficher directement la photo que vous voulez, pas forcément la première, elles sont numérotées à partir de zéro jusqu’à votre dernière photo.
Vous mettez dans carousel la valeur de votre photo, si vous mettez deux, ça va afficher la troisième photo, tout simplement. Et vous avez .carousel next pour la photo précédente, suivante pardon next suivante, et prev pour la photo précédente, tout ça, ça s’appelle avec l’API JavaScript c’est du jQuery tout simple, $#identifiant du carousel, la méthode carousel et le mot clé prev, next numéro de l’image cycle pause, voilà.
Exemple d’application
Je vous montre tout ça à travers un exemple. Alors pour l’affichage des images, rien de plus simple, balise IMG avec la classe, les coins arrondis, un cercle, l’image dans un cercle, ou sinon l’image dans un carré, vous avez vu c’est extrêmement simple, le framework BootStrap je l’adore, je l’apprécie énormément, c’est juste des classes CSS à rajouter à des balises HTML existantes et vous pouvez rajouter thumbnail avec une image avec un lien, tout simplement, pour réduire l’image il suffit de préciser ici par exemple, le nombre de colonnes, deux colonnes, tout simplement.
Ça c’est pour la taille de votre image, ici, vous avez une image plus grande, vous utilisez les colonnes pour la taille de votre image, excusez-moi l’image avec le lien elle est ici en fait, bien évidemment a href image avec le lien ici, donc le lien de l’image est ici, que je ne me trompe pas, il suffit d’utiliser la balise a avec une image rounded, si on met une image circle ça fera le lien image dans un cercle tout simplement, c’est aussi simple que ça. Et pour définir la taille d’une image il suffit d’utiliser ce système-là, avec le nombre de colonnes, si je mets 5, vous allez voir que la bannière va s’affichée toute petite, et après vous pouvez créer des éléments beaucoup plus avancés grâce toujours, à thumbnail. Thumbnail, votre image, la classe caption pour informer avec un titre, tout simplement, et derrière le résumé et vous pouvez ajouter un bouton, avec le texte choisir cette formation, pareil ici, avec du texte différent.
Franchement ici, thumbnail, vous définissez le nombre de colonnes, ça vous affiche d’une façon tout à fait correcte votre image, votre mise en forme est faite, ce fait toute seule, sans aucun problème quoi, vous avez la classe thumbnail à utiliser, le nombre de colonnes pour l’affichage sur les Smartphones et tablettes, les ordinateurs de bureau, l’image, le titre, le texte, et derrière vous rajoutez votre bouton, trois fois par ce qu’il y a trois éléments ici, donc en fonction de la taille du périphérique soit elles seront les unes sous les autres mais toujours avec une mise en forme professionnelle, très sympa, ou alors si on est sur une tablette, voilà, les unes à côté des autres.
Après vous avez le fameux diaporama, comment on fait ?
Ça c’est btnPlay, j’ai rajouté un bouton Play et l’identifiant du carousel, l’identifiant du carousel qui est ici, vous ciblez l’identifiant du carousel pour reprendre le diaporama, le mettre en pause, et là si vous voulez avancer sur le clic, si vous cliquez sur le diaporama, ça peut le mettre en pause ou le reprendre, moi j’ai préféré mettre des boutons play. Et vous avez votre diaporama, la classe carousel slide, avec l’attribut data-ride carousel, l’intervalle cliqué une seconde, les photos vont changer, et en over lorsque la souris sera au-dessus du carousel il va y avoir une pause.
Là, toute les seconde l’image change, quand je mets la souris au-dessus, il y a une pause, je ressors, défilement, je fais une pause, ça s’arrête, je reprends, le défilement reprends, tout simplement. Je le remet en pause, et donc là vous avez en fait, ça va déterminer la première image du diaporama, donc c’est celle-là, c’est la première qui est active, item active, vous mettez le lien de l’image, le titre, bouton précédent, bouton suivant, donc le titre et la présentation et vous pouvez même rajouter un bouton donc la présentation et le bouton bien évidemment vous pouvez rajouter, je ne sais pas, une image, une icône du site, ce que vous voulez, là, le titre jQuery Mobile, présentation du framework, le site officiel, vous pouvez très bien rajouter une petite icône et là les icônes, les petits cercles blancs à la Apple pour naviguer sur les différentes images.
Regardez il n’y a pas grand-chose, un peu de JavaScript, le CSS c’est pour personnaliser la taille du diaporama, sa hauteur en pixel, ça c’est moi qui l’ai mis, ce n’est pas indispensable, vous pouvez ne pas l’ajouter, je l’ai mis, ça permettait par rapport aux images que j’ai utilisées de l’adapter, d’adapter le diaporama aux images que j’ai utilisé, vous avez le code, comme ça vous pouvez définir la taille de votre diaporama, et pensez à utiliser les classes carousel slide pour le CSS, les attributs nécessaires pour faire les différentes options du diaporama, là c’est les indicateurs, donc les petits indicateurs, par exemple si je recharge la page, on tombe sur l’image une automatiquement par ce qu’elle est active, je le met en pause parce qu’il défile sinon, et vous avez vos différentes images, l’image, le type du carousel, de l’image, la présentation et le lien bouton avec un lien.
Vous pouvez, bien évidemment rajouter un petit icône sur le bouton, c’est vous qui voyez.
Votre plan d’actions !
Alors vous avez vu grâce au framework BootStrap 3, avec quelques classes CSS à ajouter dans vos balises div, vous pouvez créer un carousel vraiment très simplement, ça peut faire une bannière défilante pour votre blog WordPress par exemple, ou ça peut être une occasion de partager vos photos d’une façon assez sympa, donc vous retrouverez le code source que j’ai utilisé sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours vidéo, et là maintenant je vous invite, il y a une deuxième vidéo, c’est la suite de cette vidéo mais ça permet d’aller beaucoup plus loin, vous allez aller plus loin dans l’apprentissage de BootStrap 3, plus loin dans l’apprentissage de HTML 5, plus loin dans l’apprentissage du CSS 3 avec les nouvelles balises CSS 3, les nouvelles fonctionnalités HTML 5, donc à la fin de cette vidéo il y a un lien qui apparaît, il suffit de cliquer dessus, la vidéo se transforme en lien, vous cliquez dessus et ça vas vous renvoyer automatiquement vers la deuxième vidéo. Je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Télécharger le code source sur la manipulation des images
Voici le code source commenté sur la manipulation des images et la réalisation d’un diaporama avec BootStrap 3.
Téléchargement du code source Exemple de diaporama avec BootStrap 3
