Bootstrap-Basisanleitung

Bootstrap-Plugin

Bootstrap Tag Bootstrap Breadcrumb Navigation

Bootstrap Pagination

Dieses Kapitel erläutert die Paginierungsfunktionen, die Bootstrap unterstützt. Paginierung (Pagination) ist eine unsortierte Liste, die Bootstrap wie andere Oberflächenelemente behandelt.

Paginierung (Pagination)

Die folgende Tabelle listet die von Bootstrap bereitgestellten Klassen zur Verarbeitung der Paginierung auf.

Klasse	Beschreibung	Beispielcode
.pagination	Für die Anzeige der Paginierung auf der Seite diese Klasse hinzufügen.	<ul> 　　<li><a href="#">«</a>/a></li> 　　<li><a href="#">1</a></li> 　　....... </ul>
.disabled, .active	Sie können Links anpassen, indem .disabled um nicht klickbare Links zu definieren, indem .active um die aktuelle Seite anzuzeigen.	<ul> 　　<li><a href="#">«</a>/a></li> 　　<li><a href="#">1<span>(aktuell)</<span></a></li> 　　....... </ul>
.pagination-lg, .pagination-sm	Verwenden Sie diese Klassen, um Elemente verschiedener Größen zu erzielen.	<ul>.../ul> <ul>.../ul> <ul>.../ul>

Standardseitenvergröße

Die folgenden Beispiele zeigen die in der Tabelle diskutierten class .pagination Verwendung:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Standardseitenvergröße/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>
<ul class="pagination">
	<li><a href="#">«</a>/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt dargestellt:

Seitenstatus

Die folgenden Beispiele zeigen die in der Tabelle diskutierten class .disabled, .active Verwendung:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Seitenstatus/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>
<ul class="pagination">
	<li><a href="#">«</a>/a></li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt dargestellt:

Seitenvergröße

Die folgenden Beispiele zeigen die in der Tabelle diskutierten class .pagination-* Verwendung:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Seitenvergröße/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>
<ul class="pagination pagination-lg">
	<li><a href="#">«</a>/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul><br>
<ul class="pagination">
	<li><a href="#">«</a>/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul><br>
<ul class="pagination pagination-sm">
	<li><a href="#">«</a>/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt dargestellt:

Umleitung (Pager)

Wenn Sie eine einfache Umleitungslink für die Navigation für den Benutzer erstellen möchten, können Sie dies durch Umleitung erreichen. Wie die Umleitungslinks sind auch die Umleitungen eine nicht sortierte Liste. Standardmäßig werden die Links zentriert angezeigt. Die Tabelle unten listet die von Bootstrap verwendeten class für die Umleitung auf.

Klasse	Beschreibung	Beispielcode
.pager	Fügen Sie diese class hinzu, um die Umleitungslinks zu erhalten.	<ul> 　　<li><a href="#">Vorherige</a></li> 　　<li><a href="#">Nächste</a></li> </ul>
.previous, .next	Verwenden Sie die class .previous Justieren Sie die Links nach links, indem Sie .next Justieren Sie die Links nach rechts.	<ul> 　　<li><a href="#">← Ältere</a></li> 　　<li><a href="#">Neuere →</a>/a></li> </ul>
.disabled	Fügen Sie diese class hinzu, um die entsprechenden Schaltflächen deaktiviert zu setzen.	<ul> 　　<li><a href="#">← Ältere</a></li> 　　<li><a href="#">Neuere →</a>/a></li> </ul>

Standardumleitung

Die folgenden Beispiele zeigen die in der Tabelle diskutierten class .pager Verwendung:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Standardumleitung/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>
<ul class="pager">
	<li><a href="#">Vorherige</a></li>
	<li><a href="#">Nächste</a></li>
</ul>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt dargestellt:

Ausgerichtete Links

Die folgenden Beispiele zeigen die in der Tabelle diskutierten class .previous, .next Verwendung:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Ausgerichtete Links in der Umleitung/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>
<ul class="pager">
	<li class="previous"><a href="#">← Ältere</a></li>
	<li class="next"><a href="#">Neuere →</a>/a></li>
</ul>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt dargestellt:

Status der Umleitung

Die folgenden Beispiele zeigen die in der Tabelle diskutierten class .disabled Verwendung:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Status der Umleitung</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>
<ul class="pager">
	<li class="previous disabled"><a href="#">← Ältere</a></li>
	<li class="next"><a href="#">Neuere →</a>/a></li>
</ul>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt dargestellt:

Mehr Beispiele auf der folgenden Seite

Klasse	Beschreibung	Beispiel
.pager	A simple pagination link, aligned to the center.	Try It
.previous	Button style for the previous page in .pager, aligned to the left	Try It
.next	Button style for the next page in .pager, aligned to the right	Try It
.disabled	Disabled Link	Try It
.pagination	Pagination Link	Try It
.pagination-lg	Larger Pagination Link Size	Try It
.pagination-sm	Smaller Pagination Link Size	Try It
.disabled	Disabled Link	Try It
.active	Current Page Link Style	Try It

Bootstrap Tag Bootstrap Breadcrumb Navigation