Guide de style

L'utiliser pour positionner un élément de contenu par-dessus un autre élément de contenu.

L'utiliser pour permettre à des parties d'une page Web d'être chargées ou mises à jour sur une seconde page Web (réutilisation de contenu).

L'utiliser pour fournir des messages de rétroaction contextuelle pour les actions typiques des utilisateurs. Choisir parmi quelques messages d'alerte disponibles et flexibles.

L'utiliser pour aligner le texte à gauche, au centre ou à droite. Ou bien, l'utiliser pour aligner un bloc de contenu ou une image au centre.

Utiliser les badges (indicateurs numériques) pour mettre en surbrillance le nombre de mises à jour et les éléments nouveaux ou non lus qui sont associés à un lien.

Les utiliser pour ajouter une ou plusieurs bordures à des éléments de conception afin de séparer ou d'attirer l'attention sur des éléments de contenu. Les utiliser aussi pour retirer les bordures par défaut ou rendre plus nets les coins qui apparaissent dans des composantes de conception comme le « well » (puit).

Utilisez les boutons pour créer un appel à l'action qui incite l'utilisateur à présenter du contenu à partir d'un formulaire. De plus, utilisez les boutons pour emmener les utilisateurs vers une page Web qui présente des renseignements supplémentaires.

Utilisez l'interface du calendrier d'événements pour explorer une liste chronologique d'événements.

Utiliser un carrousel pour parcourir des éléments de contenu à l'aide d'onglets ou passer d'un élément à l'autre dans un format de diaporama.

Les utiliser pour générer dynamiquement des graphiques à partir d'un tableau.

L'utiliser pour émuler le code source et l'afficher dans une police de caractères à espacement fixe.

L'utiliser pour fournir une syntaxe et mettre en surbrillance des extraits de code source dans une page HTML.

Utilisez la couleur comme élément de présentation à des fins décoratives dans le but de transmettre des renseignements.

Utilisez un identificateur de pays, un enveloppeur simple pour AjaxLoader, afin d'insérer du contenu téléchargé via Ajax, selon le pays d'un visiteur (déterminé par Free Geo IP (disponible en anglais seulement) (lien externe)).

Utilisez Data inview pour afficher une superposition lorsqu'une section se déplace en dehors de l'espace d'affichage.

L'utiliser pour permettre à une page Web de préciser des sources d'images différentes à afficher, selon les requêtes de médias.

L'utiliser pour enrichir un tableau de données et permettre le tri, le filtrage, la recherche, la pagination et d'autres fonctions du genre.

L'utiliser pour ajouter une fonction de saisie automatique à des zones de saisie particulières; affiche dynamiquement une liste de mots qui correspondent à un élément « datalist ».

L'utiliser pour mettre à jour le contenu d'un élément « datalist » de façon dynamique, selon la saisie de l'utilisateur.

L'utiliser pour fournir une interface permettant de sélectionner une date dans un formulaire.

L'utiliser pour appliquer la même hauteur à des cellules de grille. Fait en sorte que les éléments intérieurs (panneaux, wells et ainsi de suite) héritent de la hauteur de la grille parent.

L'utiliser pour créer des widgets affichages et masquables repliables qu'un utilisateur peut sélectionner pour montrer ou cacher du contenu.

Utilisez un widget de fil de syndication pour regrouper et afficher les entrées d'un ou plusieurs fils de syndication sur une page Web. Les formats pris en charge sont Atom, RSS et Media RSS.

Utilisez un élément flottant pour changer le flux normal d'un élément. Repoussez l'élément à gauche ou à droite de son contenu, où le texte et les éléments incorporés l'enveloppent.

Utilisez une note de bas de page pour indiquer une référence, une citation ou un commentaire qui expose des détails à propos de quelque chose sur cette page. Il s'agit de contenu non critique qui se rapporte au texte principal, et il figure toujours en bas de page.

Utilisez une géocarte pour afficher une carte dynamique et superposer de l'information venant de sources supplémentaires.

Utilisez un système de grilles (une série de rangées et de colonnes qui abritent du contenu) pour créer des mises en page.

Utilisez un en-tête pour appliquer un titre à une section de contenu qui la suit immédiatement. Les en-têtes sont de gros caractères gras qui sont concis et de nature hiérarchique.

Utilisez l'un des deux ensembles d'icônes, Glyphicons ou Font Awesome, à des fins décoratives. Les icônes sont des glyphes – des polices fondées sur une image, de façon semblable à Wingdings. Contrairement aux polices traditionnelles, elles ne transmettent aucun sens. Par conséquent, du vrai texte doit accompagner l'icône pour veiller au respect des exigences en matière d'accessibilité. Rendez le texte visible ou invisible, pourvu qu'il soit présent.

Utilisez des images pour représenter visuellement un nom (une personne, un lieu ou une chose) ou un verbe (une action). Une image est un artéfact visuel à deux dimensions statique qui est un type de contenu non textuel. Elle est classifiée comme un élément décoratif, simple ou complexe, ou encore comme une image de texte.

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Utilisez-le pour montrer ou cacher du contenu – tout dépend de ce que vous voulez accomplir. Il y a des styles propres aux technologies adaptées (aide aux utilisateurs de lecteur d'écran), à la conception réactive (vue à partir d'appareils petits ou grands), à l'usage général (utilisation d'onglets de basculement) et à l'impression (impression de l'information nécessaire seulement).

Les utiliser pour imiter les touches d'un clavier d'ordinateur.

Utilisez l'étiquette appropriée pour décrire et mettre en surbrillance l'information textuelle (non numérique).

Utilisez un lien (texte et/ou image) pour emmener un utilisateur à une autre page Web, pour passer à un autre emplacement dans la même page Web ou pour exécuter une fonction de contrôle par l'utilisateur déterminée par le langage de script côté client (JavaScript).

Utilisez des composantes regroupement de liste pour contenir des éléments de contenu connexes.

Les utiliser pour afficher un nombre d'éléments reliés de façon consécutive. Habituellement, les éléments d'une liste s'affichent l'un en dessous de l'autre.

L'utiliser pour afficher des formules mathématiques (et non des variables dans une phrase) à l'aide de MathML.

Utiliser pour styliser une liste de navigation et pour apporter de l'attention sur un lien actif.

L'utiliser pour augmenter ou diminuer la proximité d'un objet par rapport à un autre. Cela vient modifier les espaces blancs entre deux éléments afin d'indiquer si les éléments sont liés ou non. De plus, ces classes permettent à des éléments de contenu figurant et ne figurant pas dans une grille d'exister dans la même rangée.

L'utiliser pour afficher une valeur dans une gamme lorsqu'il y a une valeur minimale et une valeur maximale connues (par exemple, la hauteur de quelque chose).

Utilisez une fenêtre modale pour de l'information qui reste devant la fenêtre originale.

L'utiliser pour fournir un lecteur multimédia accessible afin d'intégrer du contenu vidéo et audio à des pages Web.

L'utiliser pour modifier l'opacité d'un élément.

L'utiliser pour positionner un élément devant un autre.

Utilisez un index de pagination pour les documents longs qu'il est préférable de diviser en plusieurs pages. Un utilisateur peut sélectionner une page particulière dans un document à l'aide des fonctions « Suivant » ou « Précédent », ou (s'ils sont présents) des hyperliens de navigation numériques.

Les utiliser pour créer un groupement visuel de contenu. Les panneaux ont des options de couleur par thème, en plus d'offrir un en-tête et un pied de page distincts.

La barre de progression est utilisée pour fournir une rétroaction à jour sur la progression d'un flux de travail ou d'une action. Le compteur est utilisé pour afficher une valeur dans une plage lorsqu'il existe une valeur minimale et maximale connue (mesure scalaire).

L'utiliser pour afficher les progrès d'une tâche.

Utilisez les citations pour reprendre un groupe de mots prononcés par quelqu'un d'autre que l'auteur ou le conférencier d'origine.

L'utiliser pour redistribuer et envelopper du contenu qui ne figure pas dans une grille autour et en dessous d'une cellule de grille (boîte de contenu).

L'utiliser pour offrir une fonctionnalité d'expiration de session et d'expiration en raison de l'inactivité.

L'utiliser pour écraser la taille par défaut d'un élément de texte (rendre le texte grand ou petit).

L'utiliser pour afficher une barre coulissante.

Utilisez cet outil d'édition Web pour produire des tableaux qui se conforment à Règles pour l'accessibilité des contenus Web 2.0. Cet outil contribue à déterminer les erreurs de relations dans un tableau complexe.

Les utiliser pour organiser les données en rangées et en colonnes afin de créer des cellules de données.

Les utiliser pour montrer plusieurs aspects d'éléments de contenu connexes dans des panneaux différents, côte à côte.

L'utiliser pour afficher des images dans une lightbox, individuellement ou dans le cadre d'une galerie.

Les utiliser pour créer une transition de contenu avec des états facultatifs (apparition et disparition en fondu, glissement à droite ou glissement à gauche).

L'utiliser pour mettre en oeuvre et intégrer des chronologies Twitter.

Les utiliser lorsque l'on fait référence à une variable comme « x », « n » ou « y » dans une phrase (expression non mathématique). Nouveau

L'utiliser afin de fournir des rayures blanches et grises de remplacement pour des rangées de tableau dans des directions horizontales ou multiples. Cela contribue à relier visuellement des données horizontales à des données verticales.