Bootstrap-Basistutorial

Bootstrap-Plugin

Bootstrap Tags

Dieser Abschnitt erläutert Bootstrap-Labels. Labels können zur Zählung, als Hinweise oder zur Anzeige anderer Markierungen auf der Seite verwendet werden. Verwenden Sie die Klasse .label Um Labels anzuzeigen, siehe untenstehendes Beispiel:

Online-Beispiel

Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Label</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>
<h1>Beispielüberschrift <span class="label label-default">Label</span></h1>
<h2>Beispielüberschrift <span class="label label-default">Label</span></h2>
<h2>Beispielüberschrift <span class="label label-default">Label</span></h2>
<h4>Beispielüberschrift <span class="label label-default">Label</span></h4>
</body>
</html>

Test it out ‹/›

The results are as follows:

Sie können modizierte class label-default、label-primary、label-success、label-info、label-warning、label-danger Um das Aussehen der Labels zu ändern, siehe untenstehendes Beispiel:

Online-Beispiel

Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Variationen der Labels</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>
<span class="label label-default">Standardlabel</span>
<span class="label label-primary">Hauptlabel</span>
<span class="label label-success">Erfolgslabel</span>
<span class="label label-info">Informationslabel</span>
<span class="label label-warning">Warnungslabel</span>
<span class="label label-danger">Dangerous label</span>
</body>
</html>

Test it out ‹/›

The results are as follows:

More label examples

Class	Description	Example
.label label-default	Default gray label	Try It
.label label-success	Green label of the "success" type	Try It
.label label-warning	Yellow label of the "warning" type	Try It

Bootstrap Badges Bootstrap Pagination