Sélection de la langue

Recherche

Étiquettes

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage si des renseignements ou des codes son manquants, incorrects ou que leur synchronisation est déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Utiliser l'étiquette appropriée pour décrire et mettre en surbrillance des renseignements textuels (non numériques).

Conception et codage

Utilisation de base

Étiquette par défaut

Utilisez-la pour présenter quelques mots à l'arrière-plan. Elle donne du contexte supplémentaire sur le contenu adjacent.

Apparence

Du texte ici (Information sur l'étiquette)

Bonne utilisation

Point d'observation :

  • Utilisez .label-default pour attirer l'attention sur une section de contenu en ajoutant de courts éléments de renseignements textuels à l'appui
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
  • Ne l'utilisez pas dans les alertes ou les boutons
  • Ne l'utilisez pas pour mettre en surbrillance des éléments non lus − utilisez des badges
  • Ne mettez pas en surbrillance des grandes sections de texte − utilisez des alertes
Code
<p>Du texte ici <span class="label label-default">(Information sur l'étiquette)</span></p>

Étiquette primaire

Utilisez-la pour présenter quelques mots sur un arrière-plan coloré qui correspond au thème de couleur du site. Elle donne un contexte supplémentaire sur le contenu adjacent.

Apparence

Du texte ici (Information sur l'étiquette)

Bonne utilisation

Points de conformité :

  • Utilisez .label-primary pour attirer l'attention sur une section de contenu en ajoutant de courts éléments de renseignements textuels à l'appui
  • Utilisez pour faire correspondre l'étiquette au thème de couleur du site
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas dans les alertes ou les boutons
  • Ne l'utilisez pas pour mettre en surbrillance des éléments non lus − utilisez des badges
  • Ne mettez pas en surbrillance de grandes sections de texte − utilisez des alertes
Code
<p>Du texte ici <span class="label label-primary">(Information sur l'étiquette)</span></p>

Étiquette de succès

Utilisez-la pour présenter quelques mots sur un arrière-plan coloré qui laissent entendre que le contenu est exact. Elle donne un contexte supplémentaire sur le contenu adjacent.

Apparence

Du texte ici (Information sur l'étiquette)

Bonne utilisation

Points de conformité :

  • Utilisez .label-success pour attirer l'attention sur une section de contenu en ajoutant de courts éléments de renseignements textuels à l'appui
  • Utilisez-la pour indiquer que le contenu est exact
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas dans les alertes ou les boutons
  • Ne l'utilisez pas pour mettre en surbrillance des éléments non lus − utilisez des badges
  • Ne mettez pas en surbrillance de grandes sections de texte − utilisez des alertes
Code
<p>Du texte ici <span class="label label-success">(Information sur l'étiquette)</span></p>

Étiquette de renseignements

Utilisez-la pour présenter quelques mots sur un arrière-plan coloré qui laissent entendre que le contenu est informatif. Elle donne un contexte supplémentaire sur le contenu adjacent.

Apparence

Du texte ici (Information sur l'étiquette)

Bonne utilisation

Points de conformité :

  • Utilisez-la pour indiquer que l'utilisateur doit être averti
  • Utilisez .label-info pour attirer l'attention sur une section de contenu en ajoutant de petits éléments textuels de renseignements à l'appui
  • Utilisez-la pour indiquer que le contenu est de nature informative
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas dans les alertes ou les boutons
  • Ne l'utilisez pas pour mettre en surbrillance des éléments non lus − utilisez des badges
  • Ne mettez pas en surbrillance de grandes sections de texte − utilisez des alertes
Code
<p>Du texte ici <span class="label label-info">(Information sur l'étiquette)</span></p>

Étiquette d'avertissement

Utilisez-la pour présenter quelques mots sur un arrière-plan coloré qui laissent entendre que l'utilisateur doit être averti. Elle donne un contexte supplémentaire sur le contenu adjacent.

Apparence

Du texte ici (Information sur l'étiquette)

Bonne utilisation

Points de conformité :

  • Utilisez .label-warning pour attirer l'attention sur une section de contenu en ajoutant de courts éléments de renseignements textuels à l'appui
  • Utilisez pour indiquer que l'utilisateur doit être averti
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas dans les alertes ou les boutons
  • Ne l'utilisez pas pour mettre en surbrillance des éléments non lus − utilisez des badges
  • Ne mettez pas en surbrillance de grandes sections de texte − utilisez des alertes
Code
<p>Du texte ici <span class="label label-warning">(Information sur l'étiquette)</span></p>

Étiquette de danger

Utilisez-la pour présenter quelques mots sur un arrière-plan coloré qui laissent entendre que l'action ou le contenu est dangereux. Elle donne un contexte supplémentaire sur le contenu adjacent.

Apparence

Du texte ici (Information sur l'étiquette)

Bonne utilisation

Points de conformité :

  • Utilisez .label-danger pour attirer l'attention sur une section de contenu en ajoutant de courts éléments de renseignements textuels à l'appui
  • Utilisez-la pour indiquer que l'action ou le contenu est dangereux
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas dans les alertes ou les boutons
  • Ne l'utilisez pas pour mettre en surbrillance des éléments non lus − utilisez des badges
  • Ne mettez pas en surbrillance de grandes sections de texte − utilisez des alertes
Code
<p>Du texte ici <span class="label label-danger">(Information sur l'étiquette)</span></p>

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).

Date de modification: