Boutons

Bonne utilisation

Points de conformité :

• Utilisez l'élément <button> tant que possible afin de vous assurer de la concordance avec le rendu multinavigateur
  • Il y a un bogue dans Firefox <30 that qui rend impossible l'établissement de line-height dans les boutons fondés sur <input>
  • La hauteur de ces boutons est inégale dans Firefox

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents

Code

// Bouton par défaut :
<button type="submit">Bouton</button>
<input type="button" value="Saisir" />
<input type="submit" value="Soumettre" />
<a class="btn btn-default" href="#"</a>

// Bouton stylisé :
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Saisir" />
<input class="btn btn-default" type="submit" value="Soumettre" />
<a class="btn btn-default" href="#" role="button">Lien</a>

Bonne utilisation

Points de conformité :

• Utilisez les boutons comme suit :
  • Par défaut : Bouton standard
  • Primaire : Donne un poids visuel supplémentaire et indique l'action primaire dans un ensemble de boutons
  • Succès : Indique une action réussie ou positive qui permet à l'utilisateur de passer à phase suivante ou au module suivant
  • Info : Bouton contextuel pour les messages d'alerte informationnels
  • Avertissement : Indique que la prudence sera de mise avec cette action
  • Danger : Indique une action dangereuse ou potentiellement négative
  • Lien : Réduit le rôle du bouton en le faisant ressembler à un lien, tout en maintenant le comportement d'un bouton

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents

Code

// Défaut :
<button type="button" class="btn btn-default">Défaut</button>

// Primaire :
<button type="button" class="btn btn-primary">Primaire</button>

// Succès :
<button type="button" class="btn btn-success">Succès</button>

// Info :
<button type="button" class="btn btn-info">Info</button>

// Avertissement :
<button type="button" class="btn btn-warning">Avertissement</button>

// Danger :
<button type="button" class="btn btn-danger">Danger</button>

// Lien :
<button type="button" class="btn btn-link">Lien</button>

Bonne utilisation

Points de conformité :

• Taille par défaut : Utilisez pour un bouton ordinaire
• Boutons petits ou très petits : Utilisez lorsque plusieurs boutons se trouvent dans une barre à outils et que l'espace est restreint. La taille du bouton est réduite afin de maximiser le nombre de boutons qui figure sur une seule rangée
• Gros bouton : Utilisez-le lorsque vous voulez lui donner une importance accrue sur la page. Puisque les boutons par défaut crée déjà une importance et un appel à l'action, la valeur ou le besoin d'augmenter leur taille est limité

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents

Code

// Gros bouton :
<button type="button" class="btn btn-default btn-lg">Gros bouton</button>

// Bouton par défaut :
<button type="button" class="btn btn-default">Défaut bouton</button>

// Petit bouton :
<button type="button" class="btn btn-default btn-sm">Petit bouton</button>

// Très petit bouton :
<button type="button" class="btn btn-default btn-xs">Très petit bouton</button>

Bonne utilisation

Points de conformité :

• Utilisez .btn-block lorsque le bouton se trouve dans un petit contenant
  • Ce bouton s'étend sur toute la largeur d'un contenant apparenté et est totalement justifié dans l'espace disponible
• Testez le bouton dans toutes les résolutions
  • Dans une conception adaptative, les boutons qui prennent la largeur maximale peuvent ne pas avoir une belle apparence dans toutes les résolutions

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents

Code

// Bouton de blocage de niveau :
<button type="button" class="btn btn-default btn-block">Bouton de blocage de niveau</button>

Bonne utilisation

Points de conformité :

• Ajoutez .active à l'élément <a> ou <button> pour indiquer qu'un lien ou un bouton est actif
• Utilisez lorsque la cible de lien ou de bouton correspond à l'adresse de la page courante

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents

Code

// Bouton actif :
<button type="button" class="btn btn-default active">Bouton</button>

// Lien actif :
<a href="#" class="btn btn-default active" role="button">Lien</a>

Bonne utilisation

Points de conformité :

• Utilisez disabled="disabled" pour déactiver un bouton
• Ajoutez la catégorie .disabled à un élément <a> afin d'indiquer qu'un lien est désactivé
• Retirez l'attribut href afin de désactiver complètement les liens, car la catégorie ne change que l'apparence de la balise <a>, non la fonctionnalité

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents

Code

// Bouton désactivé :
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Bouton</button>

// Lien désactivé :
<a href="#" class="btn btn-default btn-lg disabled" role="button">Lien</a>

Bonne utilisation

Points de conformité :

• Utilisez pour créer une seule barre à outils de boutons
• Enveloppez une série de boutons avec .btn dans .btn-group
• Ajoutez .btn-group-*à .btn-group au lieu d'appliquer des catégories de tailles de bouton à chaque bouton d'un groupe
• Enveloppez une série de boutons avec .btn dans .btn-group btn-group-justified − pour utiliser des groupes de boutons justifiés avec des éléments <a>
• Enveloppez chaque bouton dans un groupe de boutons pour utiliser des groupes de boutons justificatifs avec des éléments <button>. La plupart des navigateurs n'appliquent notre CSS que pour la justification aux éléments <button>. Puisque nous prenons en charge les boutons de déroulement, nous pouvons le contourner

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents

Code

// Par défaut :
<div class="btn-group">
  <button class="btn btn-default" type="button">...</button>...
</div>

// Groupe de gros boutons :
<div class="btn-group btn-group-lg">...
</div>

//Groupe de petits boutons :
<div class="btn-group btn-group-sm">...
</div>

// Groupe de très petits boutons :
<div class="btn-group btn-group-xs">...
</div>

// Liens justifiés :
<div class="btn-group btn-group-justified">
   <a class="btn btn-default" role="button">...</a>...
</div>

// Groupe de boutons justifiés :
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">...</button>
  </div>...
</div>

Bonne utilisation

Point d'observation :

• Utilisez pour créer une barre à outils qui contient plusieurs groupes de boutons

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent

Code

// Plusieurs groupes de boutons :
<ul class="btn-toolbar list-inline" role="toolbar">
  <li class="btn-group">
   <button type="button" class="btn btn-default">1</button>
	...
  </li>
  <li class="btn-group">
   <button type="button" class="btn btn-default">4</button>
	...
  </li>
  <li class="btn-group">
   <button type="button" class="btn btn-default">6</button>
  </li>
</ul>