صفحه‌بندی

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم و با استفاده از طراحان گرافیک است.

صفحه‌بندی

مستندات و مثالهایی برای نشان دادن صفحه بندی برای نشان دادن یک سری مطالب مرتبط در چندین صفحه وجود دارد.

    
<nav aria-label="مثال پیمایش صفحه">
    <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>
علامت‌گذاری

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

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

    
<nav aria-label="مثال پیمایش صفحه">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">قبلی</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">&raquo;</span>
                <span class="sr-only">بعدی</span>
            </a>
        </li>
    </ul>
</nav>
علامت‌گذاری

غیرفعال و فعال


    <nav aria-label="...">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">قبلی</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 <span class="sr-only">(current)</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>
علامت‌گذاری

قرارگیری

قراگیری را میتوانید به راحتی با خواندن لینک فلکس باکس عوض کنید.


<nav aria-label="مثال پیمایش صفحه">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">قبلی</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="مثال پیمایش صفحه">
    <ul class="pagination justify-content-end">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">قبلی</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>
علامت‌گذاری