betacode

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

View more Tutorials:

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>

View more Tutorials: