صفحه بندی

اسناد و نمونه هایی برای نمایش صفحه بندی برای نشان دادن یک سری محتوای مرتبط در چندین صفحه وجود دارد.

بررسی اجمالی

ما از بلوک بزرگی از پیوندهای متصل برای صفحه‌بندی خود استفاده می‌کنیم، که باعث می‌شود لینک‌ها به سختی از دست بروند و به راحتی مقیاس‌پذیر شوند—همه اینها در حالی که مناطق بازدید بزرگی را فراهم می‌کنند. صفحه بندی با عناصر لیست HTML ساخته شده است تا خوانندگان صفحه بتوانند تعداد پیوندهای موجود را اعلام کنند. از یک <nav>عنصر بسته بندی برای شناسایی آن به عنوان بخش پیمایش برای صفحه خوان ها و سایر فناوری های کمکی استفاده کنید.

علاوه بر این، از آنجایی که صفحات احتمالاً دارای بیش از یک بخش ناوبری هستند، توصیه می‌شود که توضیحی ارائه شود تا aria-labelهدف <nav>آن را منعکس کند. به عنوان مثال، اگر جزء صفحه بندی برای پیمایش بین مجموعه ای از نتایج جستجو استفاده شود، یک برچسب مناسب می تواند باشد aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <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>

کار با آیکون ها

آیا به دنبال استفاده از نماد یا نماد به جای متن برای برخی از پیوندهای صفحه بندی هستید؟ مطمئن شوید که از صفحه خوان مناسب با ariaویژگی ها و .sr-onlyابزار پشتیبانی می کنید.

<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>

حالت های غیر فعال و فعال

پیوندهای صفحه بندی برای شرایط مختلف قابل تنظیم هستند. برای .disabledپیوندهایی که غیرقابل کلیک ظاهر می شوند و .activeبرای نشان دادن صفحه فعلی استفاده کنید.

در حالی که .disabledکلاس برای غیرفعال کردن عملکرد پیوند s از آن استفاده pointer-events: noneمی کند<a> ، این ویژگی CSS هنوز استاندارد نشده است و ناوبری صفحه کلید را در نظر نمی گیرد. به این ترتیب، همیشه باید tabindex="-1"پیوندهای غیرفعال را اضافه کنید و از جاوا اسکریپت سفارشی برای غیرفعال کردن کامل عملکرد آنها استفاده کنید.

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

می‌توانید به‌صورت اختیاری لنگرهای فعال یا غیرفعال را با <span>، یا در مورد فلش‌های قبلی/بعدی، لنگر را حذف کنید تا عملکرد کلیک را حذف کنید و از فوکوس صفحه کلید با حفظ سبک‌های مورد نظر جلوگیری کنید.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </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-lgیا .pagination-smبرای اندازه های اضافی.

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

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

هم ترازی

تراز اجزای صفحه بندی را با ابزارهای فلکس باکس تغییر دهید .

<nav aria-label="Page navigation example">
  <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>

<nav aria-label="Page navigation example">
  <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>