Bootstrap/navs

تعرَّف على مكوِّن عناصر التنقّل Navigation في إطار العمل Bootstrap وكيفيّة تضمينها في صفحات الويب.

عناصر التنقّل القاعديّة

تتشارك عناصر التنقّب المتوفّرة في إطار العمل Bootstrap الوسوم والأنماط العامّة، بدْءًا من الصنف ‎.nav إلى حالتيْ النشاط والتعطيل. بدِّل بين الأصناف المعدِّلة لتغيير كلّ نمط.

يُبنى مكوِّن ‎.nav الأساسيّ باستخدام تخطيط Flexbox ويوفّر أساسًا متينًا لبناء مكوِّنات التنقّل بأنواعها. يتضمّن هذا الصنف تعديلاتٍ على بعض الأنماط (للعمل مع القوائم)، وحاشيّات للروابط لتوسيع المساحة التي يمكن النقر عليها وأنماط تعطيل أساسيّة.

ملحوظة: لا يتضمّن صنف ‎.nav القاعديّ أي صنف لحالة النشاط (‎.active). تحتوي الأمثلة التاليّة على هذا الصنف من أجل توضيح أنّه لا يتسبب في تطبيق تنسيقات خاصّة.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">مُعطّل</a>
  </li>
</ul>

تُطبَّق أصناف التنقّل على جميع العناصر، لذا يمكن أن تحصُل على مرونة كبيرة في الوسوم التي تستخدمها. استخدم عناصر <ul> كما في المثال السابق أو عنصُرًا مُخصَّصًا، على سبيل المثال عنصُر <nav>. بما أنّ الصنف ‎.nav يُطبِّق الخاصيّة display: flex فإنّ روابط <nav> تتصرّف بنفس سلوك العناصر التي يُطبَّق عليها الصنف ‎.nav-item، لكن بدون عناصر HTML إضافيّة.

<nav class="nav">
  <a class="nav-link active" href="#">نشط</a>
  <a class="nav-link" href="#">رابط</a>
  <a class="nav-link" href="#">رابط</a>
  <a class="nav-link disabled" href="#">مُعطّل</a>
</nav>

التنسيقات المتوفّرة

عدِّل على تنسيق الصنف ‎.nav باستخدام الأصناف المعدِّلة والأدوات. امزج بين التنسيقات حسب الحاجة أو أنشئ أنماطًا خاصة.

المحاذاة الأفقيّة

غيّر المحاذاة الأفقيّة لعناصر التنقّل باستخدام أدوات Flexbox. تُحاذى عناصر التنقّل مبدئيًّا إلى اليسار، إلّا أنّه يمكن بسهولة تغيير محاذاتها إلى اليمين أو الوسط.

• التوسيط بالصنف ‎.justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">مُعطّل</a>
  </li>
</ul>

• المحاذاة إلى اليمين بالصنف ‎.justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">مُعطّل</a>
  </li>
</ul>

المحاذاة العموديّة

يمكن تغيير المحاذاة إلى عموديّة باستخدام الصنف الخدميّ ‎.flex-column؛ كما يمكن جعل المحاذاة عموديةً في بعض أطر العرض فقط دون البقيّة باستخدام التنويعات المتجاوبة على الصنف (مثلًا : ‎.flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">مُعطّل</a>
  </li>
</ul>

يمكن دائما محاذاة عناصر التنقّل عموديًّا بدون استخدام عناصر القوائم (<ul>).

<nav class="nav flex-column">
  <a class="nav-link active" href="#">نشط</a>
  <a class="nav-link" href="#">رابط</a>
  <a class="nav-link" href="#">رابط</a>
  <a class="nav-link disabled" href="#">مُعطّل</a>
</nav>

التبويبات Tabs

خذ واحدًا من عناصر التنقلّ الأساسيّة الموجودة في الأمثلة السابقة وأضف إليها الصنف ‎.nav-tabs لتحصُل على واجهة بتبويبات. اعتمد على هذه التبويبات لإنشاء منطقة مُبوَّبة باستخدام مُلحَق JavaScript الخاصّ بالتبويبات (أسفل هذه الصفحة).

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">مُعطّل</a>
  </li>
</ul>

أقراص على عناصر التنقّل

خذ شفرة HTML السابقة نفسها وطبّق الصنف ‎.nav-pills بدلًا من ‎.nav-tabs للحصول على أقراص حول عناصر التنقّل:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">مُعطَّل</a>
  </li>
</ul>

ملْء عناصر التنقّل وتسويّتها

افرض تمدّد عناصر التنقّل على كامل العرَض المتوفّر باستخدام صنف معدِّل أو اثنيْن. طبّق الصنف لملْء المساحة المتوفّرة كاملةً بالتناسب بين العناصر ‎.nav-item. لاحظ في المثال التالي أنّ المساحة الأفقيّة مشغولة بالكامل، إلّا عناصر التنقّل ليس لها نفس العرض.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط تنقّل طويل</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">مُعطَّل</a>
  </li>
</ul>

تأكّد عند استخدام قوائم تنقّل تعتمد على المكوِّن <nav> من تطبيق الصنف ‎.nav-item على الروابط.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">نشط</a>
  <a class="nav-item nav-link" href="#">رابط</a>
  <a class="nav-item nav-link" href="#">رابط</a>
  <a class="nav-item nav-link disabled" href="#">مُعطَّل</a>
</nav>

استخدم الصنف ‎.nav-justified للحصول على عناصر تنقّل متساويّة العرض. تُملَأ المساحة المتوفّرة أفقيًّا كاملةً، بحيث تكون جميع العناصر متساويّة العرض، بخلاف‎.nav-fill أعلاه.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">نشط</a>
  <a class="nav-link" href="#">رابط تنقّل طويل</a>
  <a class="nav-link" href="#">رابط</a>
  <a class="nav-link disabled" href="#">مُعطَّل</a>
</nav>

تأكّد، على نحو مشابه لمثال ‎.nav-fill السابق، من تطبيق الصنف ‎.nav-item على الروابط عند استخدام قوائم تنقّل تعتمد على المكوِّن <nav>.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">نشط</a>
  <a class="nav-item nav-link" href="#">رابط</a>
  <a class="nav-item nav-link" href="#">رابط</a>
  <a class="nav-item nav-link disabled" href="#">مُعطَّل</a>
</nav>

استخدام أدوات Flexbox

ضع في الحسبان استخدام سلسلة من أدوات Flex إنْ احتجت إلى تنويعات متجاوبة من عناصر التنقّل. على الرغم من أنّ هذه الأدوات تتطلّب شفرة أكثر، إلّا أنّها توفّر تخصيصًا عاليًّا على مختلف النقاط الحديّة. تتكدَّس عناصر التنقّل رأسيًّا - في المثال أدناه - في النقطة الحديّة الصغيرة جدًّا، ثم تتكيّف في مُخطَّط أفقيّ يملأ العرض المتوفّر ابتداءً من النقطة الحديّة الصغيرة.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">نشط</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">رابط</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">رابط</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">مُعطَّل</a>
</nav>

سهولة الوصول

تأكّد عند استخدام عناصر التنقّل لإنشاء شريط تنقّل من إضافة الخاصيّة role="navigation"‎ إلى الحاويّة الأعلى الأكثر دلالة، أو غلِّف جميع مكوِّنات التنقّل بالوسم <nav>. لا تضف الدّور (role="navigation"‎) إلى عنصُر القائمة (<ul>) إذْ يمنع ذلك قارئات الشاشة من عدّها قائمة فعليّة.

يُرجَى ملاحظة أنّه يجب ألّا تُطبَّق الخاصيّة role="tablist"‎، أو role="tab"‎ أو role="tabpanel"‎ على شرائط التنقّل حتى ولو كانت تُنسَّق بصريًّا على أنّها تبويبات (بالصنف ‎.nav-tabs). لا تتناسب خاصيّات سهولة الوصول المذكورة إلّا مع الواجهات ذات التبويبات الديناميكيّة على النحو المشروح في ممارسات معيار WAI ARIA. راجع فقرة مُلحَق JavaScript في هذه الصفحة للحصول على مثال على واجهة ذات تبويبات ديناميكيّة.

استخدام القوائم المنسدلة

أضف قوائم منسدلة إلى عناصر التنقّل بقيليل من وسوم HTML الإضافيّة ومُلحَق JavaScript في مكوِّن القوائم المنسدلة.

تبويبات بقوائم منسدلة

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">قائمة منسدلة</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">أجراء</a>
      <a class="dropdown-item" href="#">إجراء آخر</a>
      <a class="dropdown-item" href="#">أمر آخر هنا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">رابط منفصل</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">مُعطَّل</a>
  </li>
</ul>

عناصر تنقّل على شكل أقراص وذات قوائم منسدلة

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">نشط</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">قائمة منسدلة</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">إجراء</a>
      <a class="dropdown-item" href="#">إجراء آخر</a>
      <a class="dropdown-item" href="#">إجراء آخر هنا</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">رابط منفصل هنا</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">رابط</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">مُعطَّل</a>
  </li>
</ul>

ملحَق JavaScript

استخدم مُلحَق JavaScript - ضمِّنه منفردًا أو عبر ملفّ bootstrap.js مُجمَّع - لتمديد تبويبات وأقراص التنقّل لإنشاء لوحات محتوى مُبوَّب، واستخدام قوائم مندسلة لذلك عند الحاجة.

يتطلّب مُلحَق JavaScript الملفّ util.js، لذا لا تنس تضمينه إنْ كنت تبني ملفّات JavaScript من المصدر.

تتطلّب الواجهات ذات التبويبات الديناميكيّة تضمين الخاصيّات role="tablist"‎، وrole="tab"‎، وrole="tabpanel"‎؛ وخاصيّات aria-‎ إضافيّة حتى يتسنّى نقلُ بنيتها، ووظيفتها وحالتها الراهنة إلى مستخدمي التقنيّات المساعدة (مثل قارئات الشاشة).

يُرجى ملاحظة أنّ الواجهات ذات التبويبات الديناميكيّة يجب ألّا تتضمّن قوائم منسدلة إذ يتسبّب ذلك في مشاكل في ما يتعلّق بقابليّة الاستخدام وسهولة الوصول. في ما يتعلّق بقابليّة الاستخدام فإنّ كون العنصُر الذي أدّى لعرض التبويب الحالي غير مرئيّ مباشرةً (لأنّه داخل قائمة منسدلة مُغلقة) قد يتسبّب في ارتباك الزائر. بالنسبة لسهولة الوصول فإنّه لا توجد حاليًّا طريقة حسّاسة لربط هذه البنية وشبيهاتها بنمط في معيار WAI ARIA، ممّا يعني أنّه لا يمكن جعلها - بسهولة - مفهومةً لمستخدمي التقنيّات المساعدة.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">الرئيسيّة</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">الملفّ الشخصيّ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">الاتّصال</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">محتوى التبويب "الرئيسيّة"</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">محتوى التبويب "الملفّ الشخصيّ"</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">محتوى التبويب "الاتّصال"</div>
</div>

تعمل الواجهات ذات التبويبات الديناميكيّة مع عناصر القوائم (<ul>) كما في المثال أعلاه، كما تعمل مع أي عنصُر من إنشائك. يُرجَى ملاحظة أنّه عند استخدام عناصر <nav> فيتوجّب ألّا تضيف إليها الخاصيّة role="tablist"‎ إذ تبطل دور العنصُر الأساسيّ الذي هو أداة تنقّل. اختر، بدلًا من ذلك، عنصُرًا آخر (<div> في المثال أدناه) وغلّفه بالعنصُر <nav>.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">الرئيسيّة</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">الملفّ الشخصيّ</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">الاتّصال</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">محتوى التبويب "الرئيسيّة"</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">حتوى التبويب "لملفّ الشخصيّ"</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">حتوى التبويب "الاتّصال"</div>
</div>

يعمل مُلحَق التبويبات كذلك مع الأقراص على أزرار التنقّل.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">الرئيسيّة</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">الملفّ الشخصيّ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">الاتّصال</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">محتوى التبويب "الرئيسيّة"</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">محتوى التبويب "الملفّ الشخصيّ"</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">محتوى التبويب "الاتّصال"</div>
</div>

كما يعمل مع التبويبات العموديّة.

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">الرئيسيّة</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">الملفّ الشخصيّ</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">الرسائل</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">الإعدادات</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">تبويب الرئيسيّة</div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">تبويب الملفّ الشخصيّ</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">تبويب الرسائل</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">تبويب الإعدادات</div>
</div>

استخدام خاصيّات البيانات

يمكن تفعيل تبويب أو زرّ على شكل قرص بدون كتابة أيّ شفرة JavaScript بتطبيق الخاصيّة data-toggle="tab"‎ أو data-toggle="pill"‎ على التوالي على العنصُر. استخدم هذه الخاصيّة على الصنف ‎.nav-tabs أو ‎.nav-pills.

<!-- تبويبات التنقّل -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">الرئيسيّة</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">الملفّ الشخصيّ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">الرسائل</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">الإعدادات</a>
  </li>
</ul>

<!-- محتوى التبويبات -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">الرئيسيّة</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">الملفّ الشخصيّ</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">الرسائل</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">الإعدادات</div>
</div>

كتابة شفرة JavaScript مُخصَّصة

يمكن تفعيل التبويبات بكتابة شفرة JavaScript مُخصَّصة (يجب تفعيل كلّ تبويب منفردا):

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

توجد طرق عدّة لتفعيل التبويبات:

$('#myTab a[href="#profile"]').tab('show') // تحديد التبويب باسمه
$('#myTab li:first-child a').tab('show') // تحديد التبويب الأوّل
$('#myTab li:last-child a').tab('show') // تحديد التبويب الأخير
$('#myTab li:nth-child(3) a').tab('show') // تحديد التبويب الثالث

تأثير الخفوت

أضف الصنف ‎.fade لكلّ لوحة محتوى تبويب (‎.tab-pane) لجعله يبدو خافتًا قبل اكتمال ظهوره. يجب أن يُطبَّق على اللوحة الأولى الصنف ‎.show لجعل محتواها الابتدائي مرئيّا.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

التوابع

تنبيه: التوابع غير المتزامنة والانتقالات

توابع واجهة التطبيقات جميعها غير متزامنة وتشغّل انتقالا. تعود هذه التوابع لشفرة الاستدعاء مباشرةً بعد بدء الانتقال، لكن قبل أن ينتهي. علاوةً على ذلك، يُتجاهل استدعاء تابع على مكوِّن في طور الانتقال.

راجع توثيق JavaScript في Bootstrap للمزيد من المعلومات.

‎$().tab

تنشّط عنصُر تبويب وحاويّة محتوى. يجب أن يُطبَّق التابع على عنصُر حاويّة ضمن كائن المستند إمّا بواسطة الخاصيّة data-target أو href.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">الرئيسيّة</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">الملفّ الشخصيّ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">الرسائل</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">الإعدادات</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

‎.tab('show')

تختار التبويب المُعطى وتُظهر محتوى اللوحة الموافقة له. يُلغى تحديد أي تبويب كان مُحدَّدًا ويُخفَى محتوى اللوحة الموافقة له. يعود إلى المستدعِي قبل أن تُعرَض لوحة المحتوى (أيّ قبل وقوع الحدث shown.bs.tab).

$('#someTab').tab('show')

‎.tab('dispose')

يحذف عنصُر التبويب.

الأحداث

تنطلق الأحداث أثناء عرض تبويب جديد حسب الترتيب التالي:

1. hide.bs.tab (من التبويب النشط حاليّا)
2. show.bs.tab (من التبويب المرغوب في عرضه)
3. hidden.bs.tab (من التبويب النشط سابقًا، نفس الذي ينطلق منه الحدث hide.bs.tab).
4. shown.bs.tab (من التبويب النشط حديثًا، نفس الذي ينطلق منه الحدث show.bs.tab).

إنْ لم تكن هناك تبويبات نشطة فلن يُطلَق الحدثانhide.bs.tab و hidden.bs.tab.

نوع الحدث	الوصف
show.bs.tab	يُطلَق هذا الحدَث عند بدْء عرض التبويب، لكن قبل أنْ يصبح التبويب الجديد معروضًا للزائر. استخدم الخاصيّتيْن event.target و event.relatedTarget لاستهداف التبويب النشط حاليًّا والتبويب النشط سابقًا (إنْ وُجِد) على التوالي.
shown.bs.tab	يُطلَق هذا الحدث بعد اكتمال عرض التبويب. استخدم الخاصيّتيْن event.target و event.relatedTarget لاستهداف التبويب النشط حاليًّا والتبويب النشط سابقًا (إنْ وُجِد) على التوالي.
hide.bs.tab	يُطلَق هذا الحدث عندما يوجد تبويب جديد لعرضه (وبالتالي يوجد تبويب لإخفائه). استخدم الخاصيّتيْن event.target وevent.relatedTarget لاستهداف التبويب النشط حاليًّا والتبويب الذي سيكون نشطًا قريبًا على التوالي.
hidden.bs.tab	يُطلَق هذا الحدث عندما يُعرَض تبويب جديد (وبالتالي إخفاء التبويب النشط سابقا). استخدم الخاصيّتيْن event.target و event.relatedTarget لاستهداف التبويب النشط سابقًا والتبويب النشط حاليًّا على التوالي.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // التبويب النشط حديثا
  e.relatedTarget // التبويب النشط سابقا
})

مصادر

• صفحة Navs في توثيق Bootstrap.