تبديل لوحات المحتوى التفاعلية | التبويبات والأزرار الملاحية في بوتستراب 5

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

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

لتبديل لوحات المحتوى لحظياً دون إعادة تحميل الصفحة، تربط إضافة التبويبات البرمجية في بوتستراب منطقتين متجاورتين:

شريط المشغلات — أزرار تحمل السمة data-bs-toggle="tab" أو data-bs-toggle="pill" مع تحديد معرّف اللوحة الهدف عبر data-bs-target="#paneId".
حاوية اللوحات .tab-content — تضم عناصر .tab-pane مطابقة لمعرّفات الأهداف، ويُضاف الكلاس .fade لكل لوحة لمنحها تلاشيًا بصرياً ناعماً، مع وضع .show.active على اللوحة المفتوحة مبدئياً.

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

مخطط يوضح الربط التفاعلي وأدوار الإتاحة بين أزرار التبويبات ولوحات المحتوى في بوتستراب 5

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

HTML

<div class="nav nav-tabs" role="tablist">
  <button class="nav-link active" data-bs-toggle="tab"
    data-bs-target="#tab-a" type="button">Overview</button>
  <button class="nav-link" data-bs-toggle="tab"
    data-bs-target="#tab-b" type="button">Metrics</button>
</div>
<div class="tab-content p-3 border border-top-0">
  <div class="tab-pane fade show active" id="tab-a">A</div>
  <div class="tab-pane fade" id="tab-b">B</div>
</div>

جرّب بنفسك

الصف 4 معاينة حية

Dynamic Tab Content Panes تبديل لوحات المحتوى التفاعلية

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

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