Компьютерапия

Бутстрап - Пагинация - разбиение на страницы

Категория: Bootstrap 3
Просмотров: 2232

В этой статье обсуждается функция разбиения на страницы, поддерживаемая 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>



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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok