Bootstrap 4 Tabs
ستتعلم في هذا الدرس عمل ال tabs وهي نواع من انواع ال navs ولكل تتنقل بين tabs في نفس الصفحة باستخدام ال 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
Justified 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
