Navs namathebhu

Amadokhumenti nezibonelo zokuthi zisetshenziswa kanjani izingxenye ze-Bootstrap zokuzulazula ezifakiwe.

Kuleli khasi

Isisekelo nav

Ukuzulazula kutholakala ku-Bootstrap yabelana ngemakhaphu evamile nezitayela, kusukela kusigaba sesisekelo .navkuya ezifundazweni ezisebenzayo nezikhubazekile. Shintshanisa amakilasi okushintsha ukuze ushintshe phakathi kwesitayela ngasinye.

Ingxenye yesisekelo .navyakhiwe nge-flexbox futhi inikeza isisekelo esiqinile sokwakha zonke izinhlobo zezingxenye zokuzulazula. Kubandakanya ukubhala ngaphezulu kwesitayela esithile (sokusebenza ngezinhlu), ezinye izixhumanisi zokunamathisela izindawo ezinkulu ezishaywayo, kanye nesitayela esiyisisekelo esikhubazekile.

Ingxenye yesisekelo .navayifaki noma yisiphi .activeisimo. Izibonelo ezilandelayo zifaka ikilasi, ikakhulukazi ukukhombisa ukuthi lesi sigaba asibangeli isitayela esikhethekile.

Ukuze udlulisele isimo esisebenzayo kubuchwepheshe obusizayo, sebenzisa aria-currentisibaluli — usebenzisa pageinani lekhasi lamanje, noma trueinto yamanje kusethi.

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>

Amakilasi asetshenziswa kulo lonke, ngakho umaki wakho ungaguquguquka kakhulu. Sebenzisa u <ul>-s njengangenhla, <ol>uma ukuhleleka kwezinto zakho kubalulekile, noma gingqa eyakho ngento <nav>. Ngoba .navukusetshenziswa display: flex, izixhumanisi ze-nav ziziphatha ngendlela efanayo nezinto ze-nav, kodwa ngaphandle kwemakhaphu eyengeziwe.

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>

Izitayela ezitholakalayo

Shintsha isitayela sengxenye ye- .navs ngezilungisi kanye nezinsiza. Hlanganisa futhi ufanise njengoba kudingeka, noma wakhe owakho.

Ukuqondanisa okuvundlile

Shintsha ukuqondanisa okuvundlile kwe-nav yakho nezinsiza ze- flexbox . Ngokuzenzakalelayo, ama-navs aqondaniswe kwesokunxele, kodwa ungakwazi ukuwashintsha kalula ukuze aqondaniswe maphakathi noma kwesokudla.

Kuphakathi kokuthi .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>

Iqondaniswe kwesokudla ne- .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>

Iqondile

Beka ukuzulazula kwakho ngokushintsha isiqondiso sento eguquguqukayo ngohlelo .flex-columnlokusebenza. Udinga ukuwabeka kwezinye izindawo zokubuka kodwa hhayi kwezinye? Sebenzisa izinguqulo eziphendulayo (isb, .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>

Njengenjwayelo, ukuzulazula okuqondile kuyenzeka ngaphandle <ul>kuka-s, futhi.

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>

Amathebhu

Ithatha i-nav eyisisekelo kusuka phezulu futhi yengeza .nav-tabsiklasi ukuze ikhiqize isixhumi esibonakalayo esinamathebhu. Zisebenzise ukuze udale izifunda ezithintekayo ngethebhu yethu i- JavaScript plugin .

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>

Amaphilisi

Thatha leyo HTML efanayo, kodwa sebenzisa .nav-pillsesikhundleni salokho:

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>

Gcwalisa futhi ubeke izizathu

Phoqa .navokuqukethwe kwakho ukunweba ububanzi obugcwele obutholakalayo izigaba ezimbili zesilungisi. Ukuze ugcwalise ngokulinganayo zonke izikhala ezitholakalayo nge- .nav-items yakho, sebenzisa .nav-fill. Qaphela ukuthi sonke isikhala esivundlile sigcwele, kodwa akuzona zonke izinto ze-nav ezinobubanzi obufanayo.

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>

Uma usebenzisa <nav>ukuzulazula okusekelwe, ungashiya ngokuphephile .nav-itemnjengoba .nav-linkkudingeka kuphela <a>ezintweni zesitayela.

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>

Ukuze uthole ama-elementi anobubanzi obulinganayo, sebenzisa .nav-justified. Sonke isikhala esivundlile sizosetshenziswa izixhumanisi ze-nav, kodwa ngokungafani nalokhu .nav-fillokungenhla, yonke into ye-nav izoba nobubanzi obufanayo.

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>

Ngokufanayo .nav-fillnesibonelo usebenzisa <nav>ukuzulazula okusekelwe.

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>

Ukusebenza ngezinsiza eziguqukayo

Uma udinga ukuhlukahluka okusabelayo kwe-nav, cabanga ukusebenzisa uchungechunge lwezinsiza ze- flexbox . Ngenkathi i-verbose kakhudlwana, lezi zinsiza zinikeza ukwenza ngokwezifiso okukhulu kuwo wonke ama-breakpoints asabelayo. Esibonelweni esingezansi, i-nav yethu izopakishwa endaweni yokuphumula ephansi kakhulu, bese ijwayelana nesakhiwo esivundlile esigcwalisa ububanzi obutholakalayo kusukela endaweni encane yokuhlukana.

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>

Mayelana nokufinyeleleka

Uma usebenzisa i-navs ukuze unikeze ibha yokuzulazula, qiniseka ukuthi ungeza u-a role="navigation"esiqukathi esinengqondo kunazo zonke esingumzali se- <ul>, noma usonge into ethile kukho <nav>konke ukuzulazula. Ungangezi indima <ul>kuyona uqobo, njengoba lokhu kuzoyivimbela ukuthi imenyezelwe njengohlu lwangempela ngobuchwepheshe obusizayo.

Qaphela ukuthi amabha okuzulazula, ngisho noma enziwe isitayela njengamathebhu aneklasi .nav-tabs, akufanele anikezwe , role="tablist"noma role="tab"izibaluli role="tabpanel". Lokhu kulungele kuphela ukuxhumana kwamathebhu ashukumisayo, njengoba kuchazwe kuphethini yamathebhu ethi I-ARIA Authoring Practices Guide . Bona impatho ye-JavaScript yezindawo zokusebenzelana zamathebhu ashukumisayo kulesi sigaba njengesibonelo. Isibaluli aria-currentasidingeki kuzixhumanisi zamathebhu ashukumisayo njengoba i-JavaScript yethu isingatha isimo esikhethiwe ngokwengeza aria-selected="true"kuthebhu esebenzayo.

Ukusebenzisa okwehliswayo

Engeza amamenyu okwehlayo nge-HTML encane eyengeziwe kanye ne- plugin ye-JavaScript eyehlayo .

Amathebhu anokwehliswayo

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>

Amaphilisi ane dropdowns

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

Okuguquguqukayo

Kwengezwe ku-v5.2.0

Njengengxenye yendlela yokuguquguquka ye-CSS ye-Bootstrap, ama-navs manje asebenzisa okuguquguqukayo kwasendaweni kwe-CSS kokuthi .nav, .nav-tabs, kanye nokwenza .nav-pillsngokwezifiso okuthuthukisiwe kwesikhathi sangempela. Amanani okuguquguquka kwe-CSS asethwa nge-Sass, ngakho ukwenza ngokwezifiso kwe-Sass kusasekelwa, nakho.

Ekilasini lesisekelo .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};

Ekilasini .nav-tabslesilungisi:

  --#{$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};

Ekilasini .nav-pillslesilungisi:

  --#{$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};

Izinguquko ze-Sass

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

Ukuziphatha kweJavaScript

Sebenzisa i-plugin yethebhu ye-JavaScript—ifake ngayodwa noma ngefayela elihlanganisiwe bootstrap.js—ukuze unwebe amathebhu ethu okuzulazula namaphilisi ukuze udale amafasitelana angamathebhu okuqukethwe kwasendaweni.

Lokhu okunye okuqukethwe kwesimeli ithebhu yasekhaya okuqukethwe okuhlotshaniswayo kwethebhu. Ukuchofoza enye ithebhu kuzoshintsha ukubonakala kwalena kokulandelayo. Ithebhu ye-JavaScript ishintshanisa amakilasi ukuze ulawule ukubonakala kokuqukethwe kanye nesitayela. Ungayisebenzisa namathebhu, amaphilisi, nanoma yikuphi okunye .navukuzulazula okunamandla.

Lokhu okunye okuqukethwe kwesimeli ithebhu Yephrofayela okuqukethwe okuhlotshaniswayo kwethebhu . Ukuchofoza enye ithebhu kuzoshintsha ukubonakala kwalena kokulandelayo. Ithebhu ye-JavaScript ishintshanisa amakilasi ukuze ulawule ukubonakala kokuqukethwe kanye nesitayela. Ungayisebenzisa namathebhu, amaphilisi, nanoma yikuphi okunye .navukuzulazula okunamandla.

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>

Ukuze usize ukulingana nezidingo zakho, lokhu kusebenza <ul>ngomaka -okusekelwe, njengoba kuboniswe ngenhla, noma nganoma iyiphi imakhaphu ethi "zigoqe ngokwakho". Qaphela ukuthi uma usebenzisa i- <nav>, akufanele wengeze kuyo role="tablist"ngokuqondile, njengoba lokhu kuzokhipha indima yomdabu ye-elementi njengophawu lwendawo yokuzulazula. Esikhundleni salokho, shintshela kwenye into (esibonelweni esingezansi, elula <div>) bese uyisonga <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>

I-plugin yamathebhu futhi isebenza namaphilisi.

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>

Futhi namaphilisi aqondile. Okufanelekile, kumathebhu aqondile, kufanele futhi wengeze aria-orientation="vertical"kusiqukathi sohlu lwamathebhu.

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>

Ukufinyeleleka

Izixhumi ezibonakalayo ezinamathebhu anamandla, njengoba kuchazwe kuphethini yamathebhu Omhlahlandlela Wemikhuba Yokugunyaza ye-ARIA , zidinga role="tablist", role="tab", role="tabpanel", nezibaluli ezengeziwe aria-ukuze kudluliselwe ukwakheka kwazo, ukusebenza, nesimo samanje kubasebenzisi bobuchwepheshe obusizayo (njengabafundi besikrini). Njengomkhuba omuhle kakhulu, sincoma ukusebenzisa <button>izici zamathebhu, njengoba lezi kuyizilawuli ezicupha ushintsho oluguqukayo, kunezixhumanisi ezizulazulela ekhasini elisha noma indawo.

Ngokuhambisana nephethini Yemikhuba Yokugunyaza ye-ARIA, ithebhu esebenzayo kuphela ethola ukugxila kwekhibhodi. Uma i-plugin ye-JavaScript iqaliswa, izosethwa tabindex="-1"kuzo zonke izilawuli zethebhu ezingasebenzi. Uma ithebhu esebenzayo manje isigxilile, okhiye bekhesa bavula ithebhu yangaphambilini/elandelayo, i-plugin ishintsha i- rovingtabindex ngokufanele. Nokho, qaphela ukuthi i-plugin ye-JavaScript ayihlukanisi phakathi kohlu lwamathebhu avundlile noma mpo uma kuziwa ekusebenzelaneni kokhiye bekhesa: kungakhathaliseki umumo wohlu lwethebhu, kokubili ikhesa ephezulu nesobunxele iya kuthebhu yangaphambili, futhi ikhesa eya phansi nesokudla iya kokuthi ithebhu elandelayo.

Ngokuvamile, ukuze kube lula ukuzulazula kwekhibhodi, kunconywa ukwenza amaphaneli wethebhu ngokwawo agxile futhi, ngaphandle kwalapho into yokuqala equkethe okuqukethwe okunenjongo ngaphakathi kwephaneli yethebhu isivele igxilile. I-JavaScript plugin ayizami ukuphatha lesi sici—lapho kufanele khona, kuzodingeka wenze ngokusobala amaphaneli wethebhu yakho agxile ngokungeza kumakhaphu tabindex="0"akho.

I-plugin yethebhu ye-JavaScript ayisekeli izixhumi ezibonakalayo ezinamathebhu eziqukethe amamenyu okwehlayo, njengoba lokhu kubangela kokubili izinkinga zokusebenziseka nokufinyeleleka. Ngokombono wokusebenziseka, iqiniso lokuthi i-elementi ye-trigger yethebhu ebonisiwe okwamanje ayibonakali ngokushesha (njengoba ingaphakathi kwemenyu yokudonsela phansi evaliwe) ingabangela ukudideka. Ngokombono wokufinyeleleka, okwamanje ayikho indlela ephusile yokubeka lolu hlobo lokwakha kuphethini evamile ye-WAI ARIA, okusho ukuthi ngeke yenziwe iqondakale kalula kubasebenzisi bobuchwepheshe obusizayo.

Ukusebenzisa izibaluli zedatha

Ungakwazi ukuvula ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-JavaScript ngokucacisa data-bs-toggle="tab"noma ngento data-bs-toggle="pill"ethile. Sebenzisa lezi zibaluli zedatha kokuthi .nav-tabsnoma .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>

Nge-JavaScript

Nika amandla amathebhu aphathekayo nge-JavaScript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwa):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

Ungavula amathebhu ngamanye ngezindlela ezimbalwa:

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 umphumela

Ukuze wenze amathebhu afiphale, .fadeengeza .tab-pane. Ifasitelana lethebhu yokuqala kufanele futhi .showlenze okuqukethwe kokuqala kubonakale.

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

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

Yenza okuqukethwe kwakho kusebenze njengengxenye yethebhu.

Ungakha isibonelo sethebhu nomakhi, isibonelo:

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

Indlela	Incazelo
`dispose`	Icekela phansi ithebhu yento.
`getInstance`	Indlela emile ekuvumela ukuthi uthole isibonelo sethebhu esihlotshaniswa nento ye-DOM, ungayisebenzisa kanje: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Indlela emile ebuyisela isenzakalo sethebhu esihlotshaniswa nento ye-DOM noma idale entsha uma kwenzeka ingaqaliswanga. Ungayisebenzisa kanje `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Ikhetha ithebhu enikeziwe futhi ibonise ifasitelana elihlotshaniswa nayo. Noma iyiphi enye ithebhu ekhethwe ngaphambilini iyayekwa ukukhethwa futhi ifasitelana elihlobene nalo liyafihlwa. Ibuyela kofonayo ngaphambi kokuba kuboniswe ifasitelana lethebhu (okungukuthi ngaphambi kokuba `shown.bs.tab`kwenzeke umcimbi).

Imicimbi

Uma ubonisa ithebhu entsha, izehlakalo zivutha ngokulandelana okulandelayo:

hide.bs.tab(kuthebhu esebenzayo yamanje)
show.bs.tab(kuthebhu ezoboniswa)
hidden.bs.tab(kuthebhu esebenzayo yangaphambilini, efanayo hide.bs.tabneyomcimbi)
shown.bs.tab(kuthebhu esanda kuboniswa, efanayo show.bs.tabneyomcimbi)

Uma ingekho ithebhu ebivele iyasebenza, kuzosho ukuthi i- hide.bs.tabnemicimbi hidden.bs.tabngeke kuxoshwe.

Uhlobo lomcimbi	Incazelo
`hide.bs.tab`	Lo mcimbi uvutha lapho ithebhu entsha izoboniswa (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo izofihlwa). Sebenzisa `event.target`futhi `event.relatedTarget`uqondise ithebhu esebenzayo yamanje kanye nethebhu entsha ezosebenza maduze, ngokulandelana.
`hidden.bs.tab`	Lo mcimbi uvutha ngemva kokuboniswa kwethebhu entsha (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo ifihliwe). Sebenzisa `event.target`futhi `event.relatedTarget`uqondise ithebhu esebenzayo yangaphambilini kanye nethebhu entsha esebenzayo, ngokulandelanayo.
`show.bs.tab`	Lo mcimbi uvutha embukisweni wethebhu, kodwa ngaphambi kokuthi kuboniswe ithebhu entsha. Sebenzisa `event.target`futhi `event.relatedTarget`uqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo.
`shown.bs.tab`	Lo mcimbi uvutha embukisweni wethebhu ngemva kokuthi ithebhu isibonisiwe. Sebenzisa `event.target`futhi `event.relatedTarget`uqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo.

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