Bootstrap

Bootstrap 4 Tabs

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

التاريخ

05 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1054

المواضيع

6
الشروحات chevron_left Bootstrap 4 Tabs chevron_left Bootstrap

Bootstrap 4 Tabs

</> Bootstrap 4 Tabs

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

Result

يظهر الكود بهذا الشكل على المتصفح

<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

يظهر الكود بهذا الشكل على المتصفح

<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

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

</> Pills with Dropdown

<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

يظهر الكود بهذا الشكل على المتصفح

<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


HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

يظهر الكود بهذا الشكل على المتصفح

<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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.