صفحه بندی

مثال های پایه

مثال زیر از صفحه بندی پایه. از کلاس .pagination به عنوان والد <ul> و .page-link کلاس عنصر <a> استفاده کنید.

مثال کد

<div>
    <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"><span class="page-link"><em class="icon ni ni-more-h"></em></span></li>
        <li class="page-item"><a class="page-link" href="#">6</a></li>
        <li class="page-item"><a class="page-link" href="#">7</a></li>
        <li class="page-item"><a class="page-link" href="#">بعدی</a></li>
    </ul>
</div>

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

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

1
2
3

مثال کد

<nav>
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="قبلی"><span aria-hidden="true">&laquo;</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">&raquo;</span></a>
        </li>
    </ul>
</nav>

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

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

مثال کد

<nav>
    <ul class="pagination">
        <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" aria-current="page"><a class="page-link" href="#">2 <span class="visually-hidden">(فعلی)</span></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>

سایزبندی

برای اندازه های اضافی، .pagination-{sm|lg|xl} را با کلاس اصلی .pagination اضافه کنید.

1
2
3

1
2
3

1
2
3

1
2
3

مثال کد

<nav>
    <ul class="pagination pagination-lg">
      <li class="page-item active" aria-current="page"><span class="page-link">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>

ترازبندی

ترازبندی کامپوننت های صفحه بندی را با ابزارهای flexbox با استفاده از .justify-content-{start|center|end} برای تنظیم ترازبندی تغییر دهید.

مثال کد

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

پیش نمایش مورد استفاده

داشبوردها

اپلیکیشن ها

صفحه های متفرقه

کامپوننت ها

مثال های پایه

مثال کد

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

مثال کد

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

مثال کد

سایزبندی

مثال کد

ترازبندی

مثال کد