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

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

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

באַזע נאַוו

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

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

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

צו קאַנוויי די אַקטיוו שטאַט צו אַסיסטיוו טעקנאַלאַדזשיז, נוצן די aria-currentאַטריביוט - ניצן די pageווערט פֿאַר קראַנט בלאַט, אָדער trueפֿאַר די קראַנט נומער אין אַ גאַנג.

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

קלאסן זענען געניצט איבער, אַזוי דיין מאַרקאַפּ קענען זיין סופּער פלעקסאַבאַל. ניצן <ul>ס ווי אויבן, <ol>אויב די סדר פון דיין זאכן איז וויכטיק, אָדער זעמל דיין אייגענע מיט אַ <nav>עלעמענט. ווייַל די .navניצט display: flex, די נאַוו פֿאַרבינדונגען ביכייווז די זעלבע ווי נאַוו ייטאַמז וואָלט, אָבער אָן די עקסטרע מאַרקאַפּ.

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

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

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

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

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

סענטערד מיט .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

רעכט-אַליינד מיט .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

ווערטיקאַל

אָנלייגן דיין נאַוויגאַציע דורך טשאַנגינג די פלעקס נומער ריכטונג מיט די .flex-columnנוצן. איר דאַרפֿן צו אָנלייגן זיי אויף עטלעכע וויופּאָרץ אָבער נישט אויף אנדערע? ניצן די אָפּרופיק ווערסיעס (למשל, .flex-sm-column).

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

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

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

טאַבס

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

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

פּילז

נעמען די זעלבע HTML, אָבער נוצן .nav-pillsאַנשטאָט:

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

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

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

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

ווען איר נוצן אַ <nav>-באזירט נאַוויגאַציע, איר קענען בעשאָלעם פאַרלאָזן .nav-itemווי בלויז .nav-linkאיז פארלאנגט פֿאַר סטילינג <a>עלעמענטן.

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

פֿאַר גלייַך-ברייט עלעמענטן, נוצן .nav-justified. אַלע האָריזאָנטאַל פּלאַץ וועט זיין פאַרנומען דורך נאַוו פֿאַרבינדונגען, אָבער ניט ענלעך די .nav-fillאויבן, יעדער נאַוו נומער וועט זיין די זעלבע ברייט.

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

ענלעך צו דעם .nav-fillבייַשפּיל ניצן אַ <nav>-באזירט נאַוויגאַציע.

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

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

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

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

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

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

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

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

לייג דראָפּדאָוון מעניוז מיט אַ ביסל עקסטרע 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

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

סאַס

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

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

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

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

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

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

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

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

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

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

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

צו פּאַסיק דיין באדערפענישן, דאָס אַרבעט מיט <ul>- באזירט מאַרקאַפּ, ווי געוויזן אויבן, אָדער מיט קיין אַרביטראַריש "זעמל דיין אייגענע" מאַרקאַפּ. באַמערקונג אַז אויב איר נוצן <nav>, איר זאָל נישט לייגן role="tablist"גלייַך צו עס, ווייַל דאָס וואָלט אָווועררייד די געבוירן ראָלע פון די עלעמענט ווי אַ נאַוויגאַציע לאַנדמאַרק. אַנשטאָט, באַשטימען צו אַן אָלטערנאַטיוו עלעמענט (אין דעם בייַשפּיל אונטן, אַ פּשוט <div>) און ייַנוויקלען די <nav>אַרום אים.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

די טאַבס פּלוגין אויך אַרבעט מיט פּילז.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

און מיט ווערטיקאַל פּילז.

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

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

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

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

איר קענען אַקטאַווייט אַ קוויטל אָדער פּיל נאַוויגאַציע אָן שרייבן קיין דזשאַוואַסקריפּט דורך פשוט ספּעציפיצירן data-bs-toggle="tab"אָדער data-bs-toggle="pill"אויף אַן עלעמענט. ניצן די דאַטן אַטריביוץ אויף .nav-tabsאָדער .nav-pills.

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

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

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

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

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

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

איר קענען אַקטאַווייט יחיד טאַבס אין עטלעכע וועגן:

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

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

וועלקן ווירקונג

צו מאַכן טאַבס וועלקן אין, לייגן .fadeצו יעדער .tab-pane. דער ערשטער קוויטל שויב מוזן אויך .showמאַכן די ערשט אינהאַלט קענטיק.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

מעטהאָדס

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

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

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

constructor

אַקטאַווייץ אַ קוויטל עלעמענט און אינהאַלט קאַנטיינער. טאַב זאָל האָבן אַ data-bs-targetאָדער, אויב ניצן אַ לינק, אַן hrefאַטריביוט, טאַרגאַטינג אַ קאַנטיינער נאָדע אין די DOM.

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

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

סאַלעקץ די געגעבן קוויטל און ווייזט זייַן פֿאַרבונדן שויב. קיין אנדערע קוויטל וואָס איז געווען פריער אויסגעקליבן ווערט אַנסעלעקטעד און זיין פארבונדן שויב איז פאַרבאָרגן. קערט צו די קאַללער איידער די קוויטל שויב איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.tabגעשעעניש אַקערז).

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

  tab.show()

dispose

דיסטרויז אַן עלעמענט ס קוויטל.

getInstance

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

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

getOrCreateInstance

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

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

Events

ווען איר ווייַזן אַ נייַע קוויטל, די געשעענישן לויפן אין די פאלגענדע סדר:

hide.bs.tab(אויף די איצטיקע אַקטיווע קוויטל)
show.bs.tab(אויף די צו-ווייַזן קוויטל)
hidden.bs.tab(אויף די פריערדיקע אַקטיוו קוויטל, די זעלבע ווי פֿאַר די hide.bs.tabגעשעעניש)
shown.bs.tab(אויף די ניי-אַקטיוו פּונקט געוויזן קוויטל, די זעלבע ווי פֿאַר די show.bs.tabגעשעעניש)

אויב קיין קוויטל איז שוין אַקטיוו, די hide.bs.tabאון hidden.bs.tabגעשעענישן וועט נישט זיין פייערד.

געשעעניש טיפּ	באַשרייַבונג
`show.bs.tab`	דער געשעעניש פירט אויף די קוויטל ווייַזן, אָבער איידער די נייַע קוויטל איז געוויזן. ניצן `event.target`און `event.relatedTarget`צו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
`shown.bs.tab`	דער געשעעניש פירט אויף די קוויטל ווייַזן נאָך אַ קוויטל איז געוויזן. ניצן `event.target`און `event.relatedTarget`צו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
`hide.bs.tab`	דער געשעעניש פירז ווען אַ נייַ קוויטל איז צו זיין געוויזן (און אַזוי די פריערדיקע אַקטיוו קוויטל זאָל זיין פאַרבאָרגן). ניצן `event.target`און `event.relatedTarget`צו ציל די קראַנט אַקטיוו קוויטל און די נייַע באַלד-צו-זיין-אַקטיוו קוויטל ריספּעקטיוולי.
`hidden.bs.tab`	דער געשעעניש פירט נאָך אַ נייַע קוויטל איז געוויזן (און אַזוי די פריערדיקע אַקטיוו קוויטל איז פאַרבאָרגן). ניצן `event.target`און `event.relatedTarget`צו ציל די פריערדיקע אַקטיוו קוויטל און די נייַע אַקטיוו קוויטל ריספּעקטיוולי.

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