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

Classic Tabbed Interfaces أشرطة التبويبات بكلاس nav-tabs

صمّم واجهات التبويبات التفاعلية في بوتستراب 5.3 عبر .nav-tabs و.nav-pills وشريط .nav-underline الحديث ولوحات المحتوى المتبدلة بـ Vanilla JS.
2 صفوف تعليمية
بوتستراب 5
0 مشاهدة

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

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

انطلاقاً من لبنة .nav التي أتقنتها في الدرس السابق، يكفي إلحاق كلاس واحد هو .nav-tabs لتحويل القائمة المجردة إلى شريط تبويبات كلاسيكي ذي خط سفلي متصل وإطار بارز يحيط بالتبويب النشط .active.

تمنحك الواجهات المبوبة القدرة على تنظيم المحتوى المترابط — مثل تفاصيل المنتج والمواصفات التقنية والمراجعات — داخل نفس المساحة البصرية دون إجبار الزائر على تمرير صفحة طويلة مرهقة.

الصف 2 كود برمجي
HTML 
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page"
      href="#">Details</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Specs</a>
  </li>
</ul>
جرّب بنفسك

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