شرح صفوف ومحتوى الفقرة
عند بناء واجهات عربية باتجاه dir="rtl" مع ملف bootstrap.rtl.min.css، ينعكس تدفق عناصر .breadcrumb المرنة تلقائياً ليبدأ المسار من أقصى اليمين بالصفحة الرئيسية ويتدرج نحو اليسار وصولاً للصفحة الحالية، كما تُضبط الحواشي المنطقية للفاصل عبر float: right وpadding-left داخل النسخة العربية الرسمية.
وانتبه لتفصيل بصري دقيق في الواجهات الثنائية اللغة: إذا استخدمت سهماً نصياً أو أيقونة Chevron SVG مخصصة بدلاً من الشرطة المائلة، وجّه رأس السهم لليمين › في الإنجليزية LTR، ووجّهه لليسار ‹ في العربية RTL حتى يتطابق اتجاه السهم مع اتجاه عين القارئ!
جدول مرجعي لبنية ومتغيرات مسار التصفح (Breadcrumbs Reference)
| العنصر / المتغير | الدور الوظيفي | ملاحظة الإتاحة والعربية RTL |
|---|---|---|
<nav aria-label="breadcrumb"> | المعلم الدلالي المحيط بالمسار | يميز المسار عن شريط التنقل الرئيسي لقارئ الشاشة |
<ol class="breadcrumb"> | قائمة مرتبة لعناصر المسار | تعكس التسلسل الأبوي الحقيقي لصفحات الموقع |
.breadcrumb-item.active | تمييز عنصر الصفحة المفتوحة حالياً | يُرفق بـ aria-current="page" بدون رابط ذاتي |
--bs-breadcrumb-divider | تخصيص رمز أو أيقونة الفاصل | استخدم ‹ في العربية RTL و› في الإنجليزية LTR |
--bs-breadcrumb-divider-color | تحديد لون الفاصل | يضمن تبايناً واضحاً في الوضعين الفاتح والداكن |
<nav style="--bs-breadcrumb-divider: '‹';"
aria-label="breadcrumb" dir="rtl">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active"
aria-current="page">Breadcrumbs</li>
</ol>
</nav>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت بناء مسارات التصفح الدلالية Breadcrumbs في Bootstrap 5.3 باستخدام nav وol، وتمييز الصفحة الحالية بـ aria-current="page"، وتخصيص الفواصل بالرموز النصية وأيقونات SVG المدمجة، وضبط الاتجاه العربي RTL. الخطوة التالية: انتقل الآن إلى الدرس التاسع والأربعين لإتقان شريط ترقيم الصفحات Pagination لتقسيم الجداول والقوائم الطويلة بأزرار متجاوبة ومتاحة.