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

Пагинация

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

Класс Описание Образец кода
.pagination Добавьте этот класс, чтобы получить разбивку на страницы на странице.
<ul class = "pagination">
   <li><a href = "#">«</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>
.disabled, .active Вы можете настроить ссылки, используя .disabled для незакрепленных ссылок и .active, чтобы указать текущую страницу.
<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 Используйте эти классы для получения элементов разного размера.
<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

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

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

<ul class = "pagination">
   <li><a href = "#">«</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 = "#">»</a></li>
</ul>

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

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

<ul class = "pagination">
   <li><a href = "#">«</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 = "#">»</a></li>
</ul>

Определение размеров

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

<ul class = "pagination pagination-lg">
   <li><a href = "#">«</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 = "#">»</a></li>
</ul>
 

 
<ul class = "pagination">
   <li><a href = "#">«</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 = "#">»</a></li>
</ul>
 

 
<ul class = "pagination pagination-sm">
   <li><a href = "#">«</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 = "#">»</a></li>
</ul>

Пейджер

Если вам нужно создать простые ссылки на страницы, выходящие за рамки текста, пейджер может работать очень хорошо. Как и ссылки на страницы, пейджер является неупорядоченным списком. По умолчанию ссылки центрированы. В следующей таблице перечислены классы, которые Bootstrap предоставляет для пейджера.

Класс Описание Образец кода
.pager Добавьте этот класс, чтобы получить ссылки пейджера.
<ul class = "pager">
<li><a href = "#">Previous</a></li>
<li><a href = "#">Next</a></li>
</ul>
.previous, .next Используйте класс .previous для выравнивания по левому краю и  .next  для выравнивания ссылок по правому краю.
<ul class = "pager">
   <li class = "previous"><a href = "#">← Older</a></li>
   <li class = "next"><a href = "#">Newer →</a></li>
</ul>
.disabled Добавьте этот класс, чтобы получить приглушенный вид.
<ul class = "pager">
   <li class = "previous disabled"><a href = "#">← Older</a></li>
   <li class = "next"><a href = "#">Newer →</a></li>
</ul>

Пейджер по умолчанию

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

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

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

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

<ul class = "pager">
   <li class = "previous"><a href = "#">← Older</a></li>
   <li class = "next"><a href = "#">Newer →</a></li>
</ul>

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

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

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">← Older</a></li>
   <li class = "next"><a href = "#">Newer →</a></li>
</ul>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok