Bootstrap - paginacja

W tym rozdziale omówiono funkcję stronicowania obsługiwaną przez Bootstrap. Paginacja, lista nieuporządkowana jest obsługiwana przez Bootstrap jak wiele innych elementów interfejsu.

Paginacja

W poniższej tabeli wymieniono klasy, które Bootstrap udostępnia do obsługi stronicowania.

Klasa Opis Przykładowy kod

.paginacja

Dodaj tę klasę, aby uzyskać paginację na swojej stronie.

Klasa	Opis	Przykładowy kod
.paginacja	Dodaj tę klasę, aby uzyskać paginację na swojej stronie.	`<ul class = "pagination"> <li><a href = "#">«</a></li> <li><a href = "#">1</a></li> ....... </ul>`
.disabled, .active	Możesz dostosować linki za pomocą .disabled dla linków niemożliwych do kliknięcia i .active aby wskazać bieżącą stronę.	`<ul class = "pagination"> <li class = "disabled"><a href = "#">«</a></li> <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li> ....... </ul>`
.pagination-lg, .pagination-sm	Użyj tych klas, aby uzyskać przedmioty o różnych rozmiarach.	`<ul class = "pagination pagination-lg">...</ul> <ul class = "pagination">...</ul> <ul class = "pagination pagination-sm">...</ul>`

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>

.disabled, .active

Możesz dostosować linki za pomocą .disabled dla linków niemożliwych do kliknięcia i .active aby wskazać bieżącą stronę.

<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

Użyj tych klas, aby uzyskać przedmioty o różnych rozmiarach.

<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Domyślna paginacja

Poniższy przykład demonstruje użycie class .pagination omówione w powyższej tabeli -

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

Stany

Poniższy przykład demonstruje użycie class .disabled, .active omówione w powyższej tabeli -

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

Dobór

Poniższy przykład demonstruje użycie klas do określania rozmiaru, .pagination-* omówione w powyższej tabeli -

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

Pager

Jeśli potrzebujesz tworzyć proste linki do stronicowania, które wykraczają poza tekst, pager może działać całkiem dobrze. Podobnie jak linki do stronicowania, pager jest nieuporządkowaną listą. Domyślnie łącza są wyśrodkowane. W poniższej tabeli wymieniono klasy, które Bootstrap udostępnia dla pagera.

Klasa Opis Przykładowy kod

.pager

Dodaj tę klasę, aby uzyskać linki do pagera.

Klasa	Opis	Przykładowy kod
.pager	Dodaj tę klasę, aby uzyskać linki do pagera.	`<ul class = "pager"> <li><a href = "#">Previous</a></li> <li><a href = "#">Next</a></li> </ul>`
.Poprzednie Następne	Użyj klasy .previous do lewej wyrównaj i .next aby wyrównać linki do prawej strony.	`<ul class = "pager"> <li class = "previous"><a href = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>`
.wyłączone	Dodaj tę klasę, aby uzyskać wyciszony wygląd.	`<ul class = "pager"> <li class = "previous disabled"><a href = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>`

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

.Poprzednie Następne

Użyj klasy .previous do lewej wyrównaj i .next aby wyrównać linki do prawej strony.

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

.wyłączone

Dodaj tę klasę, aby uzyskać wyciszony wygląd.

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Domyślny pager

Poniższy przykład demonstruje użycie class .pager omówione w powyższej tabeli -

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

Wyrównane łącza

Poniższy przykład demonstruje użycie klas do wyrównywania, .previous, .next omówione w powyższej tabeli -

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Stany

Poniższy przykład demonstruje użycie class .disabled omówione w powyższej tabeli -

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>