Dans la conférence précédente, nous avons vu plusieurs façons de révéler du contenu aux utilisateurs.
Donc, ce serait une superposition au-dessus de
votre page Web pour afficher les informations aux utilisateurs.
Nous allons donc examiner deux de ces approches,
Info-bulles et Modals dans cet exercice.
Tout d'abord, nous allons ajouter une info-bulle à cette page.
Donc, aller à index.html et dans le Jumbotron,
nous voyons ce bouton dans le Jumbotron là-bas.
À ce bouton, je vais ajouter une info-bulle.
Donc, en entrant dans ce bouton,
ce que je vais faire maintenant est simplement d'aller dans la ligne suivante
afin qu'il soit un peu plus clair d'écrire le code là-bas et dans ce bouton,
je vais introduire l'info-bulle ici.
Donc, après l'avertissement de bouton, je dirais,
data-toggle-tooltip, de sorte que vous pouvez voir que
le composant javascript entrant en utilisation ici et ensuite data-html-true.
Donc, si nous appliquons cet attribut HTML de données et l'envoyons à true,
cela signifie que le contenu de l'infobulle peut être stylé en utilisant
HTML, puis ils diront la ligne suivante,
je donnerai l'attribut de titre.
Donc, c'est là que le contenu de l'info-bulle sera enfermé.
Donc nous dirons « ou appelez-nous à ».
Donc, vous pouvez voir que j'utilise HTML pour
formater le contenu de l'infobulle là.
Donc, avec cela, l'info-bulle est introduite dans le bouton là-bas et aussi le dernier attribut
que je vais donner est le placement de données que je vais donner en bas ici.
Donc, ce qui signifie que cette info-bulle sera affiché en bas de ce bouton ici.
Après avoir ajouté ceci dans le bouton,
nous allons maintenant ajouter du
code JavaScript au bas de cette page afin d'activer cette info-bulle. En
allant au bas de la page,
permettez-moi d'y introduire le script en ajoutant les balises pour le script.
A l'intérieur de cela, nous allons définir le code JavaScript réel ici.
Donc, nous allons dire des documents en dollars.
Donc, ce script est en utilisant la syntaxe jQuery ici.
Donc, cela spécifie quand le document est prêt,
lorsque ce document HTML particulier est prêt
pour le rendu et définir appeler cette fonction particulière ici.
Donc, nous fournissons la fonction JavaScript à
invoquer à ce stade donc nous allons spécifier notre fonction, puis nous dirons
entre parenthèses data-toggle-tooltip et tooltip.
Donc, c'est le code que nous allons introduire dans cette page ici.
Ceci est dans la syntaxe jQuery et nous allons couvrir jQuery un peu plus dans le module suivant.
Pour le moment, cela spécifie que partout où il existe un attribut de
ce type pour cette balise HTML particulière,
activez l'info-bulle.
Donc, mais cette modification va enregistrer les modifications,
puis aller jeter un oeil à l'apparence de l'info-bulle sur la page Web.
Aller à la page Web,
maintenant, lorsque nous maintenons notre pointeur de souris sur le modèle ici,
vous pouvez voir que l'info-bulle est affiché en bas ici.
Donc, vous pouvez remarquer que le contenu de cette info-bulle est
exactement ce que nous avons donné comme attribut title pour ce bas là.
C' est ainsi que nous pouvons ajouter des info-bulles à notre page.
Les info-bulles sont un bon moyen de fournir des informations supplémentaires à
l'utilisateur lorsque l'utilisateur navigue à différents emplacements sur la page.
Poursuivant l'exercice, dans la prochaine étape,
nous allons créer un modal dans notre page Web.
Ce modal hébergera le formulaire de connexion et sera affiché en utilisant un lien dans leur barre de navigation.
Donc, pour commencer,
bootstrap conseille que tout le code lié au modal soit placé en haut de votre page.
Donc, je vais entrer et écrire ci-dessous la barre de navigation ici,
je vais placer dans le code pour le modal là-bas.
Donc, pour créer un modal,
je commencerai par dire div ID login modal.
Donc, nous donnons un ID à ce modal afin qu'il puisse être déclenché à partir
du lien de la barre de navigation, puis classe comme « fade modal ».
Donc, vous voyez que la classe est modale et fondu signifie
que lorsque le modal est amené à l'écran,
il va disparaître sur l'écran et le rôle est comme une boîte de dialogue.
Donc, ce qui signifie qu'il est affiché en haut de la page.
Fermons la div de la partie.
Donc, à l'intérieur, nous allons créer le modal.
Donc, là, je vais créer la deuxième div avec la classe en tant que dialogue modal-et puis
à l'intérieur ici nous allons définir
le contenu du modal réel ici et fermer la div.
Et donc, ce sera le contenu modal sera structuré ici.
Donc, à l'intérieur de ce dialogue modal, nous allons créer un autre div avec
le contenu modal de classe et
fermer le div et un modal typique contiendra un en-tête modal-.
Donc, c'est là que la prochaine div va accueillir.
Et puis un corps modal
qui contiendra une grande partie du contenu lié au modal.
Toutes ces sections du modal sont facultatives,
mais au moins vous devriez avoir une telle section dans votre modal
sinon cela n'a aucun sens de créer le modal là.
Donc, avec cela, la structure du modal est maintenant prête.
Donc, nous allons entrer et remplir le contenu dans ce modal.
Donc maintenant, nous devons définir ce qui va dans le modal.
Maintenant, dans l'en-tête, nous allons mettre un bouton,
un bouton croisé dans le modal qui, lorsqu'il est cliqué, rejettera le modal.
C' est la façon habituelle de concevoir les modaux.
Et le corps modal contiendra lui-même la forme.
Maintenant, un modal peut contenir tout ce que vous voulez, donc, par exemple,
si vous cliquez sur une image dans
une galerie d'images et que vous voulez afficher la plus grande taille de l'image,
même là, vous pouvez utiliser un modal pour afficher les informations.
Maintenant, dans cet exercice,
nous allons utiliser le modal pour héberger un formulaire qui est affiché pour l'utilisateur.
Ok, maintenant, dans l'en-tête modal,
nous allons introduire un bouton avec
le bouton type et la classe fermer.
Donc, vous voyez que c'est un bouton qui est utilisé pour fermer le modal, puis vous direz,
data-dismiss, puis modal.
Donc, ce que cela signifie est que ce bouton particulier
lorsqu'il est cliqué va rejeter le modal de l'écran.
Et ce bouton, je vais utiliser les temps,
s'affichera comme une croix dans les modales ici.
Donc je dirais fois ici.
Avant ce bouton, nous allons introduire
un en-tête que nous allons afficher dans l'en-tête du modal donc je
vais commencer par un h4 avec le titre modal de la classe.
Et puis à l'intérieur de ce h4,
j'inclurai le titre du modal,
qui est login car cela va montrer le formulaire de connexion.
Maintenant que nous avons mis quelques détails dans ce modal,
ajoutons le lien dans notre barre de navigation qui va
déclencher ce modal et ensuite nous allons voir
comment le modal ressemble à l'écran.
Aller à la barre de navigation,
juste après l'UL ici,
je vais inclure dans
un lien qui peut être utilisé pour déclencher l'affichage et la masquage du modal.
Donc, pour ce faire, j'irai et utiliserai une travée avec le texte de la barre de navigation de classe.
C' est ce qui me permet d'inclure un lien dans la barre de navigation et de le montrer sous forme de texte.
Donc, à l'intérieur de la plage,
j'utiliserai un A avec le bascule de données, de
sorte que vous pouvez voir le bascule de données JavaScript arriver et
le bascule de données est pour une cible modale, puis de données.
Vous vous souvenez que nous avions donné l'ID en tant que mode de connexion à notre-
Modal que nous avons inclus.
Donc, je vais l'utiliser comme cible de données avec le hachage devant cela.
Et à l'intérieur, je vais entrer et utiliser
une icône de police génial pour une connexion.
Donc, c'est une police génial « fa- login »
icône et dire login et fermez l'e-tech.
Donc, avec cela, sauvegardons les modifications et jetons un oeil à la page Web.
Aller à notre page Web dans le navigateur,
vous voyez maintenant que sur le bord droit,
vous voyez cette connexion avec cette icône créée là.
Donc, c'est le lien qui va déclencher l'affichage du modal.
Donc, si je clique sur ce lien,
alors le modal s'affichera à l'écran.
Donc, notez que lorsque nous avons créé ce modal, nous avons dit,
en-tête qui contenait la connexion, puis aussi ce bouton et puis le corps
, actuellement vide, nous allons introduire plus de code là-dedans.
Maintenant, si vous cliquez sur ce bouton, le modal disparaîtra.
Cliquez sur cela à nouveau, le modal est affiché.
Même si vous cliquez en dehors du modal, le modal disparaîtra.
C' est donc le comportement du modal que nous sommes venus à attendre.
Maintenant, dans la prochaine étape, je vais entrer et présenter le formulaire ici.
Je ne vais pas expliquer les détails du formulaire parce que vous avez
déjà étudié les formes dans l'une des leçons précédentes.
Donc, je vais simplement entrer et coller le code du formulaire et
ensuite nous allons jeter un oeil au formulaire dans le modal ici.
En revenant au code,
vous pouvez maintenant voir que dans le corps modal,
j'ai rempli un formulaire.
Et puis j'ai deux groupes de formulaires ici avec une entrée avec le type email
et mot de passe de type d'entrée et puis j'ai une case à cocher ici que j'ai.
Donc, cela devrait être facile pour vous de déchiffrer ce que ce formulaire est une structure de code Ees, à
partir de votre compréhension de la façon dont les formulaires Bootstrap sont conçus.
J' ai mis deux boutons.
L' un est un bouton de soumission et l'autre est un bouton d'annulation.
Le bouton Annuler a le premier.
Le bouton Annuler ici a le modèle de rejet de données.
Donc, ce qui signifie que lorsque vous cliquez sur le bouton d'annulation, le modèle sera rejeté.
Et l'autre est un bouton de soumission qui est utilisé pour soumettre le formulaire.
Donc, avec ces modifications,
sauvegardons les modifications, puis allons jeter un oeil à notre page Web.
Pour revenir à la page Web,
maintenant vous cliquez sur la connexion puis vous verrez un formulaire pour un utilisateur de se connecter.
Donc vous verrez que vous avez deux boîtes ici.
Entrer les cases ici pour entrer l'e-mail et le mot de passe,
puis une case à cocher pour dire Se souvenir de moi.
Et puis vous avez une connexion et une annulation.
Donc, si vous cliquez sur Annuler le modal disparaîtra.
Tout comme quand vous cliquez sur la croix là-bas.
Et puis, si vous remplissez ces informations et continuez à cliquer sur
la connexion, le processus de connexion devrait être lancé.
En ce moment, nous n'avons pas de serveur pour que cela fonctionne,
mais je vous montre simplement dans Bootstrap comment vous créeriez un formulaire comme celui-ci.
Je suis sûr que vous avez vu des choses comme celles-ci sur de
nombreux sites Web où lorsque vous cliquez sur un bouton de connexion
quelque chose comme ça avec le formulaire apparaît à l'écran
et attend de vous de taper les informations.
Vous allez maintenant voir comment vous pouvez tirer parti des modèles pour afficher des
informations superposées à votre page Web.
Avec cela, nous complétons cet exercice.
Dans cet exercice, nous avons vu l'utilisation d'
info-bulles et nous avons vu l'utilisation de modèles pour afficher du contenu.
C' est un bon moment pour vous de faire un git-commint avec les conseils et modèles d'outils de message.