Latest web development tutorials

bootstrap zakładki

Ten rozdział wyjaśnia funkcje obsługiwane przez karty startowej. Stronicowania (paginacja), to lista nieuporządkowana, Bootstrap traktowane podobnie jak inne elementy interfejsu, jak obsługuje stronicowania.

Stronicowania (paginacja)

W poniższej tabeli przedstawiono Bootstrap zapewnić klasę przetwarzania stronicowania.

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>

Zakładka domyślna

Poniższy przykład ilustruje tabela klasy omówione użycie.pagination:

Przykłady

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

Spróbuj »

Wyniki przedstawiają się następująco:

Zakładka domyślna

stan stronicowania

Poniższy przykład ilustrujeklasę .disabled omówione powyżej tabeli, .activewykorzystania:

Przykłady

<ul class = "stronicowanie"> <Li> <a href = "#"> & laquo ; </ a> </ li> <Li class = "aktywny"> <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>

Spróbuj »

Wyniki przedstawiają się następująco:

stan stronicowania

rozmiar strony

Poniższy przykład ilustruje tabela klasy omówione.pagination- * Zastosowanie:

Przykłady

<ul class = "stronicowanie stronicowanie-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> Największa <ul class = "stronicowanie"> <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> Największa <ul class = "stronicowanie stronicowanie-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>

Spróbuj »

Wyniki przedstawiają się następująco:

rozmiar strony

Klapki (pager)

Jeśli chcesz stworzyć prosty strona odwołuje się do zapewnienia użytkownikom poruszanie się po stronie, aby osiągnąć. Oraz linki przywoławcze jako lista nieuporządkowana jest flip. Domyślnie linki są skupione. Poniższa tabela zawiera klasę przetwarzania klapki startowej.

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>

Domyślna strona

Poniższy przykład ilustruje tabela klasy omówiony.pager wykorzystania:

Przykłady

<ul class = "pager"> <Li> <a href = "#"> Wstecz < / a> </ li> <Li> <a href = "#"> Dalej < / a> </ li> </ Ul>

Spróbuj »

Wyniki przedstawiają się następująco:

Domyślna strona

wyrównane linki

Poniższy przykład pokazujeklasę .previous omówiony powyżej tabeli, .nextwykorzystania:

Przykłady

<ul class = "pager"> <Li class = "poprzednie"> <a href = "#"> & larr ; Starsze </ a> </ li> <Li class = "next"> <a href = "#"> Nowszy & rarr; </ a> </ li> </ Ul>

Spróbuj »

Wyniki przedstawiają się następująco:

Przerzuć wyrównane linki

stan klapką

Poniższy przykład ilustruje tabela klasy omówione.disabled wykorzystania:

Przykłady

<ul class = "pager"> <Li class = "poprzednie wyłączone"> < href = "#"> & larr ; Starsze </ a> </ li> <Li class = "next"> <a href = "#"> Nowszy & rarr; </ a> </ li> </ Ul>

Spróbuj »

Wyniki przedstawiają się następująco:

stan klapką

Dalsze przykłady paginacji

kategoria opis Przykłady
.pager Prosty podział na strony linki, linki wyśrodkowany. próbować
.previous .pager przycisk Poprzedni styl wyrównane do lewej próbować
.next .pager przycisk Dalej stylu, wyrównany do prawej strony próbować
.disabled Wyłącz Link próbować
.pagination linki przywoławcze próbować
.pagination-lg Większe linki przywoławcze próbować
.pagination-sm Mniejszy rozmiar powiązań przywoławczych próbować
.disabled Wyłącz Link próbować
.active Aktualny dostępu link do strony w stylu próbować