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

Bootstrap-Basisanleitung

Bootstrap-Plugins

Bootstrap-Medaille

Dieses Kapitel erläutert das Bootstrap-Abzeichen(Badges). Abzeichen sind ähnlich wie Etiketten, der Hauptunterschied liegt darin, dass die Ecken der Abzeichen runder sind.

Abzeichen(Badges)werden hauptsächlich verwendet, um neue oder ungelesene Einträge hervorzuheben. Um ein Abzeichen zu verwenden, müssen Sie nur <span> Fügen Sie sie zu Links, Bootstrap-Navigationen und anderen Elementen hinzu.

Der folgende Beispiel zeigt dies:

Online-Beispiel

Zeige ungelesene E-Mails:

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Beispiel　-　Abzeichen(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="#">Briefkasten　<span　class="badge">50</span></a>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Wenn es keine neuen oder ungelesenen Einträge gibt, verwenden Sie CSS :empty Wähle den Selector, die Abzeichen falten sich zusammen und zeigen, dass sie keine Inhalte enthalten.

Online-Beispiel

Zeige ungelesene Nachrichten:

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Bootstrap　Beispiel　-　Etiketten</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>Abzeichen</h2>
　　<p>.badge　Klasse legt die Anzahl der ungelesenen Nachrichten fest:</p>
　　<p><a　href="#">Posteingang　<span　class="badge">21</span></a></p>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Aktivierungsstatus der Navigationsleiste

Sie können Abzeichen in der aktiven Pillen-Navigation und der Listen-Navigation platzieren. Durch die Verwendung von <span> Um Links zu aktivieren, siehe die folgenden Beispiele:

Online-Beispiel

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　Beispiel　-　Aktivierungsstatus der Navigationsleiste</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>Aktivierungsstatus in der Pillen-Navigation</h4>
<ul　class="nav　nav-pills">
	<li　class="active"><a　href="#">Startseite　<span　class="badge">42</span></a></li>
	<li><a href="#">Einführung</a></li>
	<li><a　href="#">Nachrichten　<span　class="badge">3</span></a></li>
</ul>
<br>
<h4>Aktivierungsstatus in der Listen-Navigation</h4>
<ul　class="nav　nav-pills　nav-stacked"　style="max-width:　260px;">
	<li class="active">
		<a href="#">
			<span class="badge pull-right">42</span>
			Startseite
		</a>
	</li>
	<li><a href="#">Einführung</a></li>
	<li>
		<a href="#">
			<span class="badge pull-right">3</span>
			Nachricht
		</a>
	</li>
</ul>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Bootstrap-Extra-Breites-BildschirmBootstrap-Tag