Basis Paginierung
Wenn Sie eine Website mit vielen Seiten haben, möchten Sie vielleicht eine Art von Paginierung jeder Seite hinzuzufügen.
Eine grundlegende Paginierung in Bootstrap sieht wie folgt aus:
Um einen grundlegenden Paginierung erstellen, fügen Sie die .pagination Klasse zu einem <ul> Element:
Beispiel
<ul class="pagination">
<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> Versuch es selber " Active State
Der aktive Zustand zeigt, was die aktuelle Seite:
In Klasse .active der Benutzer weiß , welche Seite er / sie auf:
Beispiel
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Versuch es selber " Disabled State
Ein behinderter Verknüpfung kann nicht angeklickt werden:
In Klasse .disabled wenn ein Link aus irgendeinem Grund deaktiviert ist :
Beispiel
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Versuch es selber " Pagination Sizing
Paginierung Blöcke können auch auf eine größere Größe oder eine kleinere Größe bemessen sein:
In Klasse .pagination-lg für größere Blöcke oder .pagination-sm für kleinere Blöcke:
Beispiel
<ul class="pagination
pagination-lg">
<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>
<ul class="pagination pagination-sm">
<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> Versuch es selber " Semmelbrösel
Eine andere Form für die Paginierung, ist Paniermehl:
Die .breadcrumb Klasse zeigt den aktuellen Seite Standort innerhalb einer Navigationshierarchie:
Beispiel
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul> Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
Füllen Sie Bootstrap Navigation Referenz
Eine vollständige Referenz aller Navigationsklassen gehen , um unsere komplette Bootstrap Navigation Referenz .