Aller au contenu

La technique pour afficher des messages d’alertes avec le Framework BootStrap 3

Apprenez à mettre en valeur simplement et rapidement vos messages informatifs avec BootStrap 3.

Choisissez et attribuez différentes catégories d’alertes à vos messages informatifs.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La technique pour afficher des messages d’alertes avec le Framework BootStrap 3

Bonjour et bienvenu sur développement facile. Dans ce nouveau cours il faut savoir que BootStrap 3 contient plusieurs options, ou possibilités, pour afficher des informations à vos internautes c’est à dire pour mettre des informations en valeur, des messages en valeur. Par exemple des catégories de différentes couleurs, des messages informations et c’est ce que vous allez apprendre à créer directement dans cette vidéo

Afficher des messages informatifs

Il suffit à chaque fois dans votre balise div, dans votre balise paragraphe, d’utiliser certaines classe CSS pour mettre le message HTML en valeur. Donc vous avez différentes classes CSS disponibles. Je vous ai listé ces classe CSS :

text-muted c’est une couleur légèrement grise,

text-primary c’est une couleur bleue pale c’est un message informatif à l’utilisateur,

text-success c’est en vert donc le vert c’est par exemple opération réussi avec succès vous pouvez afficher ce message en vert, avec la classe text-success

text-info couleur bleue pour informer l’utilisateur

text-warning couleur orange pour dire à l’utilisateur fais attention, prêtes attention à ceci ou à cela et

text-danger là c’est couleur rouge attention erreur le texte que vous avez saisi est une erreur mauvais mot de passe ça met le texte en valeur

Donc pour l’utiliser je vous ai mis des exemples d’utilisation juste en dessous balise paragraphe la classe CSS et automatiquement ça donne la bonne couleur à votre texte, vous avez vu, c’est ultra simple d’utiliser le framework BootStrap 3 et bien évidemment compatible smartphone, tablette, ordinateur de bureau … un jeu d’enfant.

Afficher des zones d’alertes

Donc bien évidemment vous pouvez afficher des zones d’alerte. Des messages mis en valeur avec plusieurs couleurs donc plusieurs classe CSS. Dans une balise p, vous mettez la classe CSS alert avec sa valeur

alert-success couleur verte c’est message de succès félicitations votre sécurité en compte par exemple

alert-info de couleur bleue pour informer l’utilisateur ça met du texte en valeur, ça l’informe, ça l’invite à lire le texte

alert-warning c’est une couleur orange pour dire à l’utilisateur, faites attention, prêtez attention à ceci, à cela il y a peut-être un truc que vous voudrez vous en occuper et

alert-danger, là c’est attention en rouge, vous avez fait une erreur y’a quelque chose qui se passe vérifiez tout de suite.

Je vous ai mis un exemple de code source donc balise p tout simplement avec la classe alert et sa valeur alert-danger ou alert-warning  je vais vous montrer un exemple de code à la fin de ce cours.

Afficher des zones d’alertes « complexes »

Vous pouvez aussi ajouter des zones de code html javascript pour afficher des alertes beaucoup plus évoluées ou l’utilisateur il aura un bouton pour fermer l’alerte par exemple vous affichez un message d’alerte rouge attention à ceci, cela, il l’a lu, il l’a pris en compte clique sur le bouton fermer l’alerte disparait c’est aussi simple que ça

Minis Bulles d’informations

Vous pouvez aussi, comme sur un site web de type gmail donc le nombre de message non lus, il est généralement mis en valeur dans … sur un fond avec le nombre de messages non lus dans une mini bulle. BootStrap 3 vous propose la classe badge pour créer cet effet très simplement. C’est à dire  vous pouvez le faire sur un lien, sur une balise paragraphe, donc mettre sur un lien message  non lu donc le lien ça va renvoyer évidemment sur les messages non lu.

span class badge 13 donc ça va vous faire une mini bulle avec le chiffre 13 et en plus ce sera un lien cliquable qui va vous renvoyer vers les derniers messages non lus. Donc que c’est une mini bulle qui apparaît avec un texte blanc sur un fond gris très discret et mis en valeur quand même.

Les labels

Ensuite comme je vous l’ai dit dans un article dans un blog les articles sont classés en différentes catégories par exemple sur développement facile c’est classé en catégorie PHP, CSS 3, javascript, html cinq et vous pouvez mettre en valeur ces catégories automatiquement grâce à BootStrap 3. Il suffit d’utiliser la classe CSS label et sa valeur label-default. Donc vous mettez par exemple un div avec la classe CSS label et après la valeur label-default couleur légèrement grisé. label-primary couleur bleue pâle label – succès c’est couleur bleu vert enfin vert pardon. Vous avez remarqué c’est toujours les mêmes mots-clés default primary success info en bleu, warning orange, danger en rouge pour les labels pour les alert donc c’est très, très, simple à retenir le fonctionnement de BootStrap, label-success, alert-success vous avez la même couleur mais vous affichez l’informations différemment. Très, très simple à retenir

Donc je vous ai mis des exemples, pareil dans une balise span, avec un lien cliquable, donc c’est des catégories, en principe on peut cliquer dessus et ça renvoi vers tous les articles de la catégorie. Très, très simple à utiliser également.

Exemple d’application

Je vous montre un exemple de code source vous aurez le résultat visuel ce sera très parlant pour vous. Vous avez le résultat visuel juste en dessous avec comme je vous l’ai dit c’est relié à jQuery donc vous pouvez utiliser les fonctions de jQuery pour masquer le message. Je vous montre close, on recherche l’id close, id close dès qu’on clique dessus donc btn-primary, je pourrais mettre btn – warning si je veux, warning et il va changer de couleur, hop, tout simplement. C’est aussi simple que ça et donc quand on clique on affiche la boite de dialogue alert, donc il y a un id alert, message masquable, alert, close, on lui dit de se fermer donc si j’appuie ici elle va se fermer. Vous avez également le même principe avec la croix, bouton close pour lui dire de masquer l’alerte, donc si je clique sur la croix ça va masquer l’alerte donc l’alerte c’est une div class alert avec les options donc c’est une div de success on pourrait mettre primary par exemple alert primary, ça change la couleur évidemment par terrible, parcequ’on ne voit pas, on remet une alert de danger alors avec un fond de danger, ça va apparaître en rouge attention ou de success je préfère de success l’alerte de success avec le message d’information donc primary. Donc c’est très très simple pour changer le code couleur et là elle est masquée, donc vous créez la croix pour masquer le message votre message donc là vous mettez ce que vous voulez, là vous pouvez mettre des lien, la ça renvoi sur développement facile c’est aussi simple que cela là vous avez les les messages d’information en fonction de la criticité, success, alert prêter attention danger pareille pour les catégories ici les catégories avec des liens tout simplement le type de message non lu comme google dans une mini bulle messages non lus 13 cliquable avec un lien ici pardon messages non lus avec un lien donc la classe badge, là c’es label, là c’est alert, là c’est text, muted, primary. Donc c’est toujours les mêmes couleurs donc c’est très très simple à retenir si vous faites primary vous voyez qu’il est mis en valeur la ici warning il est mis en valeur là, là, là, donc très, très simple à utiliser rapidement. Donc si on réduit l’affichage bien évidemment ça s’adapte en fonction du périphérique le texte est toujours centré

Votre plan d’actions !

Maintenant c’est à vous de jouer, réutilisez le code source de ce cours pour commencer à appréhender le framework BootStrap. Créez des zones de texte pour valeur en fonction de la criticité du message. Vous pouvez poser vos questions sous ce cours vidéo. Sous ce cours vidéo également le code source complèt qui a été utilisé. Et maintenant je vous invite à voir la deuxième vidéo, c’est à dire à la fin de cette vidéo il y a un lien qui va apparaitre, un lien cliquable, il suffira de cliquer dessus et vous serez redirigés dans la deuxième vidéo, et dans la deuxième vidéo vous allez aller beaucoup plus loin avec HTML 5, CSS 3, BootStrap 3. Donc je vous invite à regarder la deuxième vidéo donc à cliquer sur le lien à la fin de cette vidéo et moi je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple de message d’alerte

Retrouvez le code source commenté pour revoir les différentes applications des messages informatifs vus dans ce cours.

Téléchargement du code source Exemple de messages informatifs avec BootStrap 3

Cliquez ici pour télécharger le code source Exemple de messages informatifs avec BootStrap 3

Partagez le code de vos messages d’alertes avec BootStrap 3

Utilisez les commentaires pour partager vos réalisations de messages informatifs avec BootStrap 3

 

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>