انتقل إلى محتوى الدرس

ابدأ رحلتك

الدرس 25

دورة Bootstrap

Bootstrap 4 Tabs

ستتعلم في هذا الدرس عمل ال tabs وهي نواع من انواع ال navs ولكل تتنقل بين tabs في نفس الصفحة باستخدام ال Bootstrap

ابدأ التعلّم استكشف الأمثلة

أقسام الدرس: 6
الأمثلة: 6
اللغة: العربية
تاريخ النشر: غير محدد
المشاهدات: 2,523

في هذا الدرس 6تصفّح المواضيع

Bootstrap 4 Tabs

قم بتفعيل ال Tabs عن طريق اضافة ال nav-tabs class مع ال nav وقم باضافة ال active مع الصفحة الحالية

Result

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a> 
  </li>
</ul>

جرّب بنفسك

Pills

قم بتفعيل ال Pills عن طريق اضافة ال nav-pills class مع ال nav وقم باضافة ال active مع الصفحة الحالية

Result

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
</ul>

جرّب بنفسك

Justified Tabs-pills

للتحكم في محاذاة ال Tabs-Pills استخدم nav-justified class يكون ال width متساوي في جميع ال tabs

HTML

<ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
</ul>

جرّب بنفسك

Pills with Dropdown

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
<li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a></div>
    </li>
</ul>

جرّب بنفسك

Tabs with Dropdown

Result

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </li>
</ul>

جرّب بنفسك

Toggleable - Dynamic Tabs

لتفعيل ال tabs toggleable قم باضافة ال data-toggle attribute مع ال value tab لكلك link, بعد ذلك قم باضافة tab-pane class مع unique ID - اسم مختلف لل id لكل tab قم بالحاقهم بال div الزي قمت باضافة له tab-content class

Result

HTML

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

جرّب بنفسك