صفحه‌بندی در Bootstrap

صفحه‌بندی (Pagination) در Bootstrap یکی از اجزای حیاتی رابط کاربری (UI) برای تقسیم مجموعه‌های بزرگ محتوا به صفحات کوچک‌تر و قابل مدیریت است. این قابلیت به کاربران امکان می‌دهد که به‌صورت متوالی در میان محتوا حرکت کنند. صفحه‌بندی را می‌توان به ضرب‌آهنگی تشبیه کرد که کاربران را از میان یک کتابخانه عظیم اطلاعات هدایت می‌کند، به‌گونه‌ای که در دریای انبوه داده‌ها گم نشوند. از نتایج جستجو و فهرست محصولات گرفته تا بایگانی وبلاگ و جداول داده، صفحه‌بندی راهی واضح و شهودی برای دسترسی ساختارمند به محتوا فراهم می‌سازد. این راهنمای جامع به بررسی عمیق صفحه‌بندی در Bootstrap می‌پردازد؛ از ساختار و گزینه‌های ظاهری گرفته تا ویژگی‌های پیشرفته، ملاحظات دسترسی‌پذیری و استراتژی‌های خلاقانه برای پیاده‌سازی که فراتر از پیوندهای عددی ساده است.

صفحه‌بندی پایه (کلاس‌های `.pagination`, `.page-item`, `.page-link`)

پایه صفحه‌بندی در Bootstrap از یک لیست نامرتب (<ul>) با کلاس‌های خاص تشکیل شده است:

.pagination: به عنصر <ul> اعمال می‌شود و استایل پایه کانتینر صفحه‌بندی را فراهم می‌کند (مانند گوشه‌های گرد و فاصله‌ها).
.page-item: به هر عنصر <li> اعمال می‌شود که نماینده یک لینک صفحه خاص یا دکمه‌های قبلی/بعدی غیرفعال است.
.page-link: به عنصر <a> یا <button> داخل هر .page-item اعمال می‌شود تا استایل قابل کلیک شدن برای اجزای صفحه‌بندی ایجاد کند.

نمونه کد HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Pagination</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Pagination</h2>
        <nav aria-label="Page navigation example">
            <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 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="#">Next</a></li>
            </ul>
        </nav>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

توضیحات اضافی:

aria-label="Page navigation example": برچسب توصیفی برای فناوری‌های کمکی.
.active: روی .page-item صفحه جاری اعمال می‌شود تا وضعیت انتخاب را نشان دهد.
aria-current="page": ویژگی دسترسی‌پذیری برای روشن کردن اینکه کدام صفحه در حال حاضر فعال است.

اندازه‌های صفحه‌بندی (`.pagination-lg`, `.pagination-sm`)

Bootstrap کلاس‌هایی برای تغییر اندازه کلی اجزای صفحه‌بندی ارائه می‌دهد:

.pagination-lg: بزرگ‌تر شدن لینک‌ها.
.pagination-sm: کوچک‌تر شدن لینک‌ها.

مثال:

<nav aria-label="Large pagination example">
    <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>
        <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="#">Next</a></li>
    </ul>
</nav>

<nav aria-label="Small pagination example">
    <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>
        <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="#">Next</a></li>
    </ul>
</nav>

لینک‌های غیرفعال و دکمه‌های قبلی/بعدی

برای نمایش غیرقابل دسترس بودن یا جهت‌یابی، از .disabled استفاده می‌شود:

.disabled روی .page-item اعمال می‌شود تا لینک غیرفعال و کم‌رنگ نمایش داده شود. برای مثال: “Previous” در اولین صفحه و “Next” در آخرین صفحه.

می‌توان از تگ <a> یا <button> برای این دکمه‌ها استفاده کرد. حتماً از aria-label برای دسترسی‌پذیری استفاده کنید.

<nav aria-label="Disabled and Next/Previous buttons">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link">Previous</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="#">Next</a>
        </li>
    </ul>
</nav>

<nav aria-label="Button-based Next/Previous">
    <ul class="pagination">
        <li class="page-item disabled">
            <button class="page-link">Previous</button>
        </li>
        <li class="page-item"><button class="page-link">1</button></li>
        <li class="page-item active" aria-current="page"><button class="page-link">2</button></li>
        <li class="page-item"><button class="page-link">3</button></li>
        <li class="page-item">
            <button class="page-link">Next</button>
        </li>
    </ul>
</nav>

استفاده از نقطه‌چین (Ellipses)

برای مدیریت تعداد زیاد صفحات، استفاده از علامت‌های ... رایج است:

<nav aria-label="Pagination with ellipses">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><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 disabled"><a class="page-link">...</a></li>
        <li class="page-item"><a class="page-link" href="#">10</a></li>
        <li class="page-item"><a class="page-link" href="#">11</a></li>
        <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
    </ul>
</nav>

نکات:

« و »: نمادهای «و» برای قبلی و بعدی.
aria-hidden="true": برای پنهان کردن نماد از فناوری‌های کمکی در صورت وجود برچسب متنی.

تراز‌بندی (Justification)

می‌توانید از کلاس‌های Flexbox در Bootstrap برای تنظیم چینش صفحه‌بندی استفاده کنید:

.justify-content-start: تراز به چپ.
.justify-content-center: تراز وسط.
.justify-content-end: تراز به راست.

<nav aria-label="Left-aligned pagination">
    <ul class="pagination justify-content-start">
        </ul>
</nav>

<nav aria-label="Centered pagination">
    <ul class="pagination justify-content-center">
        </ul>
</nav>

<nav aria-label="Right-aligned pagination">
    <ul class="pagination justify-content-end">
        </ul>
</nav>

ملاحظات دسترسی‌پذیری (Accessibility)

برای دسترسی‌پذیری بهتر:

استفاده از <nav aria-label="…"> برای تعریف بخش صفحه‌بندی.
لینک‌های واضح مانند “قبلی” و “بعدی”.
aria-current="page" برای نشان دادن صفحه فعال.
aria-disabled="true" برای دکمه‌های غیرفعال.
قابلیت پیمایش با صفحه‌کلید (Tab، Enter، Space).

استراتژی‌های پیاده‌سازی خلاقانه

صفحه‌بندی فقط به پیوندهای عددی محدود نمی‌شود. گزینه‌های زیر را در نظر بگیرید:

اسکرول بی‌نهایت با دکمه “بیشتر بارگذاری کن”
نشانگرهای گرافیکی مراحل (Step Indicators) در فرم‌های چندمرحله‌ای.
محدوده‌ای کردن صفحه‌ها مثل “1-10″، “11-20”.
صفحه‌بندی پویا بر اساس اندازه صفحه یا تعداد صفحات.
ترکیب با فیلترها یا مرتب‌سازی.

بهترین روش‌ها

تنها در صورت نیاز استفاده کنید.
طراحی واضح و شهودی داشته باشید.
شماره صفحه فعلی را مشخص کنید.
برای صفحات کم، ممکن است نمایش همه لینک‌ها بهتر از نقطه‌چین باشد.
سازگاری با دستگاه‌های مختلف را بررسی کنید.
دسترسی‌پذیری را در اولویت قرار دهید.

نتیجه‌گیری

صفحه‌بندی در Bootstrap پایه‌ای قدرتمند و انعطاف‌پذیر برای پیمایش مجموعه‌های بزرگ داده فراهم می‌کند. با درک ساختار، استفاده از گزینه‌های استایل، و رعایت اصول دسترسی‌پذیری، می‌توانید تجربه‌ای کاربرپسند و مؤثر برای هدایت کاربران در میان محتوای خود ایجاد کنید. به ریتم هدایت‌گر صفحه‌بندی توجه کنید و کمک کنید کاربران به‌راحتی اطلاعات مورد نیاز خود را بیابند، حتی در کتابخانه‌های بزرگ محتوایی.