TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити Bootstrap 5 Pagination?

2

Можливо, ви бачили компонент пагінації на більшості сторінок індексу та архіву блогу. Як правило, на сторінках покажчика відображаються останні десять статей, а потім для переходу на інші сторінки використовується додаткове завантаження або нумерована сторінка. У Bootstrap 5 вам просто потрібно включити фрагмент коду для відображення сторінки в різних стилях. Зауважте, що Bootstrap – це фронтенд -фреймворк, він пропонує лише вбудований компонент пагінації лише для відображення. Вам слід кодувати себе, щоб додати автоматизовані сторінкові посилання на сторінках індексу та архіву.

Якщо на вашому сайті менше сторінок, легко вручну додати кожне посилання на сторінку. Але для великого сайту, скажімо, у вас є 500 повідомлень у блозі, вам слід використовувати відповідний сценарій та налаштування теми, щоб додати автоматизовані посилання у сторінку.

Цей підручник охоплює такі способи створення сторінки завантаження Bootstrap:

  1. Створення сторінки за замовчуванням Bootstrap
  2. Додавання піктограм для попередньої та наступної навігації
  3. Показано активні та відключені посилання
  4. Створення сторінок різних розмірів
  5. Використання різних вирівнювань

Компонент пагінації в Bootstrap – це не що інше, як невпорядкований список елементів, як показано нижче:

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">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".

  • Кожен підсвічений елемент повинен мати клас ".page-item".

  • Кожне посилання має використовувати клас “.page-link".

Розбивка на сторінки за замовчуванням виглядатиме так, як показано нижче:

Як створити Bootstrap 5 Pagination?

2 Додавання піктограм для попереднього та наступного

За замовчуванням сторінка використовує текст для попередньої та наступної навігації. Натомість ви можете використовувати іконки, використовуючи код нижче.

<nav aria-label="Pagination"> <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>

Оскільки іконки не можуть читати користувачі з вадами зору, вам слід використовувати попередній / наступний текст для програм зчитування з екрана за допомогою класу “.sr-only”. Це не відображатиметься у браузері. Компонент буде виглядати у веб -переглядачі нижче:

Як створити Bootstrap 5 Pagination?

3 Показ активного посилання та відключення посилання

Ви можете показати активне посилання на сторінках, додавши до необхідного елемента списку клас ".active". Так само додайте клас ".disabled", щоб вимкнути натискання на певне посилання. У наведеному нижче прикладі попередній текст навігації вимкнено, а посилання 2 відображається як активне.

<nav aria-label="Pagination"> <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">Active Page</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>

Клас “.disabled” використовує властивість CSS “pointer-events: none” за замовчуванням. Це вимкне клацання мишею, але користувачі все ще можуть використовувати клавішу табуляції на клавіатурі, щоб виділити посилання, і натиснути пробіл, щоб відкрити пов’язану сторінку. Атрибут tabindex = “-1 ″ використовується для відключення посилання для доступу до клавіатури.

Нижче показано, як активне посилання буде показано на сторінках. Відключені посилання відображатимуть символ курсору зупинки під час наведення курсору миші.

Як створити Bootstrap 5 Pagination?

4 Великі та малі сторінки

Подібно до більшості інших компонентів Bootstrap 4, розмір сторінки можна також змінити на більшу або меншу. Більший має містити клас ".pagination-lg" з невпорядкованим списком, як показано нижче:

<nav aria-label="Pagination"> <ul class="pagination pagination-lg"> <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-sm":

<nav aria-label="Pagination"> <ul class="pagination pagination-sm"> <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 5 Pagination?

5 Вирівнювання по центру та вправо

Останній варіант – вирівнювання. За замовчуванням компонент розбивки на сторінки буде вирівняний з лівого боку. Ви можете зробити його центром або праворуч за допомогою додаткових класів. Для вирівнювання по центру додайте “.justify-content-center” до неупорядкованого списку.

<nav aria-label="Pagination"> <ul class="pagination justify-content-center"> <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>

А для правильного вирівнювання додайте до невпорядкованого списку клас “.justify-content-end”.

<nav aria-label="Pagination"> <ul class="pagination justify-content-end"> <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 5 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі