Bootstrap - Pagination: A Comprehensive Guide for Beginners

Привет, начинающие веб-разработчики! Сегодня мы окунемся в мир_paginationBootstrap. Как ваш доброжелательный соседский учитель компьютера, я с радостью проведу вас через это путешествие. Не волнуйтесь, если вы новички в программировании - мы начнем с азов и будем двигаться дальше. К концу этого руководства вы将成为 профи в области pagination!

Что такое Pagination?

Прежде чем мы перейдем к Bootstrap, давайте поймем, что такое pagination. Представьте, что вы читаете длинную книгу. Вместо того чтобы набить весь контент на одну страницу, он разделен на управляемые части - это и есть pagination в цифровом мире. Он помогает организоватьlarge amounts of content по нескольким страницам, делая его更容易 для пользователей ориентироваться.

Bootstrap Pagination: Основы

Bootstrap, наш надежный фронтенд-инструмент, предоставляет простой и стильный способ создания pagination. Давайте начнем с основ.

Простая Pagination

Для создания базовой pagination в Bootstrap мы используем элементы <nav> и <ul> с конкретными классами. Вот простой пример:

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Предыдущий</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="#">Следующий</a></li>
</ul>
</nav>

Давайте разберем это:

• Элемент <nav> оборачивает нашу pagination для семантических целей.
• <ul> имеет класс pagination, который применяет стили pagination Bootstrap.
• Каждый <li> представляет страницу и имеет класс page-item.
• Теги <a> внутри каждого <li> имеют класс page-link, который стилизует кликабельную часть.

Работа с иконами

Хотите сделать вашу pagination еще более крутой? Давайте добавим иконки! Bootstrap хорошо работает с библиотеками иконок, такими как Font Awesome. Вот как вы можете использовать иконки в своей pagination:

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</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>
</a>
</li>
</ul>
</nav>

В этом примере мы использовали « и » для создания левых и правых стрелочных иконок. Это HTML-энтитеты, которые.render как « и » соответственно.

Состояния Pagination: Отключено и Активно

Иногда вам захочется выделить текущую страницу или отключить определенные элементы навигации. Bootstrap делает это легко с помощью классов active и disabled.

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Предыдущий</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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="#">Следующий</a>
</li>
</ul>
</nav>

Здесь ссылка "Предыдущий" отключена (вы не можете кликнуть по ней), а страница 2 помечена как активная (текущая выбранная).

Размеры

Как и у Goldilocks, иногда вам нужно, чтобы ваша pagination была именно такого размера. Bootstrap предлагает различные варианты размера:

<!-- Большая pagination -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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 -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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-lg для большой pagination или pagination-sm для маленькой pagination. Это как выбирать между grande или tall в вашем любимом кофейне!

Выравнивание

По умолчанию pagination выравнивается слева. Но что, если вы хотите центрировать ее или сместить вправо? Bootstrap позаботится о вас:

<!-- Выравнивание по центру -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Предыдущий</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="#">Следующий</a>
</li>
</ul>
</nav>

<!-- Выравнивание вправо -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Предыдущий</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="#">Следующий</a>
</li>
</ul>
</nav>

Используйте justify-content-center для выравнивания pagination по центру, или justify-content-end для выравнивания вправо.

Выравнивание с использованием Flex Utility

Для еще большего контроля над выравниванием вашей pagination вы можете использовать утилиты flex Bootstrap:

<nav aria-label="Page navigation">
<div class="d-flex justify-content-center">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Предыдущий</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="#">Следующий</a>
</li>
</ul>
</div>
</nav>

Здесь мы обернули нашу pagination в <div> с классами d-flex и justify-content-center. Это дает вам больше гибкости в позиционировании вашей pagination.

Заключение

И вот оно, folks! Вы только что совершили grand tourBootstrap pagination. От базовых структур до изысканных выравниваний, вы теперь имеете инструменты для создания красивых и функциональных pagination для ваших веб-проектов. Помните, практика делает мастера, так что не стесняйтесь экспериментировать с этими примерами.

Вот quick reference table классов, которые мы рассмотрели:

Класс	Назначение
pagination	Создает базовую структуру pagination
page-item	Стилизует каждый элемент в pagination
page-link	Стилизует кликабельную часть каждого элемента
active	Выделяет текущую страницу
disabled	Отключает элемент pagination
pagination-lg	Создает большую pagination
pagination-sm	Создает маленькую pagination
justify-content-center	Выравнивает pagination по центру
justify-content-end	Выравнивает pagination вправо
d-flex	Создает flex контейнер

Credits: Image by storyset