حالتا التفعيل والتعطيل بالترقيم | ترقيم الصفحات في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تتغير حالة أزرار الترقيم ديناميكياً مع تنقل الزائر بين الصفحات؛ ففي الصفحة الأولى يجب تعطيل زر «السابق» بإضافة كلاس .disabled إلى .page-item، بينما يُميَّز رقم الصفحة المفتوحة حالياً بكلاس .active مع السمة الدلالية aria-current="page".

وانتبه لتفصيل مهم يخص لوحة المفاتيح: وسم الرابط <a> في HTML لا يمتلك سمة تعطيل أصلية تمنع الوصول إليه بزر Tab. لذلك يُفضَّل استبدال الرابط بوسم <span class="page-link"> داخل العنصر المعطل أو النشط، أو إضافة tabindex="-1" مع aria-disabled="true" إذا اضطررت للإبقاء على وسم الرابط.

الصف 2 صورة توضيحية

مخطط تشريحي لمكوّن ترقيم الصفحات يوضح الغلاف الدلالي وحالات التعطيل والنشاط والأحجام

الصف 3 كود برمجي

HTML

<ul class="pagination">
  <li class="page-item disabled">
    <span class="page-link">Previous</span>
  </li>
  <li class="page-item active" aria-current="page">
    <span class="page-link">1</span>
  </li>
</ul>

جرّب بنفسك

الصف 4 ملاحظة هامة

Active Disabled Page Items حالتا التفعيل والتعطيل بالترقيم

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (ترقيم الصفحات في بوتستراب 5)