ترقيم الصفحات في إطار العمل 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-*‎.

<nav aria-label="مثال على صفحات التنقّل">
  <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"><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>
      </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 active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </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">
        1
        <span class="sr-only">(current)</span>
      </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.

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