English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base Bootstrap

Plugins Bootstrap

Écussons Bootstrap

Ce chapitre expliquera les badges Bootstrap. Les badges sont similaires aux étiquettes, mais avec des coins plus arrondis.

Les badges (Badges) sont principalement utilisés pour mettre en avant les éléments neufs ou non lus. Pour utiliser un badge, il suffit de <span> >Ajoutez-le aux liens, à la navigation Bootstrap, et à d'autres éléments de ce type.

L'exemple suivant illustre cela :

exemples en ligne

>afficher les emails non lus :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Badge (Badges)/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a href="#">Boîte aux lettres　<span class="badge">50</span></a>
</body>
</html>
Testez et voyez ‹/›

Les résultats sont affichés comme suit :

lorsque il n'y a pas de nouveaux ou de messages non lus, utilisez la propriété :empty sélecteur, le badge se replie pour indiquer qu'il n'y a pas de contenu à l'intérieur.

exemples en ligne

>afficher les messages non lus :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
　　　　<title>Exemple Bootstrap　-　étiquette/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Badge/h2>
　　<p>.badge classe spécifie le nombre de messages non lus :/</p>
　　<p><a href="#">boîte de réception　<span class="badge">21</span></a></</p>
</</div>
</body>
</html>
Testez et voyez ‹/›

>état actif de la navigation

Vous pouvez placer des badges dans la navigation en pilules et en liste en état actif. En utilisant <span> >Pour activer un lien, voici un exemple :

exemples en ligne

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemple Bootstrap　-　>état actif de la navigation</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>état actif dans la navigation en pilules</h4>
<ul class="nav nav-pilules">
	<li class="active"><a href="#">accueil　<span class="badge">42</span></a></li>
	<li><a href="#">Introduction</a></li>
	<li><a href="#">messages　<span class="badge">3</span></a></li>
</ul>
<br>
<h4>état actif dans la navigation de liste</h4>
<ul class="nav nav-pilules　nav-empilé" style="max-largeur:　260px;">
	<li class="active">
		<a href="#">
			<span class="badge pull-right">42</span>
			Accueil
		</a>
	</li>
	<li><a href="#">Introduction</a></li>
	<li>
		<a href="#">
			<span class="badge pull-right">3</span>
			Message
		</a>
	</li>
</ul>
</body>
</html>
Testez et voyez ‹/›

Les résultats sont affichés comme suit :

Écran extra grand BootstrapBalises Bootstrap