صفحه بندی (Pagination)

«صفحه بندی (Pagination)» یعنی تقسیم صفحات زیاد به بخش های کوچکتر. این کار مسیر حرکت کاربر را ساده می کند. مثل صفحات دفتر که شماره دارند و سریع پیدا می شوند.

صفحه بندی پایه

برای نسخه پایه، روی <ul> کلاس .pagination بگذار. سپس برای هر مورد، .page-item و .page-link بده.

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

مشاهده در ادیتور

حالت فعال (Active)

برای مشخص کردن صفحه جاری، روی .page-item کلاس .active بگذار.

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

مشاهده در ادیتور

لینک غیرفعال (Disabled)

برای غیرقابل کلیک کردن لینک ها، از کلاس .disabled استفاده کن.

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

مشاهده در ادیتور

سایزبندی صفحه بندی

برای اندازه بزرگ یا کوچک، از .pagination-lg یا .pagination-sm کمک بگیر.

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

مشاهده در ادیتور

ترازکردن صفحه بندی

با ابزارهای چیدمان، تراز را چپ، وسط یا راست کن. از .justify-content-center یا .justify-content-end استفاده کن.

<ul class="pagination">
  <li class="page-item">...</li>
</ul>
<ul class="pagination justify-content-center">
  <li class="page-item">...</li>
</ul>
<ul class="pagination justify-content-end">
  <li class="page-item">...</li>
</ul>

مشاهده در ادیتور

بردکرامب (Breadcrumbs)

«بردکرامب (Breadcrumb)» مسیر فعلی کاربر را نشان می دهد. برای آن از .breadcrumb و .breadcrumb-item استفاده کن.

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  <li class="breadcrumb-item"><a href="#">Italy</a></li>
  <li class="breadcrumb-item active">Rome</li>
</ul>

مشاهده در ادیتور

نکته: برای بهبود ناوبری، از صفحه بندی بوت استرپ همراه با لیست گروه ها استفاده کن. همچنین قبلش می توانی اسپینرها را ببینی.

گام های تمرینی

1. یک صفحه بندی پایه بساز و لینک ها را شماره گذاری کن.
2. روی شماره جاری، کلاس .active بگذار.
3. لینک «قبلی» را در صفحه اول غیرفعال کن.
4. اندازه را بزرگ کن و سپس کوچک کن.
5. تراز را وسط قرار بده و نتیجه را بررسی کن.

جمع بندی سریع

• .pagination ظرف صفحه بندی است.
• .active صفحه جاری را نشان می دهد.
• .disabled لینک را غیرقابل کلیک می کند.
• .pagination-lg و .pagination-sm برای اندازه است.
• تراز با .justify-content-* کنترل می شود.