نافس

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

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

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

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

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

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

<nav class="nav">
  <a class="nav-link active" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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 للواجهات المبوبة الديناميكية في هذا القسم للحصول على مثال.role="tab"role="tabpanel"

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

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

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

سلوك JavaScript

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

إذا كنت تقوم ببناء JavaScript من المصدر ، فهذا يتطلبutil.js .

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

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

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

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

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>حوله.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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>

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

محتوى العنصر النائب للوحة علامة التبويب. هذا واحد يتعلق بعلامة التبويب الصفحة الرئيسية. رأيتك وسط البلد تغني البلوز. أراقبك دائرة حول البالوعة. لماذا لا تدعني أتوقف؟ ثقيل هو الرأس الذي يلبس التاج. نعم ، نجعل الملائكة تبكي ، تمطر على الأرض من فوق. أريد مشاهدة العرض في فيلم ثلاثي الأبعاد. هل شعرت من قبل أن الورق رقيق للغاية. نعم أو لا ، ربما لا.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

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

يمكنك تنشيط علامة تبويب أو التنقل على الأقراص دون كتابة أي JavaScript بمجرد تحديد عنصر data-toggle="tab"أو data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 (يجب تنشيط كل علامة تبويب على حدة):

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

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 الخاصة بنا للحصول على مزيد من المعلومات .

علامة التبويب $ ()

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab ("عرض")

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

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

.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

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

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})