انتقل إلى محتوى الدرس

Pagination Nav Structure هيكل ترقيم الصفحات الدلالي

تعلّم بناء أشرطة ترقيم الصفحات الدلالية في بوتستراب 5 مع أزرار الرموز المتاحة صوتياً، وحالتي التفعيل والتعطيل، والتحكم بالأحجام والمحاذاة المرنة.
2 صفوف تعليمية
بوتستراب 5
0 مشاهدة

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

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

عندما تمتد نتائج البحث أو قوائم المنتجات أو أرشيف المقالات لمئات السجلات، يصبح تقسيمها إلى صفحات مرقمة ضرورة هندسية لتسريع التحميل وتسهيل التصفح. يوفر بوتستراب 5 مكوّن .pagination المبني على الصندوق المرن لرسم أزرار ترقيم متصلة ومتناسقة الحواف.

وبما أن الصفحة الواحدة تضم غالباً شريط تنقل رئيسي في الأعلى وشريط ترقيم في الأسفل، احرص دائماً على تغليف القائمة <ul class="pagination"> بوسم دلالي <nav> يحمل سمة تعريفية واضحة مثل aria-label="Search results pages"، ثم ضع داخلها عناصر <li class="page-item"> التي تحتضن روابط <a class="page-link">.

الصف 2 كود برمجي
HTML
<nav aria-label="Course pages">
  <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>
  </ul>
</nav>