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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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>

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

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

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

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

$('#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>

מעטהאָדס

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

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

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

$().tab

אַקטאַווייץ אַ קוויטל עלעמענט און אינהאַלט קאַנטיינער. טאַב זאָל האָבן אַ data-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-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`צו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
געוויזן.בס.טאַב	דער געשעעניש פירט אויף די קוויטל ווייַזן נאָך אַ קוויטל איז געוויזן. ניצן `event.target`און `event.relatedTarget`צו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
hide.bs.tab	דער געשעעניש פירז ווען אַ נייַ קוויטל איז צו זיין געוויזן (און אַזוי די פריערדיקע אַקטיוו קוויטל זאָל זיין פאַרבאָרגן). ניצן `event.target`און `event.relatedTarget`צו ציל די קראַנט אַקטיוו קוויטל און די נייַע באַלד-צו-זיין-אַקטיוו קוויטל ריספּעקטיוולי.
hidden.bs.tab	דער געשעעניש פירט נאָך אַ נייַע קוויטל איז געוויזן (און אַזוי די פריערדיקע אַקטיוו קוויטל איז פאַרבאָרגן). ניצן `event.target`און `event.relatedTarget`צו ציל די פריערדיקע אַקטיוו קוויטל און די נייַע אַקטיוו קוויטל ריספּעקטיוולי.

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