В этой главе обсуждается функция разбиения на страницы, поддерживаемая 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> <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 предоставляет для пейджера.
| Учебный класс | Описание | Образец кода |
|---|---|---|
| .пейджер | Добавьте этот класс, чтобы получить ссылки на пейджер. |
<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 = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>
состояния
В следующем примере демонстрируется использование класса .disabled, рассмотренного в приведенной выше таблице.