В этой статье обсуждается функция разбиения на страницы, поддерживаемая Bootstrap. Разбивка страниц, неупорядоченный список обрабатывается Bootstrap, как и многие другие элементы интерфейса.
Содержание:
Пагинация
В следующей таблице перечислены классы, которые Bootstrap предоставляет для обработки разбиения на страницы.
| Класс | Описание | Образец кода |
|---|---|---|
| .pagination | Добавьте этот класс, чтобы получить разбивку на страницы на странице. | |
| .disabled, .active | Вы можете настроить ссылки, используя .disabled для незакрепленных ссылок и .active, чтобы указать текущую страницу. |
|
| .pagination-lg, .pagination-sm | Используйте эти классы для получения элементов разного размера. | |
Пагинация по умолчанию
Следующий пример демонстрирует использование класса .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>
<br>
<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>
<br>
<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 | Добавьте этот класс, чтобы получить ссылки пейджера. |
|
| .previous, .next | Используйте класс .previous для выравнивания по левому краю и .next для выравнивания ссылок по правому краю. |
|
| .disabled | Добавьте этот класс, чтобы получить приглушенный вид. |
|
Пейджер по умолчанию
Следующий пример демонстрирует использование класса .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>
