button). Nous allons par exemple pouvoir modifier la couleur de fond ou la forme d’un bouton, le type d’affichage, la taille et l’état d’un bouton.
Pour personnaliser l’aspect de nos boutons avec Bootstrap, nous allons utiliser la classe de base .btn et des classes de type .btn-*.
Vous pouvez déjà noter que les classes .btn vont également fonctionner avec des éléments a (liens) et input (champ de formulaire).
Appliquer une couleur de fond à un bouton
Nous allons pouvoir utiliser les couleurs contextuelles Bootstrap avec nos boutons pour leur appliquer un fond coloré. Lors du survol de la souris sur un bouton, la couleur de fond va légèrement changer.
Voici les classes que l’on va pouvoir utiliser et leur effet :
See the Pen
Bootstrap 3.3.1 by Pierre (@pierregiraud)
on CodePen.
Notez que lorsqu’on travaille avec des boutons en HTML il est considéré comme une bonne pratique de préciser l’intention derrière l’utilisation du bouton avec un attribut type.
Un bouton défini sans attribut type agira comme si on lui avait passé un type="submit", ce qui signifie qu’il essaiera d’envoyer les données d’un formulaire. Dans notre cas, on précisera type="button" pour expliciter le fait que le bouton n’a pas de comportement spécial par défaut.
Gérer les bordures des boutons
Bootstrap nous donne également la possibilité de créer des boutons avec des bordures colorées et un fond blanc.
Pour cela, nous allons utiliser les classes .btn-outline-* avec les couleurs contextuelles.
Lors d’un hover, c’est-à-dire lorsque la souris va passer sur un bouton, on va avoir un effet de toggle, c’est-à-dire une inversion des couleurs des différents éléments du bouton : le fond va se colorer et le texte redevenir blanc ou noir selon la couleur de fond du bouton.
See the Pen
Bootstrap 3.3.2 by Pierre (@pierregiraud)
on CodePen.
Modifier la taille et le type d’affichage d’un bouton
Bootstrap va également nous permettre de créer des boutons plus petits ou plus grands que la taille par défaut. Pour cela, on va utiliser les classes .btn-sm (bouton de petite taille) et .btn-lg (bouton de grande taille).
Nous allons également pouvoir changer le type de display d’un bouton et le transformer en élément de type block grâce à la classe .btn-block.
See the Pen
Bootstrap 3.3.3 by Pierre (@pierregiraud)
on CodePen.
Les groupes de boutons
Nous allons également pouvoir grouper plusieurs boutons entre eux afin d’homogénéiser l’apparence d’un ensemble de boutons. Pour cela, nous allons utiliser la classe Bootstrap .btn-group que l’on va appliquer à l’élément HTML qui va contenir la série de boutons à grouper (ce sera souvent un élément div).
See the Pen
Bootstrap 3.3.4 by Pierre (@pierregiraud)
on CodePen.
Notez qu’on ajoute également ici deux attributs role et aria-label. Ces deux attributs permettent de définir le rôle et d’ajouter une description à notre conteneur de boutons. Ils vont notamment être utilisé par les liseuses d’écrans qu’utilisent les utilisateurs malvoyants ou non voyants.
L’un des grands enjeux de la décennie est de rendre l’Internet accessible à tous et notamment aux personnes souffrant de déficience. Cela est rendu d’autant plus dur par l’utilisation de plus en plus massive de scripts JavaScript qui vont modifier la page ou ajouter du contenu de manière non compréhensible pour les liseuses d’écran.
L’attribut role et les attributs de type aria- (ARIA = « Accessible Rich Internet Applications ») ont été créées pour fournir des informations supplémentaires à ces liseuses et sont donc obligatoires dès qu’on utilise du code de manière non strictement sémantique ou des scripts JavaScript qui modifient la page.
Gérer la taille des groupes de boutons
De manière similaires aux boutons simples, nous allons pouvoir créer des groupes de boutons de différentes tailles avec les classes .btn-group-sm et .btn-group-lg
See the Pen
Bootstrap 3.3.5 by Pierre (@pierregiraud)
on CodePen.
Créer des listes de boutons en colonne
On va pouvoir créer des listes de boutons verticales ou en colonne grâce à la classe .btn-group-vertical.
See the Pen
Bootstrap 3.3.6 by Pierre (@pierregiraud)
on CodePen.
Imbrication de groupes de boutons et menus
Nous allons finalement également pouvoir imbriquer des listes de boutons les unes dans les autres afin de créer des boutons qui vont servir de menus déroulants.
Cela permet ainsi d’avoir des boutons et des menus déroulants au sein d’un même groupe. Cependant, je décommande personnellement d’utiliser ce genre de construction à moins de faire un usage réel des boutons : nous allons voir des moyens beaucoup plus performants de créer des barres de navigation dans la suite de ce cours.
Nous allons encore pouvoir imbriquer des (listes de) boutons les unes dans les autres afin de créer des sortes de menus déroulants (« dropdown » en anglais) composés de boutons.
Pour cela, nous allons simplement placer un groupe de bouton à l’intérieur d’un autre.
See the Pen
Bootstrap 3.3.7 by Pierre (@pierregiraud)
on CodePen.
Ici, on crée un groupe de boutons composé de deux boutons et d’un deuxième groupe de boutons. Ce deuxième groupe de boutons, imbriqué dans le premier, va faire office de menu déroulant. A l’intérieur de ce groupe, on utilise des éléments de lien plutôt que des boutons afin de répliquer le comportement d’un menu normal.
Notez que ce code utilise certaines fonctionnalités JavaScript de Bootstrap. Pensez donc bien à inclure les fichiers JavaScript utilisés par Bootstrap pour qu’il fonctionne.
