Bootstrap Пагинация

В этой главе объясняется функционал пагинации, поддерживаемый Bootstrap. Пагинация — это неупорядоченный список, и Bootstrap обрабатывает пагинацию так же, как и другие элементы интерфейса.

Пагинация

В следующей таблице перечислены классы, предоставляемые Bootstrap для работы с пагинацией.

КлассОписаниеПример кода
.paginationДобавьте этот класс, чтобы отобразить пагинацию на странице. 
<ul class="pagination">
  <li><a href="../index.html">&laquo;</a></li>
  <li><a href="../index.html">1</a></li>
  .......
</ul>
.disabled, .activeВы можете настраивать ссылки, используя.disabledдля определения неактивных ссылок, и используя.activeдля текущей страницы. 
<ul class="pagination">
  <li class="disabled"><a href="../index.html">&laquo;</a></li>
  <li class="active"><a href="../index.html">1<span class="sr-only">(current)</span></a></li>
  .......
</ul>
.pagination-lg, .pagination-smИспользуйте эти классы, чтобы получить элементы разных размеров. 
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Пагинация по умолчанию

Следующий пример демонстрирует классы, рассмотренные в таблице выше.paginationиспользование:

Пример

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

Попробуйте »

Результат показан ниже:

默认的分页

Состояния пагинации

Следующий пример демонстрирует классы, рассмотренные в таблице выше.disabled、.activeиспользование:

Пример

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

Попробуйте »

Результат показан ниже:

分页的状态

Размеры пагинации

Следующий пример демонстрирует классы, рассмотренные в таблице выше.pagination-*использование:

Пример

<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. Как и ссылки постраничной навигации, pager также является неупорядоченным списком. По умолчанию ссылки выравниваются по центру. В следующей таблице перечислены классы, которые Bootstrap предоставляет для работы с pager.

КлассОписаниеПример кода
.pagerДобавьте этот класс, чтобы получить ссылки pager. 
<ul class="pager">
  <li><a href="../index.html">Previous</a></li>
  <li><a href="../index.html">Next</a></li>
</ul>
.previous, .nextИспользуйте класс.previousдля выравнивания ссылок по левому краю, используйте.nextдля выравнивания ссылок по правому краю. 
<ul class="pager">
  <li class="previous"><a href="../index.html">&larr; Older</a></li>
  <li class="next"><a href="../index.html">Newer &rarr;</a></li>
</ul>
.disabledДобавьте этот класс, чтобы отключить соответствующую кнопку. 
<ul class="pager">
  <li class="previous disabled"><a href="../index.html">&larr; Older</a></li>
  <li class="next"><a href="../index.html">Newer &rarr;</a></li>
</ul>

Pager по умолчанию

В следующем примере демонстрируется использование класса.pager, рассмотренного в приведённой выше таблице:

Пример

<ul class="pager"> <li><a href="#">Предыдущая</a></li> <li><a href="#">Следующая</a></li> </ul>

Попробуйте »

Результат показан ниже:

默认的翻页

Выровненные ссылки

Следующий пример демонстрирует классы, рассмотренные в таблице выше:.previous、.nextиспользование:

Пример

<ul class="pager"> <li class="previous"><a href="#">&larr; Старые</a></li> <li class="next"><a href="#">Новые &rarr;</a></li> </ul>

Попробуйте »

Результат показан ниже:

翻页中对齐的链接

Состояния пейджера

Следующий пример демонстрирует классы, рассмотренные в таблице выше:.disabledиспользование:

Пример

<ul class="pager"> <li class="previous disabled"><a href="#">&larr; Старые</a></li> <li class="next"><a href="#">Новые &rarr;</a></li> </ul>

Попробуйте »

Результат показан ниже:

翻页的状态

Дополнительные примеры пагинации

Класс Описание Пример
.pager Простая ссылка пагинации, ссылки центрированы. Попробуйте
.previous Стиль кнопки «Предыдущая» в .pager, выровнен по левому краю Попробуйте
.next Стиль кнопки «Next» в .pager, выровненный по правому краю Попробуйте
.disabled Отключить ссылки Попробуйте
.pagination Ссылки пагинации Попробуйте
.pagination-lg Увеличенные ссылки пагинации Попробуйте
.pagination-sm Уменьшенные ссылки пагинации Попробуйте
.disabled Отключить ссылки Попробуйте
.active Стиль ссылки текущей страницы Попробуйте
Другие расширения