شرح صفوف ومحتوى الفقرة
باستخدام جافاسكريبت القياسية الصرفة دون أي اعتماد على jQuery، يمكنك فتح أي تبويب برمجياً عبر استدعاء bootstrap.Tab.getOrCreateInstance(triggerEl).show()؛ وهي مهارة عملية لبناء معالجات الخطوات المتتالية أو فتح تبويب معين بناءً على رابط الصفحة.
كما يطلق بوتستراب أحداث دورة حياة دقيقة على أزرار التبويبات مثل show.bs.tab القابل للإلغاء قبل التبديل، وshown.bs.tab بعد اكتمال الانتقال البصري؛ حيث يشير event.target إلى التبويب الجديد بينما يحتفظ event.relatedTarget بالتبويب السابق.
| الكلاس أو الواجهة البرمجية | الوظيفة | الشرط الأساسي |
|---|---|---|
.nav-tabs و.nav-pills | تبويبات مؤطرة أو أزرار كبسولية | يُدمجان مع الحاوية الأساسية .nav |
.nav-underline | شريط الخط السفلي الحديث في BS 5.3 | يعتمد متغير الفجوة --bs-nav-underline-gap |
data-bs-toggle="tab" | تبديل اللوحات تصريحياً بدون كود | يقترن بسمة الهدف data-bs-target="#id" |
.tab-content و.tab-pane.fade | حاوية ولوحات العرض المتبدلة | تحتاج اللوحة الأولى إلى .show.active |
bootstrap.Tab.getOrCreateInstance() | التحكم البرمجي بـ Vanilla JS | استدعاء .show() على زر المشغل |
shown.bs.tab | حدث اكتمال إظهار التبويب | يوفر event.target وevent.relatedTarget |
<button id="goSpecsBtn" class="btn btn-sm btn-primary mb-2">
Open Specs Tab via JS
</button>
<div id="tabLog" class="small text-muted">Ready</div>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تصميم أشرطة التبويبات الكلاسيكية والكبسولية والخط السفلي الحديث في بوتستراب 5.3، ودمج القوائم المنسدلة، وتبديل لوحات المحتوى بأدوار الإتاحة الكاملة والتحكم البرمجي بـ Vanilla JS. الخطوة التالية: انتقل الآن إلى درس «شريط التنقل Navbar في بوتستراب 5» لبناء أشرطة المواقع المتجاوبة وقوائم الهاتف المطوية والمنزلقة.