Bootstrap - разбивка на страницы

В этой главе обсуждается функция разбивки на страницы, которую поддерживает 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 = "#">&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>

Пейджер

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

Класс	Описание	Образец кода
.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>`
.отключен	Добавьте этот класс, чтобы получить приглушенный вид.	`<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 = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

состояния

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

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