Vous avez déjà vu comment créer des boutons très simplement avec BootStrap 3 dans un cours précédent.
Ici vous allez découvrir encore plus d’options sur les boutons du Framework BootStrap 3.
Apprenez à faire des menus déroulant, à personnaliser vos boutons et les changer pendant un chargement JavaScript.
Tout est dans le formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer des menus avec les boutons du Framework BootStrap 3
Bonjour à tous et bienvenu sur développement facile.
Donc dans le cours précédent, vous avez découvert le composant bouton et comment l’utiliser avec BootStrap 3 j’ai un peu de mal à le prononcer le nom de ce Framework. Donc là on va aller encore plus loin donc pour découvrir les fonctionnalités avancées pour créer des boutons un peu plus complexes toujours grâce aux Framework BootStrap3
Les menus déroulants
Alors il faut savoir que vous pouvez créer un bouton dans un menu, des boutons grouper avec l’effet toggle, c’est-à-dire vous cliquez sur un bouton ça active, vous cliquez sur un autre ça désactive l’ancien. Un effet toggle, il suffit d’utiliser les classes dropdown-toggle et btn-group, donc vous créez un groupe de bouton et les classes dropdown-toggle, pour faire l’effet de cliques sur une liste de boutons solidaires. Vous pouvez modifier la couleur du fond du bouton en fonction de son importance, je pense que vous les connaissez beaucoup, par cœur maintenant btn-defaut, btn-primary, sucess, info, warning, danger et link, le bouton ressemblera à un lien hypertexte. Sinon tous les autres ça change la couleur de fond bouton, en rouge pour danger, orange warning, c’est comme label- warning, alert-warning, c’est exactement le même principe de fonctionnement, si vous avez vu les cours précédents vous ne serez pas surpris, maintenant vous savez comment utiliser ces classes-là, et les affecter justement aux boutons.
Et vous pouvez aussi comme je vous l’ai dit créer des boutons en accord avec votre charte graphique en modifiant tout simplement la classe CSS btn-default, et là vous pouvez modifier la couleur de fond du bouton, sa taille, enfin tout ce dont vous avez besoin pour accorder le design de votre bouton à la charte graphique de votre site Web.
Les options des boutons
Donc comme je l’ai dit l’attribut data-toogle, ça permet un de commutation sur le bouton notamment sur les Smartphones, iPhone, vous avez on/off, pour afficher on/off c’est un bouton toggle, ça bouge comme ça on/off. Vous pouvez créer cet effet de commutation dans un menu avec un toggle sur un seul bouton, un peu comme les boutons radio finalement. Vous pouvez reprendre le principe de toggle pour les checkbox. En fait BootStrap 3 gère la création de checkbox grâce aux boutons, la création de bouton radio toujours grâce à son composant bouton.
Les boutons de l’API JavaScript
Vous avez aussi l’option loading avec l’attribut data-loading-text dans la balise bouton. C’est à dire lorsqu’une fonction est chargée, le bouton se désactive donc vous pouvez changer le texte du bouton grâce à la valeur data-loading-text. Donc par exemple lors du chargement Ajax vous avez un bouton charger le contenu, vous cliquez dessus, le bouton se désactive et ça va écrire chargement en cours et après afficher votre contenu Akax. Je vous ai mis un exemple de code source sur un bouton. Donc l’idée du bouton qu’on va récupérer avec jQuery, puisque c’est avec jQuery que l’on va modifier le texte, et le désactiver. La classe btn-primary, warning, danger, ce que vous souhaitez et le texte de chargement dans l’attribut data-loading-text , vous mettez le deuxième texte du bouton tout simplement. Une fois l’appel Ajax terminé, la fonction button(‘complete’) affiche le texte du bouton avec l’attribut data-complete-text. Donc vous avez l’attribut data-loading-text pour le chargement en cours et data-complete-text pour le chargement terminé.
Exemple d’application
On regarde ensemble un exemple de code source. Donc là, vous avez vos différents boutons. Alors le clique sur le bouton avec le chargement en cours et on modifie le label du bouton avec complete, l’évènement complete comme je vous l’ai dit, donc ce sera dans une autre fonction, moi je vous ai mis juste l’exemple, vous pouvez le dé commenter. Comment ça fonctionne ? Par exemple je lance l’appelle ça met chargement en cours, sinon je peux inverser, ce n’est pas très logique mais vous allez voir que ça va changer le texte du bouton tout simplement sur le clique « chargement terminé », voilà et on peut toujours cliquer dessus, il n’est pas désactivé. Je remets comme c’était avant, voilà, « chargement en cours ». C’est-à-dire, si vous regardez votre bouton, le texte de chargement et le texte pour chargement terminé. Qu’est-ce qu’on a donc dans ce code source. Donc le bouton, ça c’est de bouton avec des menus déroulant donc très, très, pratique. Vous prenez une liste ou la classe divider pour séparer les éléments vous-même utiliser des icônes, donc vous combinez les icônes avec du texte ou sinon des liens href tout con, tout simple. Vous pouvez bien mettre des boutons si vous le souhaiter ou associés des liens href à jQuery comme vous le souhaiter. Un autre bouton, les options donc ç ‘est un double bouton d’un côté vous avez simple de l’autre le bouton avec toujours une icône, les préférences et la séparation. Une icône, donc là c’est pour le séparateur avec l’icône format, préférences, éteindre, le séparateur donc le bouton qui est séparé avec span. Là, vous avez juste fichier avec la flèche de défilement vers le bas. Et là, le bouton séparer en deux.
Ensuite vous avez tous les type de boutons : sauvegarder, un bouton personnaliser regarder la classe du bouton personnaliser btn-perso, active, hover pour définir les couleurs que l’on souhaite et on l’affecte ici au bouton personnaliser, donc ça fait un bouton personnaliser. Donc les boutons par défaut, regarde ici, success, info, warning, attention, un lien, un bouton sous forme de lien. Les checkbox alors là je le vois pas direct quand c’est des checkbox. Ça, ça doit être les boutons radio, donc on peut en sélectionnés un seul, automatiquement les autres se désactivent, ça peut être trsè pratique pour faire un menu. Comme ça, l’utilisateur c’est direct où il est. Et là les checkbox, boutons checkbox, ils sont ici. Donc là, on peut en sélectionnés plusieurs ou aucune, tout simplement. Donc en regardant le code source toujours ça fonctionne avec ce système de classe btn-group, un groupe de boutons, un menu dopdown-menu, un séparateur dans la liste ici. Ensuite, les différents boutons en fonction de l’importance du message, les boutons personnalisés avec la classe btn-perso que vous je vous ai montré ici. Créer votre bouton personnaliser, vous pouvez même mettre une image de fond, c’est du CSS 3, si vous ne connaissez pas CSS 3, il y a une formation gratuite sur développement facile pour apprendre le CSS 3, du niveau débutant jusqu’au niveau professionnel. Donc je vous invite à aller sur développement facile. Dans le cours CSS 3, vous prenez n’importe lequel en dessous il y a un formulaire vous vous inscrivez à la formation elle est gratuite, et vous recevrez les vours du niveau débutant au niveau professionnel pour CSS 3. Et Ensuite par exemple, on créer un groupe de boutons ici, groupe de boutons et de type radio, donc on peut en sélectionner un seul. Et pour la checkbox, c’est de type checkbox, toujours un groupe de boutons checkbox. Et là le bouton Ajax, que j’appelle le bouton Ajax, chargement en cours et chargement terminé.
Votre plan d’actions !
Maintenant c’est à vous de jouer, à vous d’utiliser toutes les possibilités du Framework BootStrap 3 … j’ai vraiment du mal avec le nom de ce Framework désolé … pour créer des sites compatibles avec la majorité des navigateurs et qui adaptent leur mise en page automatiquement en fonction du périphérique que ce soit les Smartphones, les tablettes ou les ordinateurs de bureau. Comme d’habitude vous retrouverez le code source sous ce cours vidéo. Si vous avez des questions, vous pouvez les poser également sous ce cours vidéo. Et là, je vous invite à consulter la deuxième vidéo. En fait il y a une deuxième vidéo pour aller beaucoup plus loin en HTML 5, CSS 3, avec le framework BootStrap 3, à la fin de cette vidéo, il y a un lien qui va paraître, la vidéo va se transformer en lien cliquable. Cliquez sur ce lien et vous serez redirigés vers la deuxième vidéo. Donc je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle][/ppmaccordion]
Télécharger les exemples d’utilisation de boutons
Voici le code source commenté sur l’utilisation des boutons avec BootStrap 3, vu dans le cours.
Téléchargement du code source Exemple d'utilisation des boutons de BootStrap 3
