Latest web development tutorials

Bootstrap Tabs

In diesem Kapitel werden die Funktionen unterstützt durch die Bootstrap Registerkarte erklären. Paging (Paginierung), ist eine ungeordnete Liste, behandelt Bootstrap wie andere Elemente der Benutzeroberfläche wie Paging behandelt.

Paging (Paginierung)

Die folgende Tabelle listet die Bootstrap Verarbeitung Paging-Klasse bieten.

Class描述示例代码
.pagination添加该 class 来在页面上显示分页。 
<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  .......
</ul>
.disabled, .active您可以自定义链接，通过使用.disabled来定义不可点击的链接，通过使用.active来指示当前的页面。 
<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
  .......
</ul>
.pagination-lg, .pagination-sm使用这些 class 来获取不同大小的项。 
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Die Standard-Registerkarte

Das folgende Beispiel zeigt die Klassentabelle diskutiert.pagination Nutzung:

Beispiele

<Ul class = "Paginierung"> <Li> <a href = "#"> & laquo ; </ 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 = "#"> & raquo ; </ a> </ li> </ Ul>

Versuchen »

Die Ergebnisse sind wie folgt:

Die Standard-Registerkarte

Paging-Status

Das folgende Beispiel zeigtKlasse .disabled obigen Tabelle diskutiert, .activeNutzung:

Beispiele

<Ul class = "Paginierung"> <Li> <a href = "#"> & laquo ; </ a> </ li> <Li class = "aktiv"> <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 = "#"> & raquo ; </ a> </ li> </ Ul>

Versuchen »

Die Ergebnisse sind wie folgt:

Paging-Status

Seitengröße

Das folgende Beispiel zeigt die Klasse Tabelle diskutiert.pagination- * Verbrauch:

Beispiele

<Ul class = "Paginierung Paginierung-lg" > <Li> <a href = "#"> & laquo ; </ 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 = "#"> & raquo ; </ a> </ li> </ Ul> <br> <Ul class = "Paginierung"> <Li> <a href = "#"> & laquo ; </ 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 = "#"> & raquo ; </ a> </ li> </ Ul> <br> <Ul class = "Paginierung Paginierung-sm" > <Li> <a href = "#"> & laquo ; </ 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 = "#"> & raquo ; </ a> </ li> </ Ul>

Versuchen »

Die Ergebnisse sind wie folgt:

Seitengröße

Flip (Pager)

Wenn Sie eine einfache Seite Links erstellen möchten Benutzer zur Verfügung zu stellen navigieren Sie durch die Seite zu erreichen. Und Paging-Links als ungeordnete Liste ist flip. Standardmäßig werden Links zentriert. Die folgende Tabelle listet die Bootstrap Verarbeitung Flip-Klasse.

Class描述示例代码
.pager添加该 class 来获得翻页链接。 
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
.previous, .next使用 class.previous把链接向左对齐，使用.next把链接向右对齐。 
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
.disabled添加该 class 来获得一个颜色变淡的外观。 
<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Die Standardseite

Das folgende Beispiel zeigt die Klassentabelle.pager Verwendung diskutiert:

Beispiele

<Ul class = "Pager"> <Li> <a href = "#"> Zurück < / a> </ li> <Li> <a href = "#"> Weiter < / a> </ li> </ Ul>

Versuchen »

Die Ergebnisse sind wie folgt:

Die Standardseite

Ausgerichtet Links

Das folgende Beispiel zeigtKlasse .previous obigen Tabelle diskutiert, .nextNutzung:

Beispiele

<Ul class = "Pager"> <Li class = "vorherige"> <a href = "#"> & larr ; Ältere </ a> </ li> <Li class = "next"> <a href = "#"> Neuere & rarr; </ a> </ li> </ Ul>

Versuchen »

Die Ergebnisse sind wie folgt:

Flip ausgerichtet Links

Flip Zustand

Das folgende Beispiel zeigt die Klasse Tabelle.disabled Nutzung diskutiert:

Beispiele

<Ul class = "Pager"> <Li class = "vorherige deaktiviert"> < a href = "#"> & larr ; Ältere </ a> </ li> <Li class = "next"> <a href = "#"> Neuere & rarr; </ a> </ li> </ Ul>

Versuchen »

Die Ergebnisse sind wie folgt:

Flip Zustand

Weitere Beispiele für die Paginierung

Kategorie Beschreibung Beispiele
.pager Eine einfache Paginierung Links, zentriert Links. versuchen
.previous .pager die Schaltfläche Zurück Stil, linksbündig versuchen
.next .pager die Schaltfläche Weiter Stil, rechtsbündig versuchen
.disabled Link Deaktivieren versuchen
.pagination Paging-Links versuchen
.pagination-lg Größere Paging-Links versuchen
.pagination-sm Kleinere Größe der Paging-Links versuchen
.disabled Link Deaktivieren versuchen
.active Aktuelle Zugriffsseite Link Stil versuchen