Руководство Bootstrap Pagination

Pagination (Пагинация)
.disable & .active
Размер (Sizing)
Justify (Выравнивать)

1. Pagination (Пагинация)

Если у вас есть страница с большим количеством данных (или что-то наподобии), оно будет слишком длинное для отображения на единственной странице, поэтому вам нужно разделить данные на разные части. Каждая часть это страница, она отображает только некоторые данные и вам нужно собрать ссылки (Link), чтобы пользователь переходил к следующей странице (Или предыдущей странице). Набор этих ссылок называется компонент Pagination (Компонент Пагинации).

Когда вы находите что-то на Google вы можете увидеть компонент Pagination (Компонент Пагинации):

В данной статье мы изучим как создать компонент Pagination (Компонент Пагинации) с Bootstrap.

pagination-example

<h4 class="mb-5">Pagination example:</h4>

<nav aria-label="Search results pages">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">1</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">3</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

Это структура Bootstrap Pagination:

На самом деле вы можете создать компонент Bootstrap Pagination без необходимости в элементе <nav>, но рекомендация это все равно иметь его. <nav> похож на подсказку, что это навигационная зона, и имеет пользу для таких устройств как Screen Reader. Вы можете заменить <nav> с помощью <div role="nav"> чтобы получить индентичное значение.

<nav aria-label="Search results pages">
   ...
</nav>


<div role="nav" aria-label="Search results pages">
  ...
</div>

Icon

Элементы "Next" или "Previous" вы можете заменить их иконами, но стоит иметь подсказки для Screen Reader используя ".sr-only", данный элемент полностью скрыт для всех устройств за исключением Screen Reader.

pagination-icon-example

<h4 class="mb-5">Pagination example:</h4>

<nav aria-label="Page navigation example">
   <ul class="pagination">
      <li class="page-item">
         <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
         </a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">1</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">3</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
         </a>
      </li>
   </ul>
</nav>

2. .disable & .active

Используйте класс .active для Pagination-item чтобы подчеркнуть данный item и акцентировать на то, что данная страница просматривается пользователем (текущая страница). И используя класс .disabled для ссылок (Link), если вы хотите отключить ее, пользователь не может нажать на данную ссылку.

pagination-status-example

<h4 class="mb-5">Pagination (.active & .disabled):</h4>

<nav aria-label="Something..">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">1</a>
      </li>
      <li class="page-item active">
         <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

3. Размер (Sizing)

Если вы хотите, чтобы компонент Pagination немного увеличился, используйте класс .pagination-lg:

.pagination .pagination-lg

<h5 class="mb-2">Pagination (.pagination .pagination-lg):</h5>

<nav aria-label="Something">
   <ul class="pagination pagination-lg">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">1</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</nav>

Или если вы хотите иметь Pagination меньше, используйте класс .pagination-sm:

.pagination .pagination-sm

<h5 class="mb-2">Pagination (.pagination .pagination-sm):</h5>

<nav aria-label="Something">
   <ul class="pagination pagination-sm">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">1</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</nav>

4. Justify (Выравнивать)

Bootstrap Pagination на самом деле является Flex Container, так как он был настроен Css property {display: flex}. Поэтому некоторые утилитарные классы Bootstrap Flex могут применяться для Pagination:

justify-content-start
justify-content-center
justify-content-end
justify-content-between
justify-content-around

.pagination .justify-content-center

<h6 class="mb-3">.pagination .justify-content-center</h6>

<nav aria-label="Something">
   <ul class="pagination justify-content-center bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

.pagination .justify-content-end

<h6 class="mb-3">.pagination .justify-content-end</h6>

<nav aria-label="Something">
   <ul class="pagination justify-content-end bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

Руководство Bootstrap Flex Utility