Source

Navs

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

באַזע נאַוו

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

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

דער באַזע .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

קלאסן זענען געניצט איבער, אַזוי דיין מאַרקאַפּ קענען זיין סופּער פלעקסאַבאַל. ניצן <ul>ס ווי אויבן, <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" 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" 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" 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" 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" 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" 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" 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" 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 class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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" 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-itemאויף די אַנגקערז.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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" 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"

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

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

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

<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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

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

אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערזutil.js .

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

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

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

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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>

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

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

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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>

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

מיר וועלן נישט וועלן צו האַלטן די צייט און באַקומען אַלע די אנדערע זאכן. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. דער איד רעפּרעהענדעריט עסט eu aliqua occaecat quis and velit excepteur laborum mollit dolore eiusmod. ייַנטיילן דעם פּלאַץ אין די פּראָדוקטן און די מינימאַל רעפּראַזענץ די פּאַראָל. דעסערט ניט קיין אַרבעט ענים און cillum eu דעסערונט עקסעפּטער און אַ ינסידידונט מינים אָקקאַעקאַט.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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>

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

איר קענען אַקטאַווייט אַ קוויטל אָדער פּיל נאַוויגאַציע אָן שרייבן קיין דזשאַוואַסקריפּט דורך פשוט ספּעציפיצירן 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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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>

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

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

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

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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>

מעטהאָדס

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

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

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

$().tab

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').tab('show')
  })
</script>

.tab('ווייַזן')

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

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

.tab('דיספּאָוזד')

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

געשעענישן

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

  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געשעענישן וועט נישט זיין פייערד.

געשעעניש טיפּ באַשרייַבונג
show.bs.tab דער געשעעניש פירט אויף די קוויטל ווייַזן, אָבער איידער די נייַע קוויטל איז געוויזן. ניצן event.targetאון event.relatedTargetצו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
געוויזן.בס.טאַב דער געשעעניש פירט אויף די קוויטל ווייַזן נאָך אַ קוויטל איז געוויזן. ניצן event.targetאון event.relatedTargetצו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
hide.bs.tab דער געשעעניש פירז ווען אַ נייַ קוויטל איז צו זיין געוויזן (און אַזוי די פריערדיקע אַקטיוו קוויטל זאָל זיין פאַרבאָרגן). ניצן event.targetאון event.relatedTargetצו ציל די קראַנט אַקטיוו קוויטל און די נייַע באַלד-צו-זיין-אַקטיוו קוויטל ריספּעקטיוולי.
hidden.bs.tab דער געשעעניש פירט נאָך אַ נייַע קוויטל איז געוויזן (און אַזוי די פריערדיקע אַקטיוו קוויטל איז פאַרבאָרגן). ניצן event.targetאון event.relatedTargetצו ציל די פריערדיקע אַקטיוו קוויטל און די נייַע אַקטיוו קוויטל ריספּעקטיוולי. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})