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.
<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.
<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>