Bootstrap Étiquettes et badges en ligne
Introduction
Avec Bootstrap, vous pouvez créer des étiquettes en ligne (c'est-à-dire des étiquettes et du texte annoté) et des badges (c'est-à-dire des indicateurs et des compteurs de non-lus).
Étiquettes en ligne
Avec les étiquettes en ligne, vous pouvez créer des étiquettes accrocheuses et du texte annoté.
Exemple
Exemple
<div class="container">
<div class="row">
<div class="span12">
<p><span class="label">Par défaut</span></p>
<p><span class="label label-success">Succès</span></p>
<p><span class="label label-warning">Avertissement</span></p>
<p><span class="label label-important">Important</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-inverse">Inverse</span></p>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<p><span class="label">Par défaut</span></p>
<p><span class="label label-success">Succès</span></p>
<p><span class="label label-warning">Avertissement</span></p>
<p><span class="label label-important">Important</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-inverse">Inverse</span></p>
</div>
</div>
</div>
Voir en ligne
Dans bootstrap.css, de la ligne 3162 à la ligne 3200, les styles pour label, label-success, label-warning, label-important, label-info et label-inverse sont présentés.
Badges
Comme le mentionne Bootstrap,
Les badges sont des composants petits et simples, utilisés pour afficher des indicateurs ou des compteurs pour certaines catégories. On les trouve généralement dans les clients de messagerie utilisés pour les notifications push, comme Mail.app, ou dans les applications mobiles.
Exemple
Exemple
<div class="container">
<div class="row">
<div class="span12">
<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>
</div>
</div>
</div>
Voir en ligne
Veuillez noter que dans cet exemple, nous avons utilisé bootstrap-2.0.3.css, car les styles de badge n'étaient pas définis dans Bootstrap v2.0.1.
Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.
Autres extensions