إطار Bootstrap 5
التنقل التفصيلي والترقيم
التنقل التفصيلي والترقيم في Bootstrap 5
يوفر Bootstrap مكونات للتنقل التفصيلي والترقيم لمساعدة المستخدمين على فهم موقعهم في التسلسل الهرمي للموقع والتنقل عبر صفحات المحتوى.
1. التنقل التفصيلي الأساسي
يُظهر التنقل التفصيلي موقع الصفحة الحالية ضمن التسلسل الهرمي للتنقل:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسية</a></li>
<li class="breadcrumb-item"><a href="#">المكتبة</a></li>
<li class="breadcrumb-item active" aria-current="page">البيانات</li>
</ol>
</nav>
ملاحظة: تعمل
aria-label على عنصر nav و aria-current على العنصر النشط على تحسين إمكانية الوصول لقارئات الشاشة.
2. فواصل التنقل التفصيلي
قم بتخصيص الفاصل بين عناصر التنقل التفصيلي باستخدام متغيرات CSS:
<!-- فاصل افتراضي (/) -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسية</a></li>
<li class="breadcrumb-item active">المكتبة</li>
</ol>
</nav>
<!-- فاصل مخصص (>) -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسية</a></li>
<li class="breadcrumb-item active">المكتبة</li>
</ol>
</nav>
<!-- استخدام أيقونة -->
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسية</a></li>
<li class="breadcrumb-item active">المكتبة</li>
</ol>
</nav>
<!-- بدون فاصل -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسية</a></li>
<li class="breadcrumb-item active">المكتبة</li>
</ol>
</nav>
3. تصميم التنقل التفصيلي
قم بتخصيص مظهر التنقل التفصيلي باستخدام فئات الأدوات:
<!-- مع خلفية -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light p-3 rounded">
<li class="breadcrumb-item"><a href="#">الرئيسية</a></li>
<li class="breadcrumb-item"><a href="#">المنتجات</a></li>
<li class="breadcrumb-item active">الإلكترونيات</li>
</ol>
</nav>
<!-- إصدار مضغوط -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">الرئيسية</a></li>
<li class="breadcrumb-item active">الحالي</li>
</ol>
</nav>
4. الترقيم الأساسي
أنشئ ترقيمًا للتنقل عبر صفحات المحتوى:
<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>
5. الترقيم مع الأيقونات
استخدم الأيقونات لأزرار السابق والتالي:
<nav aria-label="تنقل الصفحة">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="السابق">
<span aria-hidden="true">«</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">»</span>
</a>
</li>
</ul>
</nav>
نصيحة: قم دائمًا بتضمين سمات
aria-label لجعل الروابط التي تحتوي على أيقونات فقط متاحة لقارئات الشاشة.
6. الحالات النشطة والمعطلة
أشر إلى الصفحة الحالية وعطّل التنقل عند الحاجة:
<nav aria-label="تنقل الصفحة">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">السابق</a>
</li>
<li class="page-item active" aria-current="page">
<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-current="page" والعناصر المعطلة تستخدم aria-disabled="true" و tabindex="-1" لإمكانية الوصول.
7. أحجام الترقيم
أنشئ ترقيمًا أكبر أو أصغر بفئات الحجم:
<!-- ترقيم كبير -->
<nav aria-label="تنقل الصفحة">
<ul class="pagination pagination-lg">
<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>
</ul>
</nav>
<!-- ترقيم افتراضي -->
<nav aria-label="تنقل الصفحة">
<ul class="pagination">
<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>
</ul>
</nav>
<!-- ترقيم صغير -->
<nav aria-label="تنقل الصفحة">
<ul class="pagination pagination-sm">
<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>
</ul>
</nav>
8. محاذاة الترقيم
قم بمحاذاة الترقيم باستخدام أدوات flexbox:
<!-- محاذاة للوسط -->
<nav aria-label="تنقل الصفحة">
<ul class="pagination justify-content-center">
<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>
</ul>
</nav>
<!-- محاذاة لليمين -->
<nav aria-label="تنقل الصفحة">
<ul class="pagination justify-content-end">
<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>
</ul>
</nav>
9. مثال كامل للترقيم
ترقيم كامل الميزات مع جميع الحالات:
<nav aria-label="مثال تنقل الصفحة">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
<span aria-hidden="true">«</span>
<span class="visually-hidden">السابق</span>
</a>
</li>
<li class="page-item active" aria-current="page">
<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>
<li class="page-item"><a class="page-link" href="#">10</a></li>
<li class="page-item">
<a class="page-link" href="#">
<span aria-hidden="true">»</span>
<span class="visually-hidden">التالي</span>
</a>
</li>
</ul>
</nav>
10. الجمع بين التنقل التفصيلي والترقيم
مثال عملي يجمع بين المكونين:
<div class="container mt-4">
<!-- التنقل التفصيلي -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسية</a></li>
<li class="breadcrumb-item"><a href="#">المدونة</a></li>
<li class="breadcrumb-item active">المقالات</li>
</ol>
</nav>
<!-- المحتوى هنا -->
<h1>مقالات المدونة</h1>
<p>قائمة المقالات...</p>
<!-- الترقيم -->
<nav aria-label="ترقيم المقالات" class="mt-4">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#">السابق</a>
</li>
<li class="page-item active"><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>
</div>
تمرين
أنشئ صفحة أرشيف مدونة تتضمن:
- تنقل تفصيلي يعرض: الرئيسية > المدونة > 2024 > يناير
- فاصل مخصص للتنقل التفصيلي (>)
- مكون ترقيم مع 10 صفحات
- يجب أن تكون الصفحة الحالية الصفحة 5 (حالة نشطة)
- قم بتضمين علامات الحذف "..." بين الصفحات 7 و 10
- محاذاة الترقيم للوسط
- استخدم أسهم الأيقونات لأزرار السابق/التالي
- أضف تسميات ARIA المناسبة لإمكانية الوصول