انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: مسار التصفح Breadcrumbs في بوتستراب 5

Embedded SVG Dividers فواصل أيقونات SVG المدمجة

ابنِ مسارات تصفح Breadcrumbs دلالية ومتاحة في Bootstrap 5.3 باستخدام وسوم nav وol القياسية وتمييز الصفحة الحالية وتخصيص الفواصل بمتغيرات CSS وأيقونات SVG المدمجة ودعم العربية RTL.
3 صفوف تعليمية
بوتستراب 5
0 مشاهدة

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

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

لا يقتصر المتغير --bs-breadcrumb-divider على المحارف النصية فحسب؛ بل يقبل كذلك دالة url("data:image/svg+xml,...") لتضمين سهم فيكتوري حاد Chevron SVG يعمل فوراً دون انتظار تحميل ملفات خطوط خارجية، مع تلوينه برمز لوني مرشّح لروابط البيانات مثل %236c757d.

الصف 2 كود برمجي
HTML 
<nav class="svg-crumb" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Store</a></li>
    <li class="breadcrumb-item active"
      aria-current="page">Hardware</li>
  </ol>
</nav>
جرّب بنفسك
الصف 3 معاينة حية

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