Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

التنقل والتبويبات (Navs و tabs)

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

في هذه الصفحة

التنقل الأساسي (Base nav)

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

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

لا تتضمن الفئة .nav الأساسية أي حالة .active تتضمن الأمثلة التالية هذه الفئة، بشكل أساسي لتوضيح أن هذه الفئة المحددة لا تسبب أي تنسيق خاص.

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

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

تُستخدم الفئات (classes) في جميع أنحاء المكون، لذا يمكن أن تكون علامات التنسيق (markup) الخاصة بك مرنة للغاية. استخدم عناصر <ul> كما في المثال أعلاه، أو <ol> إذا كان ترتيب العناصر مهماً، أو قم بإنشاء تنسيقك الخاص باستخدام عنصر <nav>. وبما أن الفئة .nav تستخدم display: flex ، فإن روابط التنقل تتصرف بنفس طريقة عناصر التنقل، ولكن بدون علامات التنسيق الإضافية.

html 
<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" aria-disabled="true">Disabled</a>
</nav>

الأنماط المتاحة

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

محاذاة أفقية (Horizontal)

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

توسيط باستخدام .justify-content-center :

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

محاذاة لليمين باستخدام .justify-content-end:

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

رأسي (Vertical)

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

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

وكما هو الحال دائماً، يمكن أيضاً إنشاء تنقل رأسي بدون استخدام عناصر <ul>.

html 
<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" aria-disabled="true">Disabled</a>
</nav>

التبويبات (Tabs)

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

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

أقراص (Pills)

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

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

تسطير (Underline)

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

html 
<ul class="nav nav-underline">
  <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" aria-disabled="true">Disabled</a>
  </li>
</ul>

الملئ والمحاذاة (Fill and justify)

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

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

html 
<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" aria-disabled="true">Disabled</a>
</nav>

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

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

مشابه لمثال .nav-fill باستخدام تنقل يعتمد على <nav>.

html 
<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" aria-disabled="true">Disabled</a>
</nav>

العمل مع أدوات (flex)

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

html 
<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" aria-disabled="true">Disabled</a>
</nav>

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

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

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

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

أضف قوائم منسدلة باستخدام القليل من الـ HTML الإضافي وإضافة JavaScript للقوائم المنسدلة.

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

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

الأقراص مع القوائم المنسدلة (Pills)

html 
<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" aria-disabled="true">Disabled</a>
  </li>
</ul>

الـ (CSS)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

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

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

scss/_nav.scss 
--#{$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};

فيما يتعلق بـ (class) الفئة المعدِّلة .nav-tabs:

scss/_nav.scss 
--#{$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};

فيما يتعلق بـ (class) الفئة المعدِّلة .nav-pills:

scss/_nav.scss 
--#{$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};
تمت الإضافة في الإصدار v5.3.0

فيما يتعلق بـ (class) الفئة المعدِّلة .nav-underline:

scss/_nav.scss 
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};

Sass variables

scss/_variables.scss 
$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:           var(--#{$prefix}secondary-color);
$nav-link-focus-box-shadow:         $focus-ring-box-shadow;

$nav-tabs-border-color:             var(--#{$prefix}border-color);
$nav-tabs-border-width:             var(--#{$prefix}border-width);
$nav-tabs-border-radius:            var(--#{$prefix}border-radius);
$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color);
$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg);
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg;

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

$nav-underline-gap:                 1rem;
$nav-underline-border-width:        .125rem;
$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color);

سلوك الـ (JavaScript behavior)

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

This is some placeholder content the Home 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 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.

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> حوله.

<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>

تعمل الإضافات (plugins) الخاصة بالتبويبات أيضاً مع الأقراص (pills).

This is some placeholder content the Home 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 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.

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 Home 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 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.

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>

إمكانية الوصول (Accessibility)

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

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

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

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

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

يمكنك تنشيط تنقل التبويبات أو الأقراص (pills) دون كتابة أي 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)

لجعل التبويبات تتلاشى عند الظهور، أضف .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>

الطرق، الأساليب (Methods)

جميع دوال الـ API هي دوال غير متزامنة (asynchronous) وتبدأ عملية انتقال (transition). وهي تعود إلى المستدعي بمجرد بدء عملية الانتقال، ولكن قبل انتهائها. بالإضافة إلى ذلك، سيتم تجاهل أي استدعاء للدالة على مكوّن يمر حالياً بعملية انتقال. تعرف على المزيد في مستندات JavaScript الخاصة بنا.

يُنشط محتواك كعنصر تبويب.

يمكنك إنشاء مثيل (instance) للتبويب باستخدام المشيد (constructor)، على سبيل المثال:

const bsTab = new bootstrap.Tab('#myTab')
الأسلوبالوصف
disposeيقوم بتدمير تبويب العنصر.
getInstanceدالة ثابتة (Static method) تتيح لك الحصول على مثيل التبويب المرتبط بعنصر DOM، يمكنك استخدامها على النحو التالي: bootstrap.Tab.getInstance(element).
getOrCreateInstanceدالة ثابتة (Static method) تعيد مثيل تبويب مرتبط بعنصر DOM أو تنشئ مثيلاً جديداً في حال لم يتم تهيئته. يمكنك استخدامها على النحو التالي: bootstrap.Tab.getOrCreateInstance(element).
showيحدد التبويب المعطى ويعرض اللوحة المرتبطة به. أي تبويب آخر كان محدداً سابقاً يصبح غير محدد ويتم إخفاء اللوحة المرتبطة به. يعود إلى المستدعي قبل أن يتم عرض لوحة التبويب فعلياً (أي قبل وقوع حدث shown.bs.tab).

الأحداث (Events)

عند عرض تبويب جديد، يتم إطلاق الأحداث بالترتيب التالي:

  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.

نوع الحدثالوصف
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
})