-
-
-
-
- مدیر
جان اسمیت
صفحه بندی ها
- خانه
- صفحه بندی ها
صفحه بندی پیش فرض
<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="قبلی">
<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="بعدی">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
صفحه بندی غیر فعال و فعال
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">قبلی</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link active">1</span>
</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 active" aria-current="page">
<span class="page-link active">1</span>
</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"><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 justify-content-end">
<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>
صفحه بندی سفارشی
نمایش 1 تا 8 از 20 ورودی
<div class="d-sm-flex justify-content-between align-items-center text-center">
<span class="fs-14">نمایش 1 تا 8 از 20 ورودی</span>
<nav aria-label="Page navigation example">
<ul class="pagination mb-0 mt-3 mt-sm-0 justify-content-center">
<li class="page-item">
<a class="page-link icon" href="products.html" aria-label="Previous">
<i data-feather="arrow-right"></i>
</a>
</li>
<li class="page-item"><a class="page-link active" href="products.html">1</a></li>
<li class="page-item"><a class="page-link" href="products.html">2</a></li>
<li class="page-item"><a class="page-link" href="products.html">3</a></li>
<li class="page-item">
<a class="page-link icon" href="products.html" aria-label="Next">
<i data-feather="arrow-left"></i>
</a>
</li>
</ul>
</nav>
</div>