נאַוויגאַציע און טאַבס

דאַקיומענטיישאַן און ביישפילן פֿאַר ווי צו נוצן Bootstrap ס אַרייַנגערעכנט נאַוויגאַציע קאַמפּאָונאַנץ.

אויף דעם בלאַט

באַזע נאַוו

נאַוויגאַציע בנימצא אין Bootstrap ייַנטיילן אַלגעמיין מאַרקאַפּ און סטיילז, פֿון די באַזע .navקלאַס צו די אַקטיוו און פאַרקריפּלט שטאַטן. ויסבייַטן מאָדיפיער קלאסן צו באַשטימען צווישן יעדער נוסח.

די באַזע .navקאָמפּאָנענט איז געבויט מיט פלעקסבאָקס און צושטעלן אַ שטאַרק יסוד פֿאַר בנין אַלע טייפּס פון נאַוויגאַציע קאַמפּאָונאַנץ. עס כולל עטלעכע סטיל אָוווערריידז (פֿאַר ארבעטן מיט רשימות), עטלעכע לינק וואַטן פֿאַר גרעסערע שלאָגן געביטן און יקערדיק פאַרקריפּלט סטילינג.

דער באַזע .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">Disabled</a>
  </li>
</ul>

קלאסן זענען געניצט איבער, אַזוי דיין מאַרקאַפּ קענען זיין סופּער פלעקסאַבאַל. ניצן <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">Disabled</a>
</nav>

בנימצא סטיילז

טוישן די נוסח פון .navס קאָמפּאָנענט מיט מאָדיפיערס און יוטילאַטיז. מישן און גלייַכן ווי דארף, אָדער בויען דיין אייגענע.

האָריזאָנטאַל אַליינמאַנט

טוישן די האָריזאָנטאַל אַליינמאַנט פון דיין נאַוו מיט פלעקסבאָקס יוטילאַטיז . דורך פעליקייַט, נאַווס זענען לינקס-אַליינד, אָבער איר קענען לייכט טוישן זיי צו צענטער אָדער רעכט אַליינד.

סענטערד מיט .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">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">Disabled</a>
  </li>
</ul>

ווערטיקאַל

אָנלייגן דיין נאַוויגאַציע דורך טשאַנגינג די פלעקס נומער ריכטונג מיט די .flex-columnנוצן. איר דאַרפֿן צו אָנלייגן זיי אויף עטלעכע וויופּאָרץ אָבער נישט אויף אנדערע? ניצן די אָפּרופיק ווערסיעס (למשל, .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">Disabled</a>
  </li>
</ul>

ווי שטענדיק, ווערטיקאַל נאַוויגאַציע איז <ul>אויך מעגלעך אָן s.

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">Disabled</a>
</nav>

טאַבס

נעמט די יקערדיק נאַוו פון אויבן און מוסיף די .nav-tabsקלאַס צו דזשענערייט אַ טאַבבעד צובינד. ניצן זיי צו שאַפֿן טאַבאַבלע מקומות מיט אונדזער קוויטל דזשאַוואַסקריפּט פּלוגין .

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">Disabled</a>
  </li>
</ul>

פּילז

נעמען די זעלבע 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">Disabled</a>
  </li>
</ul>

פּלאָמבירן און באַרעכטיקן

צווינגען דיין .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">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">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">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">Disabled</a>
</nav>

אַרבעט מיט פלעקס יוטילאַטיז

אויב איר דאַרפֿן אָפּרופיק נאַוו ווערייישאַנז, באַטראַכטן ניצן אַ סעריע פון פלעקסבאָקס יוטילאַטיז . כאָטש זיי זענען מער ווערבאָוס, די יוטילאַטיז פאָרשלאָגן אַ גרעסערע קוסטאָמיזאַטיאָן אַריבער אָפּרופיק ברייקפּאָינץ. אין דעם בייַשפּיל אונטן, אונדזער נאַוו וועט זיין סטאַקט אויף די לאָואַסט ברייקפּוינט, און אַדאַפּט זיך צו אַ האָריזאָנטאַל אויסלייג וואָס פילז די בנימצא ברייט סטאַרטינג פון די קליין ברייקפּוינט.

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">Disabled</a>
</nav>

וועגן אַקסעסאַביליטי

אויב איר נוצן נאַווס צו צושטעלן אַ נאַוויגאַציע באַר, זיין זיכער צו לייגן אַ role="navigation"צו די מערסט לאַדזשיקאַל פאָטער קאַנטיינער פון די <ul>, אָדער ייַנוויקלען אַ <nav>עלעמענט אַרום די גאנצע נאַוויגאַציע. דו זאלסט נישט לייגן די ראָלע צו די <ul>זיך, ווייַל דאָס וואָלט פאַרמייַדן עס צו זיין אַנאַונסט ווי אַ פאַקטיש רשימה דורך אַסיסטיוו טעקנאַלאַדזשיז.

באַמערקונג אַז נאַוויגאַציע באַרס, אפילו אויב וויזשוואַלי סטיילד ווי טאַבס מיט די .nav-tabsקלאַס, זאָל ניט זיין געגעבן אָדער אַטריביוץ. די זענען בלויז צונעמען פֿאַר דינאַמיש טאַבבעד ינטערפייסיז, ווי דיסקרייבד אין די ARIA אַוטהאָרינג פּראַקטיסיז גייד טאַבס מוסטער . זען דזשאַוואַסקריפּט נאַטור פֿאַר דינאַמיש טאַבבעד ינטערפייסיז אין דעם אָפּטיילונג פֿאַר אַ בייַשפּיל. דער אַטריביוט איז ניט נייטיק אויף דינאַמיש טאַבבעד ינטערפייסיז זינט אונדזער דזשאַוואַסקריפּט כאַנדאַלז די אויסגעקליבן שטאַט דורך אַדינג אויף די אַקטיוו קוויטל.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

ניצן דראָפּדאָוונס

לייג דראָפּדאָוון מעניוז מיט אַ ביסל עקסטרע HTML און די דראָפּדאָוונס דזשאַוואַסקריפּט פּלוגין .

טאַבס מיט דראָפּדאָוונס

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">Disabled</a>
  </li>
</ul>

פּילז מיט דראַפּדאַונז

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">Disabled</a>
  </li>
</ul>

CSS

וועריאַבאַלז

צוגעגעבן אין וו5.2.0

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, נאַווס איצט נוצן היגע CSS וועריאַבאַלז אויף .nav, .nav-tabs, און .nav-pillsפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

אויף די .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;

דזשאַוואַסקריפּט נאַטור

ניצן די קוויטל דזשאַוואַסקריפּט פּלוגין-אַרייַננעמען עס ינדיווידזשואַלי אָדער דורך די קאַמפּיילד bootstrap.jsטעקע-צו פאַרברייטערן אונדזער נאַוויגאַציע טאַבס און פּילז צו שאַפֿן טאַבאַבלע פּאַנעס פון היגע אינהאַלט.

דאָס איז עטלעכע אָרטהאָלדער אינהאַלט די פֿאַרבונדן אינהאַלט פון די היים קוויטל . קליקינג אויף אן אנדער קוויטל וועט באַשטימען די וויזאַביליטי פון דעם איין פֿאַר די ווייַטער. די קוויטל דזשאַוואַסקריפּט סוואַפּס קלאסן צו קאָנטראָלירן די וויזאַביליטי און סטילינג פון אינהאַלט. איר קענען נוצן עס מיט טאַבס, פּילז און קיין אנדערע .nav-פּאַוערד נאַוויגאַציע.

דאָס איז עטלעכע אָרטהאָלדער אינהאַלט פון די פּראָפיל קוויטל פֿאַרבונדן אינהאַלט. קליקינג אויף אן אנדער קוויטל וועט באַשטימען די וויזאַביליטי פון דעם איין פֿאַר די ווייַטער. די קוויטל דזשאַוואַסקריפּט סוואַפּס קלאסן צו קאָנטראָלירן די וויזאַביליטי און סטילינג פון אינהאַלט. איר קענען נוצן עס מיט טאַבס, פּילז און קיין אנדערע .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>

אַקסעסאַביליטי

דינאַמיש טאַבבעד ינטערפייסיז, ווי דיסקרייבד אין די ARIA אַוטהאָרינג פּראַקטיסיז גייד טאַבס מוסטער , דאַרפן role="tablist", role="tab", role="tabpanel", און נאָך aria-אַטריביוץ אין סדר צו קאַנוויי זייער סטרוקטור, פאַנגקשאַנאַליטי און קראַנט שטאַט צו יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז (אַזאַ ווי פאַרשטעלן לייענער). ווי אַ בעסטער פיר, מיר רעקאָמענדירן צו נוצן <button>עלעמענטן פֿאַר די טאַבס, ווייַל דאָס זענען קאָנטראָלס וואָס צינגל אַ דינאַמיש ענדערונג, אלא ווי לינקס וואָס נאַוויגירן צו אַ נייַע בלאַט אָדער אָרט.

אין לויט מיט די ARIA אַוטהאָרינג פּראַקטיסיז מוסטער, בלויז די איצט אַקטיוו קוויטל נעמט קלאַוויאַטור פאָקוס. ווען די דזשאַוואַסקריפּט פּלוגין איז יניטיאַלייזד, עס וועט זיין שטעלן tabindex="-1"אויף אַלע ינאַקטיוו קוויטל קאָנטראָלס. אַמאָל די איצט אַקטיוו קוויטל האט פאָקוס, די לויפֿער קיז אַקטאַווייט די פריערדיקע / ווייַטער קוויטל, מיט די פּלוגין טשאַנגינג די ראָווינגtabindex אַקאָרדינגלי. אָבער, באַמערקונג אַז די דזשאַוואַסקריפּט פּלוגין טוט נישט ויסטיילן צווישן האָריזאָנטאַל און ווערטיקאַל קוויטל רשימות ווען עס קומט צו לויפֿער שליסל ינטעראַקשאַנז: ראַגאַרדלאַס פון די אָריענטירונג פון די קוויטל רשימה, ביידע די אַרויף און לינקס לויפֿער גיין צו די פריערדיקע קוויטל, און אַראָפּ און רעכט לויפֿער גיין צו דער ווייַטער קוויטל.

אין אַלגעמיין, צו פאַסילאַטייט קלאַוויאַטור נאַוויגאַציע, עס איז רעקאַמענדיד צו מאַכן די קוויטל פּאַנאַלז זיך פאָוקיסטאַבאַל, סייַדן דער ערשטער עלעמענט מיט מינינגפאַל אינהאַלט אין די קוויטל טאַפליע איז שוין פאָוקיסטאַבאַל. די דזשאַוואַסקריפּט פּלוגין טוט נישט פּרובירן צו שעפּן דעם אַספּעקט - ווו צונעמען, איר דאַרפֿן צו מאַכן דיין קוויטל פּאַנאַלז פאָוקיסטאַבאַל דורך אַדינג tabindex="0"דיין מאַרקאַפּ.

די קוויטל דזשאַוואַסקריפּט פּלוגין שטיצט נישט טאַבבעד ינטערפייסיז וואָס אַנטהאַלטן דראָפּדאָוון מעניוז, ווייַל די גרונט ביידע וסאַביליטי און אַקסעסאַביליטי ישוז. פֿון אַ וסאַביליטי פּערספּעקטיוו, דער פאַקט אַז די צינגל עלעמענט פון דער איצט געוויזן קוויטל איז נישט גלייך קענטיק (ווי עס איז אין די פארמאכט דראָפּדאָוון מעניו) קען פאַרשאַפן צעמישונג. פֿון אַ אַקסעסאַביליטי פונט פון מיינונג, עס איז דערווייַל קיין פיליק וועג צו מאַפּע דעם סאָרט פון קאַנסטראַקשאַן צו אַ נאָרמאַל WAI ARIA מוסטער, טייַטש אַז עס קענען נישט זיין לייכט פאַרשטיייק פֿאַר ניצערס פון אַסיסטיוו טעקנאַלאַדזשיז.

ניצן דאַטן אַטראַביוץ

איר קענען אַקטאַווייט אַ קוויטל אָדער פּיל נאַוויגאַציע אָן שרייבן קיין דזשאַוואַסקריפּט דורך פשוט ספּעציפיצירן 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>

דורך דזשאַוואַסקריפּט

געבן טאַבאַבלע טאַבס דורך דזשאַוואַסקריפּט (יעדער קוויטל דאַרף זיין אַקטיווייטיד ינדיווידזשואַלי):

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>

מעטהאָדס

אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז

אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .

זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע .

אַקטאַווייץ דיין אינהאַלט ווי אַ קוויטל עלעמענט.

איר קענען מאַכן אַ קוויטל בייַשפּיל מיט די קאָנסטרוקטאָר, למשל:

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

מעטאָד	באַשרייַבונג
`dispose`	דיסטרויז אַן עלעמענט ס קוויטל.
`getInstance`	סטאַטיק אופֿן וואָס אַלאַוז איר צו באַקומען די קוויטל בייַשפּיל פֿאַרבונדן מיט אַ DOM עלעמענט, איר קענען נוצן עס ווי דאָס: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	סטאַטיק אופֿן וואָס קערט אַ קוויטל בייַשפּיל פֿאַרבונדן צו אַ 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
})