صفحه بندی
توضیحات
نمونه هایی برای نمایش صفحه بندی برای نشان دادن یک سری محتوای مرتبط در چندین صفحه وجود دارد.
علاوه بر این، از آنجایی که صفحات امکان دارد بیش از یک بخش داشته باشد، توصیه میشود یک برچسب 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="#">قبل</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 example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</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>
</a>
</li>
</ul>
</nav>
سایزبندی
کوچک
متوسط
بزرگ
<div class="col-12">
<h5 class="text-center">کوچک</h5>
<nav class="mb-5" aria-label="navigation">
<ul class="pagination pagination-sm d-inline-block d-md-flex 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 active"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">..</a></li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#">بعد</a>
</li>
</ul>
</nav>
<h5 class="text-center">متوسط</h5>
<nav class="mb-5" aria-label="navigation">
<ul class="pagination d-inline-block d-md-flex 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 active"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">..</a></li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#">بعد</a>
</li>
</ul>
</nav>
<h5 class="text-center">بزرگ</h5>
<nav class="mb-5" aria-label="navigation">
<ul class="pagination pagination-lg d-inline-block d-md-flex 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 active"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">..</a></li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#">بعد</a>
</li>
</ul>
</nav>
</div>
حاشیه دار
<div class="col-12">
<nav class="mb-4 d-flex justify-content-center" aria-label="navigation">
<ul class="pagination pagination-bordered ">
<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"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">..</a></li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item">
<a class="page-link" href="#">بعد</a>
</li>
</ul>
</nav>
</div>
پرش به صفحه ای خاص
<nav class="mb-5 d-lg-flex justify-content-between" aria-label="navigation">
<!-- Pagination 1 2 3 -->
<ul class="pagination pagination-bordered justify-content-center d-inline-block d-lg-flex">
<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 active"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">..</a></li>
<li class="page-item"><a class="page-link" href="#">22</a></li>
<li class="page-item"><a class="page-link" href="#">23</a></li>
<li class="page-item">
<a class="page-link" href="#">آخرین</a>
</li>
</ul>
<!-- Pagination jump -->
<ul class="pagination pagination-bordered justify-content-center d-none d-lg-flex">
<li class="page-item disabled">
<span class="page-link">25 صفحه</span>
</li>
<li class="page-item disabled">
<span class="page-link">|</span>
</li>
<li class="page-item disabled">
<span class="page-link">برو به صفحه::</span>
</li>
<li class="page-item">
<input class="form-control h-100 icon-lg fs-6" type="text" placeholder="12">
</li>
<li class="page-item active">
<a class="page-link" href="#">پرش <i class="bi bi-arrow-90deg-right ms-2"></i></a>
</li>
</ul>
</nav>
تمام صفحه
<nav class="my-5" aria-label="navigation">
<ul class="pagination pagination-bordered d-flex justify-content-between">
<li>
<ul class="list-unstyled">
<li class="page-item">
<a class="page-link" href="#">اولین</a>
</li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<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 disabled"><a class="page-link" href="#">..</a></li>
<li class="page-item"><a class="page-link" href="#">22</a></li>
<li class="page-item"><a class="page-link" href="#">23</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li class="page-item">
<a class="page-link" href="#">آخرین</a>
</li>
</ul>
</li>
</ul>
</nav>
جدیدتر و قدیمی تر
<nav class="mt-5" aria-label="navigation">
<ul class="pagination d-flex justify-content-between">
<li class="page-item flex-fill text-center">
<a href="#" class="page-link"> <i class="fas fa-long-arrow-alt-left me-2 rtl-flip"></i> قدیمی تر</a>
</li>
<li class="page-item flex-fill text-center">
<a href="#" class="page-link">جدیدتر <i class="fas fa-long-arrow-alt-right ms-2 rtl-flip"></i></a>
</li>
</ul>
</nav>
دکمه مشاهده بیشتر
<div class="col-12 text-center mt-5">
<button type="button" class="btn btn-primary-soft">مشاهده بیشتر <i class="bi bi-arrow-down-circle align-middle ms-2"></i& gt;</button>
</div>
<div class="col-12 text-center mt-3">
<button type="button" class="btn btn-primary-soft w-100">مشاهده بیشتر <i class="bi bi-arrow-down-circle ms-2 align-middle"></i></button>
</div>
ترازبندی
تراز اجزای صفحه بندی را با ابزارهای flexbox تغییر دهید.
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-start">
<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 example">
<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>