تخصيص رمز الفاصل بالمتغيرات | مسار التصفح Breadcrumbs في بوتستراب 5

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

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

يعتمد Bootstrap 5 المتغير المحلي --bs-breadcrumb-divider لضبط شكل الفاصل بين مستويات المسار (وقيمته الافتراضية "/"). بفضل هذا التصميم العصري، يمكنك تغيير الرمز الفاصل إلى علامة أكبر من > أو سهم › أو شرطة، أو حتى إزالته تماماً بتمرير سلسلة فارغة '' عبر خاصية style على وسم <nav> دون كتابة قاعدة CSS خارجية واحدة!

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

مخطط تخصيص فواصل مسار التصفح بالمتغير --bs-breadcrumb-divider وأيقونات SVG المدمجة ودعم RTL

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

HTML

<nav style="--bs-breadcrumb-divider: '>';"
  aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Docs</a></li>
    <li class="breadcrumb-item active"
      aria-current="page">Navigation</li>
  </ol>
</nav>

جرّب بنفسك

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

Custom Character Dividers تخصيص رمز الفاصل بالمتغيرات

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

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