Apprenez dans ce nouveau cours à créer des boutons très simplement avec le Framework Bootstrap 3.
Transformez vos liens en bouton, réalisez très simplement des menus.
Tout est dans la formations ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer des boutons avec le Framework BootStrap 3
Bonjour à tous et bienvenu sur développement facile. Dans ce nouveau cours, vous allez apprendre à créer des boutons avec le Framework BootStrap 3, un framework CSS qui vous simplifie la création d’application Web donc de sites Internet à partir de classes CSS, vous allez voir qu’il est très simple de créer des boutons Web 2.0 très simplement.
Les boutons
Il suffit d’utiliser la classe btn et en complément vous avez la classe btn-default, c’est la classe par défaut que derrière vous avez la possibilité de modifier directement en CSS pour créer des boutons à l’image des couleurs de la charte graphique de votre site internet. Je vous ai mis un exemple de code source, à travers une balise p, vous avez un lien donc balise a, vous utiliser la classe btn et la classe btn-perso si vous créez votre propre classe CSS ou sinon btn-default, et ça va transformer votre lien en bouton, tout simplement. Donc j’ai mis plusieurs type de bouton, vous verrez le résultat visuel juste à la fin de ce cours. Vous avez la possibilité de désactiver très simplement, avec BootStrap 3, un bouton. Il suffit d’utiliser l’attribut disable, tout simplement. Donc je vous ai mis un exemple, vous avez votre classe btn btn-default ça dépend de la classe CSS utilisée et juste à côté disable pour désactiver l’attribut disable, donc vous avez 2 solutions pour désactiver un bouton.
La taille des boutons
Vous pouvez également créer des boutons de tailles différentes, avec la classe btn-lg c’est un bouton de grande taille, btn-sm petit boutonpour small, btn-xs extrasmall un très petit bouton, donc je vous ai mis des exemples de codes source et vous allez voir visuellement le gros bouton, le bouton plutôt moyen et le bouton plus petit, donc en fonction bien évidemment du périphérique vous pouvez choisir la taille des boutons.
Vous pouvez également créer des menus à partir des boutons, comme dans le dernier cours avec les listes, vous avez appris à créer un menu vertical avec les boutons vous pouvez créer un menu horizontal sur le même principe. Donc dans une div, vous mettez les boutons les uns à côté des autres avec un lien ou une action, ça c’est à vous de voir Soit vous faites une action, vous récupérer l’action avec JavaScript avec jQuery ou alors vous utilisez un lien que vous transformer en bouton. Avec la classe btn-group-vertical, au lieu d’avoir un menu horizontal, vous aurez un menu vertical, composé uniquement de bouton. Vous avez vu, il y a 3 lignes de code à chaque fois, une classe CSS à utiliser, l’avantage de BootStrap 3 c’est qu’il fonctionne uniquement avec des classe CSS et les balises HTML 5 que vous connaissez déjà. Donc il n’y a rien de bien sorcier
Exemple d’application
On regarde ensemble un exemple de code source. Je me mets en affichage tablette et vous allez voir la création de bouton, de toute façon vous avez vu des exemples de code source, dans le cours théorique. En pratique un lien href, ça c’est un lien href, en fait c’est un bouton, juste en dessous vous avez un bouton et il n’y a aucune différence d’affichage. Donc btn-default sur un lien, sur un bouton, sur un bouton de type input de formulaire de type submit aussi. Vous pouvez faire des liens désactivés, là le bouton est désactivé en fait. Vous avez deux méthodes comme je vous l’ai dit, en utilisant l’attribut disabled ou en rajoutant la classe CSS disable, ça revient au même. Après c’est vous qui choisissez en fonction de vos préférences. Vous pouvez créer des boutons de tailles différentes, extra small, small, taille normale, large. Dans l’ordre, large, taille normale, small, extra small, c’est tout le temps des boutons, l’avantage c’est que vous pourrez choisir le type de bouton en fonction du périphérique de l’utilisateur et là vous créez des menus donc soit vous mettez une balise a href, soit un bouton que vous associez ici a du JavaScript avec jQuery pour associer différentes actions, donc menu horizontal, menu vertical. Avec les balises communes HTML 5, vous pouvez vraiment utiliser rapidement les fonctionnalités de BootStrap 3, vu qu’il fonctionne uniquement avec des classes CSS.
Votre plan d’actions !
Maintenant, c’est à vous de jouer, à vous d’implémenter les boutons du framework BootStrap 3 dans vos applications Web, sur les périphériques mobile, les smartphones, les tablettes ou sur les ordinateurs de bureau. Vous avez le code source qui est disponible sous ce cours vidéo. Vous pouvez également me poser vos questions sur ce cours, sous ce cours dans la zone commentaire. Et là, je vous invite à consulter la deuxième vidéo. A la fin de la vidéo, il y a un lien qui va paraître, il suffira de cliquer sur ce lien donc la vidéo sera remplacée par un lien, vous cliquez dessus et vous serez redirigé vers la deuxième vidéo. Dans la deuxième vidéo vous allez aller beaucoup plus loin entre le Framework Bootstrap 3, HTML 5, CSS 3, vous allez aller beaucoup plus loin. Je vous dis, à tout de suite dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Télécharger l’exemple d’implémentation des boutons avec BootStrap 3
Et voici le code source pour voir comment réaliser des boutons avec le framework BootStrap 3.
Téléchargement du code source Exemple de boutons avec BootStrap 3
