Bootstrap -Paginierung

Grundlegende Paginierung

Wenn Sie eine Website mit vielen Seiten haben, möchten Sie vielleicht jeder Seite eine Art Paginierung hinzufügen.

Eine grundlegende Paginierung in Bootstrap sieht folgendermaßen aus:

• 1
• 2
• 3
• 4
• 5

Um eine grundlegende Paginierung zu erstellen, fügen Sie die .paginationKlasse einem <ul>Element hinzu:

Aktiver Zustand

Der aktive Zustand zeigt die aktuelle Seite an:

• 1
• 2
• 3
• 4
• 5

Klasse hinzufügen .active, um dem Benutzer mitzuteilen, auf welcher Seite er/sie sich befindet:

Deaktivierter Zustand

Ein deaktivierter Link kann nicht angeklickt werden:

• 1
• 2
• 3
• 4
• 5

Klasse hinzufügen, .disabledwenn ein Link aus irgendeinem Grund deaktiviert ist:

Paginierungsgröße

Paginierungsblöcke können auch größer oder kleiner skaliert werden:

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Klasse .pagination-lgfür größere Blöcke oder .pagination-smfür kleinere Blöcke hinzufügen:

Semmelbrösel

Eine andere Form der Paginierung sind Breadcrumbs:

1. Heim
2. Privatgelände
3. Bilder
4. Urlaub

Die .breadcrumbKlasse gibt die Position der aktuellen Seite innerhalb einer Navigationshierarchie an:

<ul class="">
  <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>
</ul>

Vollständige Bootstrap-Navigationsreferenz

Eine vollständige Referenz aller Navigationsklassen finden Sie in unserer vollständigen Bootstrap-Navigationsreferenz .