التنقلات وعلامات التبويب

وثائق وأمثلة عن كيفية استخدام مكونات التنقل المضمنة في Bootstrap.

على هذه الصفحة

Base nav

التنقل المتاح في Bootstrap هو مشاركة العلامات والأنماط العامة ، من .navالفئة الأساسية إلى الحالة النشطة والمعطلة. فئات معدل التبديل للتبديل بين كل نمط.

تم بناء المكون الأساسي .navباستخدام flexbox ويوفر أساسًا قويًا لبناء جميع أنواع مكونات التنقل. يتضمن بعض تجاوزات الأنماط (للعمل مع القوائم) ، وبعض حشوة الارتباط لمناطق النتائج الأكبر ، والتصميم الأساسي المعطل.

المكون الأساسي .navلا يتضمن أي .activeحالة. تتضمن الأمثلة التالية الفصل الدراسي ، وذلك أساسًا لإثبات أن هذه الفئة المعينة لا تؤدي إلى أي تصميم خاص.

لنقل الحالة النشطة إلى التقنيات المساعدة ، استخدم aria-currentالسمة - باستخدام pageالقيمة للصفحة الحالية ، أو trueللعنصر الحالي في مجموعة.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

يتم استخدام الفصول الدراسية طوال الوقت ، لذلك يمكن أن يكون ترميزك مرنًا للغاية. استخدم <ul>s مثل أعلاه ، <ol>إذا كان ترتيب العناصر الخاصة بك مهمًا ، أو قم بتدوير العناصر الخاصة بك <nav>بعنصر. نظرًا لأن .navالاستخدامات display: flex، تعمل روابط التنقل بنفس سلوك عناصر التنقل ، ولكن بدون الترميز الإضافي.

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

الأنماط المتوفرة

تغيير نمط .navمكون s مع المعدلات والأدوات المساعدة. امزج وطابق حسب الحاجة ، أو اصنع بنفسك.

محاذاة أفقية

قم بتغيير المحاذاة الأفقية للتنقل باستخدام أدوات flexbox المساعدة . بشكل افتراضي ، يتم محاذاة التنقل إلى اليسار ، ولكن يمكنك بسهولة تغييرها إلى الوسط أو المحاذاة إلى اليمين.

تتمحور مع .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

بمحاذاة اليمين مع .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

عمودي

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

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

كما هو الحال دائمًا ، يمكن التنقل العمودي بدون <ul>s أيضًا.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

نوافذ التبويب

يأخذ التنقل الأساسي من الأعلى ويضيف .nav-tabsالفئة لإنشاء واجهة مبوبة. استخدمها لإنشاء مناطق قابلة للجدولة من خلال المكون الإضافي لعلامة التبويب JavaScript .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

حبوب الدواء

خذ نفس HTML ، ولكن استخدم .nav-pillsبدلاً من ذلك:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

املأ وبرر

فرض .navمحتوياتك لتوسيع العرض المتاح بالكامل بإحدى فئتي المعدلات. لملء كل المساحة المتاحة بشكل متناسب مع مساحتك .nav-item، استخدم .nav-fill. لاحظ أن كل المساحة الأفقية مشغولة ، ولكن ليس كل عنصر تنقل له نفس العرض.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

عند استخدام ميزة التنقل القائمة على <nav>التنقل ، يمكنك حذفها بأمان .nav-itemكما .nav-linkهو مطلوب فقط <a>لعناصر التصميم.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

للعناصر متساوية العرض ، استخدم .nav-justified. ستشغل روابط التنقل كل المساحة الأفقية ، ولكن على عكس ما .nav-fillسبق ، سيكون كل عنصر تنقل بنفس العرض.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

على غرار .nav-fillالمثال باستخدام <nav>التنقل القائم على.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

العمل مع المرافق المرنة

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

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

فيما يتعلق بإمكانية الوصول

إذا كنت تستخدم التنقلات لتوفير شريط تنقل ، فتأكد من إضافة role="navigation"الحاوية الرئيسية الأكثر منطقية لـ <ul>، أو قم بلف <nav>عنصر حول التنقل بالكامل. لا تقم بإضافة الدور إلى <ul>نفسه ، لأن هذا سيمنع الإعلان عنه كقائمة فعلية بواسطة التقنيات المساعدة.

لاحظ أن أشرطة التنقل ، حتى لو تم تصميمها بصريًا كعلامات تبويب مع الفصل .nav-tabs، يجب عدم منحها role="tablist"أو سماتها. هذه مناسبة فقط للواجهات المبوبة الديناميكية ، كما هو موضح في ممارسات التأليف WAI ARIA . راجع سلوك JavaScript للواجهات المبوبة الديناميكية في هذا القسم للحصول على مثال. السمة ليست ضرورية في واجهات المبوبة الديناميكية لأن JavaScript الخاص بنا يعالج الحالة المحددة عن طريق الإضافة في علامة التبويب النشطة.role="tab"role="tabpanel" aria-currentaria-selected="true"

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

أضف القوائم المنسدلة مع القليل من HTML الإضافي والقوائم المنسدلة JavaScript plugin .

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

حبوب مع قوائم منسدلة

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

ساس

المتغيرات

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

سلوك JavaScript

استخدم ملحق JavaScript الخاص بعلامة التبويب - قم بتضمينه بشكل فردي أو من خلال bootstrap.jsالملف المترجم - لتوسيع علامات التبويب والأقراص الملاحية الخاصة بنا لإنشاء أجزاء قابلة للجدولة من المحتوى المحلي.

تتطلب الواجهات الديناميكية المبوبة ، كما هو موضح في ممارسات تأليف WAI ARIA ، سمات إضافية من أجل نقل هيكلها ووظائفها وحالتها الحالية إلى مستخدمي التقنيات المساعدة (مثل قارئات الشاشة). كأفضل ممارسة ، نوصي باستخدام عناصر لعلامات التبويب ، حيث إنها عناصر تحكم تؤدي إلى تغيير ديناميكي ، بدلاً من الروابط التي تنتقل إلى صفحة أو موقع جديد.role="tablist"role="tab"role="tabpanel"aria-<button>

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

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة تبويب الصفحة الرئيسية. سيؤدي النقر فوق علامة تبويب أخرى إلى تبديل رؤية هذه علامة التبويب التالية. تقوم علامة التبويب JavaScript بتبديل الفئات للتحكم في رؤية المحتوى وتصميمه. يمكنك استخدامه مع علامات التبويب ، والأقراص ، وأي .navتنقل آخر مزود بالطاقة.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </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">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </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" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </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>

ومع الحبوب العمودية.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </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>
</div>

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

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

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<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 (يجب تنشيط كل علامة تبويب على حدة):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

يمكنك تنشيط علامات التبويب الفردية بعدة طرق:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

تأثير التلاشي

لجعل علامات التبويب تتلاشى ، أضف .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>

طُرق

الطرق غير المتزامنة والانتقالات

جميع طرق API غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .

راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .

constructor

ينشط عنصر علامة تبويب وحاوية محتوى. يجب أن تحتوي علامة التبويب على سمة data-bs-target، أو في حالة استخدام رابط ، hrefتستهدف عقدة حاوية في DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </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>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

تبين

يحدد علامة التبويب المحددة ويظهر الجزء المرتبط بها. تصبح أي علامة تبويب أخرى تم تحديدها مسبقًا غير محددة ويتم إخفاء الجزء المقترن بها. يعود إلى المتصل قبل أن يتم عرض جزء علامة التبويب بالفعل (أي قبل shown.bs.tabوقوع الحدث).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

تخلص

يدمر علامة تبويب عنصر.

getInstance

طريقة ثابتة تتيح لك الحصول على مثيل علامة التبويب المرتبط بعنصر DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

طريقة ثابتة تتيح لك الحصول على مثيل علامة التبويب المرتبط بعنصر DOM ، أو إنشاء مثيل جديد في حالة عدم تهيئته

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

الأحداث

عند إظهار علامة تبويب جديدة ، يتم تنشيط الأحداث بالترتيب التالي:

hide.bs.tab(في علامة التبويب النشطة الحالية)
show.bs.tab(في علامة التبويب التي سيتم عرضها)
hidden.bs.tab(في علامة التبويب النشطة السابقة ، نفس علامة التبويب الخاصة hide.bs.tabبالحدث)
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`لاستهداف علامة التبويب النشطة السابقة وعلامة التبويب النشطة الجديدة ، على التوالي.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})