Salut, les boutons de bootstrap logo

Nouvel article aujourd’hui concernant une autre option qui s’offre à nous, les boutons de Bootstrap. En effet comme pour toutes les autres possibilités qu’offre ce framework, il suffira d’ajouter des classes spécifiques pour réaliser la mise en formes des boutons.

Cet article va être assez court aujourd’hui, pour trois raisons:

  • celui de mardi était vraiment long,
  • c’est assez simple de faire des boutons dans Bootstrap,
  • J’ai pas trop de temps, je vais à Roland Garros demain! Ok rien à voir mais j’y suis jamais allé, alors oui je me la pête un peu avec ça…

Bref, allons y pour le dernier article de la semaine…

Les types de boutons

Il existe 4 types de boutons:

  • les liens,
  • les boutons,
  • les inputs,
  • les dropdown.

Je ne parlerai pas pour le moment des dropdowns, car je ne sais pas encore comment ça marche. J’en ai fait un lors d’un bricolage mais il ne fonctionnait pas, sûrement parce que je ne connais pas encore jQuery et Javascript, ce qui ne devrait plus tarder d’ailleurs… Je te mets un exemple de Dropdown dans le projet Codepen, mais tu verras que ça ne marche pas… pour le moment…

 

Pour définir les éléments cités plus haut en tant que bouton, il va falloir leur donner la classe CSS: btn. C’est pas la plus compliquée à retenir… Voilà donc à quoi ressemble le code dans un premier temps:

	<a href="#" class="btn" role="button">Un lien</a>

	<button class="btn" type="submit">Bouton</button>

	<input type="button" class="btn" value="Input"/>

Comme d’habitude, tu peux voir quelles têtes ont ces boutons à ce stade sur Codepen.

Les styles de boutons

Bootstrap offre la possibilité de faire passer des messages à l’utilisateur directement avec des couleurs de boutons particulières. Par exemple un bouton rouge signifiera une erreur ou une suppression de document, un bouton vert une validation, etc.

Pour faire cela, pas besoin de saisir de code CSS, Bootstrap propose des classes qui font ça pour nous! Il existe 7 types différents.

Il faudra ajouter les classes qui vont suivre, à la classe btn que nous avons déjà saisie:

  • btn-default: bouton de couleur grise,
  • btn-primary: bouton de couleur bleue,
  • btn-success: bouton de couleur verte,
  • btn-info: bouton de couleur bleu ciel, couleur de Twitter…,
  • btn-warning: bouton de couleur orange,
  • btn-danger: bouton de couleur rouge,
  • btn-link: bouton ayant la forme d’un lien.
			<button class="btn btn-default" type="submit">Default</button>
			<button class="btn btn-primary" type="submit">Primary</button>
			<button class="btn btn-success" type="submit">Success</button>
			<button class="btn btn-info" type="submit">Info</button>
			<button class="btn btn-warning" type="submit">Warning</button>
			<button class="btn btn-danger" type="submit">Danger</button>
			<button class="btn btn-link" type="submit">Link</button>

Tu remarqueras qu’au survol les boutons se ternissent légèrement, il est très simple de réaliser cet effet, mais pas besoin de le coder, Bootstrap est là! Je ferais d’ailleurs un article sur cet effet CSS un peu plus tard…

Il n’y a aucune obligation à utiliser ces boutons pour les messages qu’ils sont censés faire passer. Si une couleur colle au design et à la charte graphique de ton site, je ne vois pas pourquoi tu devrais t’en priver!

 

Les tailles de boutons

Bootstrap permets de modifier la taille des boutons en ajoutant encore une fois simplement des classes CSS. Il existe 3 tailles différentes, et tu vas voir que ça devrait te rappeler des souvenirs si tu as suivi mes articles concernant la grille de Bootstrap:

  • btn-xs: bouton de très petite taille (eXtra-Small);
  • btn-sm: bouton de petite taille (SMall);
  • btn-lg: bouton de grande taille (LarGe);

La classe md (medium) n’est  pas proposée puisqu’il s’agit de la taille par défaut. Si tu ne précises pas de taille particulière, ton bouton aura une taille medium. Ci dessous, le code montre les classes à ajouter pour obtenir par exemple des boutons de couleurs primary, de plusieurs tailles:

			<button class="btn btn-primary btn-xs" type="submit">Primary XS</button>

			<button class="btn btn-primary btn-sm" type="submit">Primary SM</button>

			<button class="btn btn-primary btn-lg" type="submit">Primary LG</button>

Pour le rendu, c’est direction Codepen!

Pour finir sur les tailles, Bootstrap propose une classe qui permet à ton bouton de s’étirer sur la largeur du conteneur, il s’agit de la classe btn-block. Je te passe le code dans l’article, en revanche tu peux voir à quoi ça ressemble dans Codepen. Cette classe est surtout très pratique pour les écrans mobiles. Un grand bouton pour des gros doigts c’est très pratique! A toi ensuite de voir comment tu peux intégrer cela pour que le même bouton sur un écran de PC ne fasse pas forcément toute la largeur… surtout si tu as un écran 27″, ça ferait un peu bizarre… Pense aux options que t’offre la grille Bootstrap. Tiens je ne viendrais pas de te donner une idée de micro projet là? Si tu as besoin d’un rappel, regarde mon article concernant l’utilisation de la grille Bootstrap!

Lier un bouton

Alors cette partie à l’air assez débile dans son titre mais pour moi un bouton c’est un appel à l’action. C’est à dire on clique dessus et il se passe un truc. Par exemple, on change de page, on se déplace vers une ancre dans la même page, etc. Tu remarqueras aussi qu’il n’y a pas d’attribut href dans un bouton, donc je me suis demandé à quoi ça sert de faire des boutons de couleurs s’ils ne servent à rien?

J’ai donc bricoler un bout de solution qui m’a permis d’utiliser les boutons, plutôt que de les mettre pour faire beau…ou pas d’ailleurs. Je les intègre donc dans une balise « <a> » qui sert à faire des liens. J’ai fait un exemple  de ce point en fin de projet Codepen. J’avais besoin de texte pour voir si les ancres marchaient, donc pour éviter de mettre un énorme bloc de texte en plein milieu du projet, je l’ai mis à la fin.

Les boutons dans tous leurs états

Il est possible d’indiquer un bouton actif ou de le rendre inactif donc non cliquable.

Un bouton actif indiquera à l’utilisateur dans quelle section ou dans quelle page il se trouve. Pour cela il faut ajouter la classe CSS active, et le lien aura l’air cliqué.

Un bouton inactif sera visuellement différents des autres (légèrement grisé) et au survol de la souris, un symbole indique qu’on ne peut pas cliquer. Pour rendre un bouton inactif, il faut lui appliquer la classe CSS disabled.

        <button class="btn btn-default active" type="submit">Defaut active</button>
        <button class="btn btn-primary disabled" type="submit">Primary disabled</button>

Rendre un bouton inactif est très pratique lorsque tu as de la maintenanceou une mise à jour à faire sur une page et que tu ne veux pas que tes utilisateurs ai accès à une page en construction. Il te suffit donc de rendre le bouton inactif pour les empêcher d’accéder à cette page. L’autre avantage c’est que tu n’as pas besoin de supprimer temporairement le bouton, ce qui risquerait de déstabiliser visuellement ta page et risquer de te faire supprimer des balises de code qu’il ne fallait pas et donc d’avoir des bugs…

Cet article est maintenant terminé, le prochain sur Bootstrap sera sur les barres de navigations, j’ai appris plein de choses à ce sujet et c’est très vaste et surtout c’est très pratique! Tu verras on a pas fini de saisir des kilomètre de classes CSS !!

Bon week-end et à la semaine prochaine, moi demain je serais à Roland Garros!!

Tant que j’y pense, si à ce stade tu veux aller plus loin avec Bootstrap et CSS, je te conseille de regarder le tutoriel du Wagon, concernant la réalisation d’une landing page, c’est très efficace et intéressant!! C’est par ici!

A+

Guillaume