📌 در بوت‌استرپ ۵ برای ایجاد صفحه‌بندی (Pagination) از کامپوننت آماده استفاده می‌کنیم.
این کامپوننت به کاربر اجازه می‌دهد بین صفحات مختلف جابه‌جا شود.

✅ ساختار پایه

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

✅ غیرفعال (Disabled) و فعال (Active)

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#">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</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>

• disabled → غیرفعال

• active → صفحه جاری

✅ سایزهای مختلف

• .pagination-lg → بزرگ‌تر

• .pagination-sm → کوچک‌تر

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

✅ ترازبندی (Alignment)

• .justify-content-start → سمت چپ (پیش‌فرض)

• .justify-content-center → وسط‌چین

• .justify-content-end → راست‌چین

<ul class="pagination justify-content-center">
  <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>
</ul>

📌 نکات مهم

• برای دسترس‌پذیری بهتر همیشه aria-label روی <nav> بگذارید.

• می‌توانید از آیکون‌ها («, », یا آیکون‌های Font Awesome / Bootstrap Icons) به جای متن "Previous" و "Next" استفاده کنید.

• Bootstrap به صورت پیش‌فرض از Flexbox برای چینش Pagination استفاده می‌کنه.