Navs na tithebhu

Matsalwa na swikombiso swa ndlela yo tirhisa swiphemu swa ku famba-famba leswi katsekaka swa Bootstrap.

Eka tluka leri

Xiseketelo xa nav

Ku fambafamba loku kumekaka eka Bootstrap ku avelana ku fungha hi ku angarhela na switayele, ku suka eka .navtlilasi ya le hansi ku ya eka swiyimo leswi tirhaka na leswi nga tirhiki. Cincana titlilasi ta swihundzuluxi ku cinca exikarhi ka xitayili xin’wana na xin’wana.

Xiphemu xa le hansi .navxi akiwile hi flexbox naswona xi nyika masungulo yo tiya yo aka tinxaka hinkwato ta swiphemu swa ku famba-famba. Yi katsa ku tlula swin’wana swa switayele (ku tirha na minxaxamelo), ku hlanganisiwa kun’wana ka swihlanganisi swa tindhawu letikulu leti hlaseriweke, na switayele swa xisekelo leswi nga tirhiki.

Xiphemu xa le hansi .nava xi katsi .activexiyimo xihi na xihi. Swikombiso leswi landzelaka swi katsa tlilasi, ngopfungopfu ku kombisa leswaku tlilasi leyi yo karhi a yi pfuxi ku endliwa ka xitayili xo hlawuleka.

Ku hundzisela xiyimo lexi tirhaka eka thekinoloji yo pfuneta, tirhisa aria-currentxihlawulekisi — hi ku tirhisa pagenkoka wa tluka ra sweswi, kumbe trueeka nchumu wa sweswi eka sete.

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

Titlilasi ti tirhisiwa hinkwako, kutani markup ya wena yi nga va super flexible. Tirhisa <ul>s ku fana na laha henhla, <ol>loko ku landzelelana ka swilo swa wena swi ri swa nkoka, kutani u rhendzeleka na swa wena hi <nav>elemente. Hikuva .navmatirhiselo display: flex, swihlanganisi swa nav swi tikhoma ku fana ni leswi swilo swa nav a swi ta tikhoma ha swona, kambe handle ka ku fungha loku engetelekeke.

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

Switayili leswi kumekaka

Cinca xitayili xa .navxiphemu xa s hi swihundzuluxi na switirhisiwa. Hlanganisa u tlhela u hlanganisa hilaha swi lavekaka hakona, kutani u aka ya wena.

Ku ringanisa loku nga etlhelo

Cinca ku ringanana ka horizontal ka nav ya wena hi switirhisiwa swa flexbox . Hi ku tiyimisela, ti- nav ti ringanisiwa hi tlhelo ra ximatsi, kambe u nga ti cinca hi ku olova ti va leti ringanisiweke exikarhi kumbe exineneni.

Ku hlanganisiwa na .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">Disabled</a>
  </li>
</ul>

Ku ringanisiwa hi xinene na .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">Disabled</a>
  </li>
</ul>

Ololoka

Stack navigation ya wena hi ku cinca flex item direction na .flex-columnutility. Xana u lava ku ti stack eka ti viewport tin’wana kambe ku nga ri tin’wana? Tirhisa tivhidiyo leti hlamulaka (xikombiso, .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">Disabled</a>
  </li>
</ul>

Tanihi minkarhi hinkwayo, ku famba-famba loku yimisiweke ka koteka handle ka <ul>s, na kona.

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

Tithebhu

Yi teka nav ya xisekelo ku suka ehenhla yi engetela .nav-tabstlilasi ku tumbuluxa interface ya tabbed. Ti tirhise ku endla swifundzha swa tithebhu hi plugin ya hina ya JavaScript ya thebhu .

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

Tiphilisi

Teka HTML yoleyo leyi fanaka, kambe tirhisa .nav-pillsematshan’weni ya sweswo:

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

Tata u tlhela u lulamisa

Sindzisa swilo swa wena swa .nav's ku andlala ku anama loku heleleke loku kumekaka yin'wana ya titlilasi timbirhi ta swicinci. Ku tata hi ku ringana ndhawu hinkwayo leyi nga kona hi .nav-items ya wena, tirhisa .nav-fill. Xiya leswaku ndhawu hinkwayo leyi nga etlhelo yi tekiwa, kambe a hi nchumu wun’wana ni wun’wana wa nav lowu nga ni ku anama loku fanaka.

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

Loko u tirhisa ku <nav>famba-famba loku sekeriweke eka -, u nga tshika hi ku hlayiseka .nav-itemtanihi leswi .nav-linkku lavekaka ntsena eka <a>swiaki swa xitayili.

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

Eka swiaki swa ku anama loku ringanaka, tirhisa .nav-justified. Ndhawu hinkwayo ya horizontal yi ta tekiwa hi swihlanganisi swa nav, kambe ku hambana na leswi .nav-fillnga laha henhla, nchumu wun’wana na wun’wana wa nav wu ta va na ku anama loku fanaka.

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

Ku fana na .nav-fillxikombiso hi ku tirhisa ku <nav>famba-famba loku sekeriweke eka -.

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

Ku tirha na switirhisiwa swa flex

Loko u lava ku cinca-cinca ka nav loku hlamulaka, anakanya hi ku tirhisa nxaxamelo wa switirhisiwa swa flexbox . Hambi leswi swi nga na marito yo tala, switirhisiwa leswi swi nyika ku cinca lokukulu eka tindhawu to wisa leti hlamulaka. Eka xikombiso lexi nga laha hansi, nav ya hina yi ta hlanganisiwa eka breakpoint ya le hansi swinene, kutani yi pfumelelana na layout ya horizontal leyi tataka ku anama loku nga kona ku sukela eka breakpoint leyitsongo.

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

Malunghana na ku fikelela

Loko u tirhisa navs ku nyika barhi ya ku famba-famba, tiyisisa leswaku u engetela a role="navigation"eka xikhomela-ndhawu xa mutswari lexi twisisekaka swinene xa <ul>, kutani u phutsela <nav>elemente ku rhendzela ku famba-famba hinkwako. U nga engeteli xiphemu eka xona <ul>hi xoxe, tanihileswi leswi swi nga ta sivela ku tivisiwa tanihi nxaxamelo wa xiviri hi thekinoloji yo pfuneta.

Xiya leswaku tibara to famba-famba, hambiloko ti endliwe hi ndlela leyi vonakaka tanihi tithebhu leti nga ni .nav-tabstlilasi, a ti fanelanga ti nyikiwa role="tablist", role="tab"kumbe role="tabpanel"swihlawulekisi. Leswi swi faneleka ntsena eka swihlanganisi swa tithebhu leswi cinca-cincaka, tanihilaha swi hlamuseriweke hakona eka Maendlelo ya Vutsari ya WAI ARIA . Vona mahanyelo ya JavaScript ya swihlanganisi swa tithebhu leswi cinca-cincaka eka xiyenge lexi ku kuma xikombiso. Xihlawulekisi aria-currenta xi laveki eka swihlanganisi swa tithebhu leti cinca-cincaka tanihileswi JavaScript ya hina yi khomaka xiyimo lexi hlawuriweke hi ku engetela aria-selected="true"eka thebhu leyi tirhaka.

Ku tirhisa swilo leswi nga ehansi

Engetela timenyu leti nga ehansi hi HTML leyi engetelekekenyana ni xiengetelo xa JavaScript lexi nga ehansi .

Tithebhu leti nga ni swilo leswi nga ehansi

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

Tiphilisi leti nga ni swilo leswi nga ehansi

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

Sass

Swilo leswi cinca-cincaka

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

Mahanyelo ya JavaScript

Tirhisa thebhu ya JavaScript plugin—yi katsa hi yoxe kumbe hi ku tirhisa bootstrap.jsfayili leyi hlengeletiweke—ku ndlandlamuxa tithebhu ta hina to famba-famba ni tiphilisi leswaku u endla tipheji leti nga ni tithebhu ta swilo swa laha kaya.

Swihlanganisi swa tithebhu leswi cinca-cincaka, tanihilaha swi hlamuseriweke hakona eka Maendlelo ya Vutsari ya WAI ARIA , swi lava role="tablist", role="tab", role="tabpanel", na swihlawulekisi swo engetela aria-leswaku swi ta hundzisela xivumbeko xa swona, ntirho na xiyimo xa sweswi eka vatirhisi va thekinoloji yo pfuneta (ku fana na swihlaya swa xikirini). Tanihi endlelo lerinene, hi ringanyeta ku tirhisa <button>swiaki swa tithebhu, tanihileswi leswi ku nga swilawuri leswi pfuxaka ku cinca loku cinca-cincaka, ku tlula swihlanganisi leswi famba-fambaka eka tluka lerintshwa kumbe ndhawu.

Xiya leswaku swihlanganisi swa tithebhu leswi cinca-cincaka a swi fanelanga ku va na timenyu leti nga ehansi, tanihileswi leswi swi vangaka swiphiqo swa ku tirhiseka na ku fikelela. Hi ku ya hi langutelo ra ku tirhiseka, mhaka ya leswaku elemente ya trigger ya thebhu leyi kombisiweke sweswi a yi vonaki hi ku hatlisa (tanihi leswi yi nga endzeni ka menyu leyi pfalekeke leyi rhetaka) yi nga vanga ku pfilunganyeka. Ku suka eka langutelo ra ku fikelela, sweswi a ku na ndlela leyi twisisekaka yo mepa muxaka lowu wa xivumbeko eka xivumbeko xa WAI ARIA xa ntolovelo, leswi vulaka leswaku a wu nge endliwi leswaku wu twisiseka hi ku olova eka vatirhisi va thekinoloji yo pfuneta.

Lexi i nhundzu yin’wana ya xikhomela-ndhawu nhundzu leyi fambelanaka na thebhu ya le Kaya. Ku tsindziyela eka thebhu yin’wana swi ta cinca-cinca ku vonaka ka leyi eka leyi landzelaka. Thebhu ya JavaScript yi cincana titlilasi ku lawula ku vonaka ka nhundzu na xitayili. U nga yi tirhisa ni tithebhu, tiphilisi ni ku .navfamba-famba kun’wana ni kun’wana loku tirhisaka matimba.

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>

Ku pfuneta ku fambisana na swilaveko swa wena, leswi swi tirha hi <ul>-based markup, tanihilaha swi kombisiweke hakona laha henhla, kumbe hi ku tihlawulela kwihi na kwihi ka “roll your own” markup. Xiya leswaku loko u tirhisa <nav>, a wu fanelanga ku engetela role="tablist"hi ku kongoma eka yona, tanihileswi leswi swi nga ta tlula ntirho wa ntumbuluko wa elemente tanihi xikombiso xa ndhawu ya ku famba-famba. Ematshan’weni ya sweswo, cincela eka xiaki xin’wana (eka xikombiso lexi nga laha hansi, lexi olovaka <div>) ivi u phutsela lexi <nav>xi xi rhendzeleke.

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

Plugin ya ti tabs yi tlhela yi tirha na tiphilisi.

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

Naswona hi tiphilisi leti yimisiweke.

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>

Ku tirhisa swihlawulekisi swa data

U nga tirhisa ku famba-famba ka thebhu kumbe philisi handle ko tsala JavaScript yihi na yihi hi ku boxa ntsena data-bs-toggle="tab"kumbe data-bs-toggle="pill"eka elemente. Tirhisa swihlawulekisi leswi swa datha eka .nav-tabskumbe .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>

Hi ku tirhisa JavaScript

Endla leswaku tithebhu ta tithebhu ti tirha hi ku tirhisa JavaScript (thebhu yin’wana ni yin’wana yi lava ku tirhisiwa hi yoxe):

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

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

U nga tirhisa tithebhu ha yin’we-yin’we hi tindlela to hlayanyana:

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

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

Fade effect

Ku endla leswaku tithebhu ti nyamalala, engetela .fadeeka yin’wana ni yin’wana .tab-pane. Phejini yo sungula ya thebhu yi fanele ku tlhela yi va na .showku endla leswaku nhundzu yo sungula yi vonaka.

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

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

constructor

Ku tirhisa xiaki xa thebhu na xigwitsirisi xa nhundzu. Thebhu yi fanele ku va na data-bs-targetkumbe, loko u tirhisa xihlanganisi, hrefxihlawulekisi, ku kongomisa node ya xikhomela eka 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 button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

Hlawula thebhu leyi nyikiweke ivi yi kombisa phejini ya yona leyi fambisanaka na yona. Thebhu yin’wana ni yin’wana leyi a yi hlawuriwile khale yi va leyi nga hlawuriwa naswona phejini ya yona leyi fambisanaka na yona ya tumbetiwa. Ku tlhelela eka mufoyini loko phejini ya thebhu yi nga si kombisiwa hakunene (i.e. shown.bs.tabxiendlakalo xi nga si humelela).

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

  tab.show()

dispose

Ku herisa thebhu ya elemente.

getInstance

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa thebhu lexi fambelanaka na elemente ya DOM

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

getOrCreateInstance

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa thebhu lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga

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

Events

Loko u kombisa thebhu leyintshwa, swiendlakalo swi pfurha hi ku landzelelana loku landzelaka:

hide.bs.tab(eka thebhu leyi tirhaka sweswi)
show.bs.tab(eka thebhu leyi nga ta kombisiwa)
hidden.bs.tab(eka thebhu leyi tirhaka leyi hundzeke, leyi fanaka ni ya hide.bs.tabxiendlakalo)
shown.bs.tab(eka thebhu leyi tirhaka leyintshwa leyi kombisiweke ntsena, leyi fanaka ni ya show.bs.tabxiendlakalo)

Loko ku nga ri na thebhu leyi se a yi tirha, kutani hide.bs.tabswiendlakalo swa na hidden.bs.taba swi nge tirhisiwi.

Muxaka wa xiendlakalo	Nhlamuselo
`show.bs.tab`	Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu, kambe thebhu leyintshwa yi nga si kombisiwa. Tirhisa `event.target`na `event.relatedTarget`ku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
`shown.bs.tab`	Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu endzhaku ka loko thebhu yi kombisiwile. Tirhisa `event.target`na `event.relatedTarget`ku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
`hide.bs.tab`	Xiendlakalo lexi xi pfurha loko ku fanele ku kombisiwa thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale yi fanele ku fihliwa). Tirhisa `event.target`na `event.relatedTarget`ku kongomisa thebhu ya sweswi leyi tirhaka na thebhu leyintshwa leyi nga ta tirha ku nga ri khale, hi ku landzelelana.
`hidden.bs.tab`	Xiendlakalo lexi xi pfurha endzhaku ka loko ku kombisiwile thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale ya fihliwile). Tirhisa `event.target`na `event.relatedTarget`ku kongomisa thebhu leyi tirhaka ya khale na thebhu leyintshwa leyi tirhaka, hi ku landzelelana.

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