في هذا الدرس 6تصفّح المواضيع
انطلاقاً من لبنة .nav التي أتقنتها في الدرس السابق، يكفي إلحاق كلاس واحد هو .nav-tabs لتحويل القائمة المجردة إلى شريط تبويبات كلاسيكي ذي خط سفلي متصل وإطار بارز يحيط بالتبويب النشط .active.
تمنحك الواجهات المبوبة القدرة على تنظيم المحتوى المترابط — مثل تفاصيل المنتج والمواصفات التقنية والمراجعات — داخل نفس المساحة البصرية دون إجبار الزائر على تمرير صفحة طويلة مرهقة.
لتبديل لوحات المحتوى لحظياً دون إعادة تحميل الصفحة، تربط إضافة التبويبات البرمجية في بوتستراب منطقتين متجاورتين:
- شريط المشغلات — أزرار تحمل السمة
data-bs-toggle="tab"أوdata-bs-toggle="pill"مع تحديد معرّف اللوحة الهدف عبرdata-bs-target="#paneId". - حاوية اللوحات
.tab-content— تضم عناصر.tab-paneمطابقة لمعرّفات الأهداف، ويُضاف الكلاس.fadeلكل لوحة لمنحها تلاشيًا بصرياً ناعماً، مع وضع.show.activeعلى اللوحة المفتوحة مبدئياً.
<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>تعتمد لوحات الإعدادات المتقدمة كثيراً على وضع أزرار كبسولية عمودية بجانب منطقة المحتوى عبر حاوية .d-flex .align-items-start تجمع عمود .nav.flex-column.nav-pills مع حاوية .tab-content.
ولتحقيق معايير الإتاحة القياسية للتبويبات التفاعلية، تتكامل ثلاثة أدوار معاً: إسناد role="tablist" للحاوية مع aria-orientation="vertical" في الوضع العمودي، وإسناد role="tab" مع aria-controls وaria-selected لكل زر، وإسناد role="tabpanel" مع aria-labelledby لكل لوحة، فيفعّل بوتستراب التنقل بمفاتيح الأسهم تلقائياً.
باستخدام جافاسكريبت القياسية الصرفة دون أي اعتماد على 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» لبناء أشرطة المواقع المتجاوبة وقوائم الهاتف المطوية والمنزلقة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Tab Pane (.tab-pane) لوحة محتوى التبويب
- حاوية محتوى فرعية داخل .tab-content تظهر عند تفعيل زر التبويب المرتبط بمعرّفها.
- للمراجعة
- 02 Underline Nav (.nav-underline) شريط التنقل ذو الخط السفلي
- نمط حديث في الإصدار 5.3 يميز التبويب النشط بمؤشر خط سفلي أنيق دون إطار صندوقي محيط.
- للمراجعة
- 03 WAI-ARIA Tablist Pattern ثلاثية إتاحة التبويبات
- التكامل القياسي بين أدوار tablist وtab وtabpanel لدعم قارئات الشاشة والتنقل بمفاتيح الأسهم.
- للمراجعة
- 04 Related Target (event.relatedTarget) العنصر المرتبط السابق
- خاصية في حدث التبويب تشير إلى زر التبويب الذي كان نشطاً مباشرةً قبل عملية التبديل.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 WAI مبادرة إتاحة الويب
- Web Accessibility Initiative
- مبادرة معيارية تحدد سلوك لوحة المفاتيح وأدوار الإتاحة القياسية لمكونات التبويبات التفاعلية.
- للمراجعة
- 02 DOM نموذج كائنات المستند
- Document Object Model
- شجرة عناصر الصفحة التي يبدل فيها كائن bootstrap.Tab كلاسي .active و.show لحظياً.
- للمراجعة
- 03 API واجهة برمجة التطبيقات
- Application Programming Interface
- الدوال والأحداث البرمجية التي يوفرها كائن bootstrap.Tab للتحكم بالتبويبات بجافاسكريبت.
- للمراجعة
- 04 UI واجهة المستخدم
- User Interface
- التصميم البصري المنظم في لوحات قابلة للتبديل السريع دون إعادة تحميل الصفحة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ شريط .nav.nav-underline يضم ثلاثة أزرار <button type="button"> مربوطة بسمة data-bs-toggle="tab" مع ثلاث لوحات .tab-pane.fade داخل .tab-content.
-
أضف زراً خارجياً يستدعي bootstrap.Tab.getOrCreateInstance(targetBtn).show() ويطبع معرّف التبويب الجديد والسابق عند وقوع حدث shown.bs.tab.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.