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

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

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

قاعدة الملاحة

التنقل المتاح في 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">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">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">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">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">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">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">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">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">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">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">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">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">Disabled</a>
</nav>

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

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

لاحظ أن أشرطة التنقل ، حتى لو تم تصميمها بصريًا كعلامات تبويب مع الفصل .nav-tabs، يجب عدم منحها role="tablist"أو سماتها. هذه مناسبة فقط للواجهات المبوبة الديناميكية ، كما هو موضح في نمط علامات تبويب دليل ممارسات التأليف 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">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">Disabled</a>
  </li>
</ul>

CSS

المتغيرات

تمت الإضافة في الإصدار 5.2.0

كجزء من نهج متغيرات CSS المتطور في Bootstrap ، تستخدم navs الآن متغيرات CSS المحلية في ، ولتحسين التخصيص .navفي الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass ، لذلك لا يزال تخصيص Sass مدعومًا أيضًا..nav-tabs.nav-pills

على .navالفئة الأساسية:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

على .nav-tabsفئة المعدل:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

على .nav-pillsفئة المعدل:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

متغيرات ساس

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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الملف المترجم - لتوسيع علامات التبويب والأقراص الملاحية الخاصة بنا لإنشاء أجزاء قابلة للجدولة من المحتوى المحلي.

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

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

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

للمساعدة في تلبية احتياجاتك ، يعمل هذا مع <ul>الترميز المستند إلى ، كما هو موضح أعلاه ، أو مع أي ترميز "رمي بنفسك" تعسفيًا. لاحظ أنه إذا كنت تستخدمه <nav>، فلا يجب أن تضيف role="tablist"إليه مباشرةً ، لأن هذا سيتجاوز الدور الأصلي للعنصر كمعلم تنقل. بدلاً من ذلك ، قم بالتبديل إلى عنصر بديل (في المثال أدناه ، بسيط <div>) والتفاف <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 Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

يعمل المكوِّن الإضافي لعلامات التبويب أيضًا مع الأقراص.

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

ومع الحبوب العمودية. من الناحية المثالية ، بالنسبة لعلامات التبويب العمودية ، يجب عليك أيضًا إضافتها aria-orientation="vertical"إلى حاوية قائمة علامات التبويب.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

إمكانية الوصول

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

تماشياً مع نمط ممارسات تأليف ARIA ، تتلقى علامة التبويب النشطة حاليًا تركيز لوحة المفاتيح فقط. عند تهيئة المكون الإضافي JavaScript ، سيتم تعيينه tabindex="-1"على جميع عناصر تحكم علامة التبويب غير النشطة. بمجرد التركيز على علامة التبويب النشطة حاليًا ، تقوم مفاتيح المؤشر بتنشيط علامة التبويب السابقة / التالية ، مع تغيير المكون الإضافي المتجولtabindex وفقًا لذلك. ومع ذلك ، لاحظ أن مكون JavaScript الإضافي لا يميز بين قوائم علامات التبويب الأفقية والرأسية عندما يتعلق الأمر بتفاعلات مفتاح المؤشر: بغض النظر عن اتجاه قائمة علامات التبويب ، ينتقل كل من المؤشر لأعلى ولليسار إلى علامة التبويب السابقة ، ويذهب المؤشر لأسفل ولليمين إلى علامة التبويب التالية.

بشكل عام ، لتسهيل التنقل عبر لوحة المفاتيح ، يوصى بجعل لوحات علامات التبويب نفسها قابلة للتركيز أيضًا ، ما لم يكن العنصر الأول الذي يحتوي على محتوى ذي معنى داخل لوحة علامة التبويب قابلاً للتركيز بالفعل. لا يحاول المكون الإضافي JavaScript التعامل مع هذا الجانب - عند الاقتضاء ، ستحتاج إلى جعل لوحات علامات التبويب الخاصة بك قابلة للتركيز بشكل صريح عن طريق إضافة tabindex="0"الترميز الخاص بك.

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

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

يمكنك تنشيط علامة تبويب أو التنقل على الأقراص دون كتابة أي 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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

عبر JavaScript

تمكين علامات التبويب القابلة للجدولة عبر JavaScript (يجب تنشيط كل علامة تبويب على حدة):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

طُرق

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

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

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

ينشط المحتوى الخاص بك كعنصر علامة تبويب.

يمكنك إنشاء مثيل جدولة مع المُنشئ ، على سبيل المثال:

const bsTab = new bootstrap.Tab('#myTab')

طريقة	وصف
`dispose`	يدمر علامة تبويب عنصر.
`getInstance`	الطريقة الثابتة التي تسمح لك بالحصول على مثيل علامة التبويب المرتبط بعنصر DOM ، يمكنك استخدامه على النحو التالي `bootstrap.Tab.getInstance(element)`:.
`getOrCreateInstance`	طريقة Static تُرجع مثيل علامة تبويب مرتبطًا بعنصر DOM أو تنشئ واحدًا جديدًا في حالة عدم تهيئته. يمكنك استخدامه على النحو التالي `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	يحدد علامة التبويب المحددة ويظهر الجزء المرتبط بها. تصبح أي علامة تبويب أخرى تم تحديدها مسبقًا غير محددة ويتم إخفاء الجزء المقترن بها. يعود إلى المتصل قبل أن يتم عرض جزء علامة التبويب بالفعل (أي قبل `shown.bs.tab`وقوع الحدث).

الأحداث

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

hide.bs.tab(في علامة التبويب النشطة الحالية)
show.bs.tab(في علامة التبويب التي سيتم عرضها)
hidden.bs.tab(في علامة التبويب النشطة السابقة ، نفس علامة التبويب الخاصة hide.bs.tabبالحدث)
shown.bs.tab(في علامة التبويب النشطة حديثًا المعروضة للتو ، نفس علامة التبويب الخاصة show.bs.tabبالحدث)

إذا لم تكن هناك علامة تبويب نشطة بالفعل ، فلن يتم تشغيل الأحداث hide.bs.tabو .hidden.bs.tab

نوع الحدث	وصف
`hide.bs.tab`	يتم تشغيل هذا الحدث عند عرض علامة تبويب جديدة (وبالتالي يتم إخفاء علامة التبويب النشطة السابقة). استخدم `event.target`و `event.relatedTarget`لاستهداف علامة التبويب النشطة الحالية وعلامة التبويب الجديدة التي ستصبح نشطة ، على التوالي.
`hidden.bs.tab`	يتم تشغيل هذا الحدث بعد عرض علامة تبويب جديدة (وبالتالي يتم إخفاء علامة التبويب النشطة السابقة). استخدم `event.target`و `event.relatedTarget`لاستهداف علامة التبويب النشطة السابقة وعلامة التبويب النشطة الجديدة ، على التوالي.
`show.bs.tab`	يتم تشغيل هذا الحدث في علامة التبويب ، ولكن قبل ظهور علامة التبويب الجديدة. استخدم `event.target`و `event.relatedTarget`لاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.
`shown.bs.tab`	يتم تشغيل هذا الحدث في علامة التبويب بعد عرض علامة التبويب. استخدم `event.target`و `event.relatedTarget`لاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.

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