Bootstrap : Les boutons¶
Les boutons proposent un élément cliquable dans l'interface qui attire l'attention et appelle à l'action de l'utilisateur.
Liens avec apparence de bouton¶
Parfois un lien cliquable a l'apparence de bouton.
On doit alors lui donner le rôle de bouton pour que les classes fonctionnent.
<a role="button" href="iphone.html">
Acheter mon iPhone
</a>
Les classes d'un bouton¶
-
La classe btn déclare un bouton et active différents états (normal / appuyé)
-
Pour appliquer une couleur de fond, ajouter une classe de couleur de bouton :
- btn-primary, btn-secondary, btn-success, etc...
-
Pour des boutons avec contour uniquement, utiliser les classes de contour :
- btn-outline-primary, btn-outline-secondary, btn-outline-success, etc.
Balise <button>¶
La balise <button> permet créer un bouton cliquable dans l'interface web.
Il faut ensuite programmer la fonctionnalité du bouton.
<button type="button">Acheter ici</button>
Le type
Le type du bouton va changer selon son utilisation.
On donne le type "button" à un bouton de base qui n'a pas d'utilité particulière et qui nécessite que nous programmions sa fonctionnalité.