Руководство Bootstrap Pagination
1- Pagination (Пагинация)
Если у вас есть страница с большим количеством данных (или что-то наподобии), оно будет слишком длинное для отображения на единственной странице, поэтому вам нужно разделить данные на разные части. Каждая часть это страница, она отображает только некоторые данные и вам нужно собрать ссылки (Link), чтобы пользователь переходил к следующей странице (Или предыдущей странице). Набор этих ссылок называется компонент Pagination (Компонент Пагинации).Пример Pagination (Компонент Пагинации):В данной статье мы изучим как создать компонент Pagination (Компонент Пагинации) с помощью Bootstrap.<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.<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">«</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">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
2- .disable & .active
Используйте класс .active для Pagination-item чтобы подчеркнуть данный item и акцентировать на то, что данная страница просматривается пользователем (текущая страница). И используя класс .disabled для ссылок (Link), если вы хотите отключить ее, пользователь не сможет нажать на данную ссылку.<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:<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:
<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
<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 Bootstrap CSS css CSS3 dle DLE fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Какую операционную систему вы используете