ترقيم الصفحات في إطار العمل Bootstrap

استخدم مكوِّن التصفّح الذي يقدّمه إطار العمل Bootstrap للدّلالة على وجود سلسلة محتوى مرتبط مُقسَّم على صفحات عدّة.

نظرة عامّة

يستخدم إطار العمل Bootstrap كتلة عريضة من الروابط المرتبطة في ما بينها للإشارة إلى وجود المحتوى على صفحات عدّة، وجعل الروابط سهلة التمييز والتمدّد، مع توفير مساحة نقر مريحة. يُبنَى شريط التصفّح باستخدام عناصر HTML وبالتالي يمكن لقارئات الشاشة قراءة عدد الروابط الموجودة. استخدم العنصُر <nav> لتقديم عناصر التصفّح إلى قارئات الشاشة والتقنيّات المساعدة الأخرى على أنّها عناصر تنقّل.

يُنصَح - علاوة على ذلك - باستخدام الخاصيّة aria-label ضمن العنصُر <nav> للدلالة على الغرض من شريط التصفّح الذي يتكوّن عادةً من أكثر من صفحة. إنْ كان شريط التصفّح يُستخدَم - مثلًا - للتنقّل بين مجموعة من نتائج البحث فإنّه يمكن إعطاء القيمة "صفحات نتائج البحث" للخاصيّة aria-label.

<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="السابق">
        <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="التالي">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">التالي</span>
      </a>
    </li>
  </ul>
</nav>

تنشيط روابط الصفحات وتعطيلها

يمكن تخصيص روابط التصفّح حسب الحاجة. استخدم الصنف ‎.disabled للروابط التي تظهر غير قابلة للنقر والصنف ‎.active للإشارة إلى الصفحة النشطة حاليًّا.

يستخدم الصنف ‎.disabled الخاصيّة pointer-events: none لمحاولة تعطيل وظيفة الرابط من العنصُر <a>، إلّا أنّ هذه الخاصيّة ليست معياريّة في CSS حتى الآن، ولا تؤثّر على التنقّل باستخدام لوحة المفاتيح. لذا يجب دائمًا إضافة الخاصيّة tabindex="-1"‎ إلى الروابط المُعطّلة واستخدام شفرة JavaScript مُخصَّصة لتعطيل وظيفتها.

<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">(الحالي)</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>

يمكن التخلّي عن الروابط النشطة أو المُعطّلة واستخدام <span> مكانها، أو عدم استخدام الرابط (<a>) بالنسبة للسّهم في حالتيْ التالي/السابق لحذف وظيفة الرابط ومنع استقبال المؤشّر باستخدام لوحة المفاتيح مع الإبقاء على التنسيق المرغوب.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">السابق</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(الحالي)</span>
      </span>
    </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-lg (أزرار كبيرة) أو ‎.pagination-sm (أزرار صغيرة) للحصول على أحجام إضافيّة لشريط التصفّح.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

المحاذاة

بدّل محاذاة مكوّنات التصفّح باستخدام أدوات Flexbox.

<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>

مصادر

• صفحة Pagination في توثيق Bootstrap.