Учебники

Bootstrap – нумерация страниц

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

пагинация

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

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

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