[MUSIC]
Essayons maintenant de comprendre plusieurs mécanismes pour nous permettre
d'afficher des informations aux utilisateurs superposant le contenu de votre page web.
Donc, ici, nous allons examiner trois constructions différentes qui sont disponibles dans Bootstrap
appelées info-bulles, popovers et modaux.
Alors, que sont les info-bulles, les popovers et les modaux et comment sont-ils utiles ?
Nous allons d'abord examiner quelques idées de base, puis nous allons regarder quelques exemples.
Dans l'exercice qui suit, nous utiliserons des info-bulles et
des modaux dans notre page Web, et nous examinerons un exemple de popovers.
Ainsi, comme je l'ai mentionné, les info-bulles, les popovers et les modaux sont un moyen de révéler
du contenu aux utilisateurs, lorsque l'utilisateur interagit avec certains éléments de votre page Web.
Par exemple, lorsque la souris de l'utilisateur
clique sur un bouton, survole un bouton, clique sur un lien
ou atteint un certain point sur votre page Web.
Donc, tous ces éléments déclencheront des informations à afficher pour les utilisateurs.
Donc, dans ce cas,
les informations sont affichées sous la forme d'une superposition au-dessus de votre page Web.
Donc, le contenu sous-jacent de la page Web est toujours là, mais
cela est mis en place au-dessus du contenu sous-jacent.
Donc, en termes de flexibilité, les info-bulles sont les plus simples à mettre en œuvre, mais
ont en même temps une flexibilité limitée dans la façon dont elles peuvent afficher les informations. Les
popovers sont plus flexibles que les info-bulles, mais ils ont aussi leurs propres limites.
Les modaux vous offrent la prise en charge la plus complète pour
l'affichage du contenu de différentes manières.
À titre d'exemple, allons à notre page Web sur laquelle nous avons travaillé.
Vous voyez cela lorsque nous passons le pointeur de la souris sur ce bouton.
Vous voyez ce message apparaître à l'écran ici,
avec quelques informations supplémentaires.
Ceci est un exemple d'infobulle.
Cela vous permet d'afficher des quantités plus petites d'informations pour les utilisateurs.
Donc, par exemple, si vous essayez de guider les utilisateurs à travers votre site Web et
que vous voulez qu'ils sachent ce qui se passe lorsque vous cliquez sur différents emplacements n'importe quelle page Web,
ceux-ci peuvent être une bonne façon de leur rappeler ce qui est attendu.
Ainsi, vous pouvez facilement concevoir, par exemple, des
pas à pas de votre site Web à l'aide de ces info-bulles pour indiquer aux utilisateurs.
Si vous voulez des informations un peu plus détaillées,
alors popovers serait plus utile.
Le même exemple, implémenter et utiliser un popover ressemblerait à ceci.
Maintenant, dans ce cas,
vous devrez cliquer explicitement sur le bouton pour afficher le popover.
Donc, dans ce cas, le popover est affiché avec des informations de titre,
puis le contenu réel en bas de ce popover.
Maintenant, rejeter le popover vous demandera de nouveau de cliquer sur le bas là.
C' est donc le comportement d'un popover.
Dans certaines circonstances, les popovers sont plus utiles que les infobulles.
Notre troisième type de superposition de données est le modal.
Un modal vous permet de présenter
des informations plus détaillées aux utilisateurs qu'une info-bulle et une popover.
Le contenu du modal est lui-même divisé en un en-tête, un corps et le pied de page.
Et le modal lui-même peut contenir beaucoup plus d'informations détaillées.
Et vous pouvez utiliser toute la grille Bootstrap,
à l'intérieur du corps modal, pour organiser le contenu réel.
Nous examinons ensuite quelques exemples de l'utilisation des modaux.
Aller à notre page web, vous verrez que sur le côté droit,
ici nous avons un lien ici appelé Login.
Donc, lorsque vous cliquez sur ce lien, vous remarquerez que ce modal
avec leur formulaire de connexion est affiché à l'écran.
C' est donc le comportement typique d'un modal.
Ici, vous pouvez taper les informations,
puis cliquer sur le bouton Se connecter pour vous connecter à votre site Web.
Aller à votre page Coursera, voici un exemple réel de l'utilisation d'un modal.
Par exemple, si vous cliquez sur le bouton Se connecter ici,
vous pouvez voir que sur Coursera, un formulaire apparaît à l'écran.
C' est donc une autre utilisation d'un modal dans votre page Web.
Maintenant que vous avez vu des exemples d'info-bulles, de popovers et de modaux,
passons à l'exercice suivant, où nous allons créer une info-bulle sur notre page index.html.
Nous allons également créer un modal qui permet à l'utilisateur de saisir des informations pour
se connecter à notre page Web.
[ MUSIQUE]