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.

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>

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.

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>

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

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>

Ku ringanisiwa hi xinene na .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>

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

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>

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

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>

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 .

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>

Tiphilisi

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

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>

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.

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>

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.

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>

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.

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>

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

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>

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.

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>

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 xivumbeko xa tithebhu ta ARIA Authoring Practices Guide . 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

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>

Tiphilisi leti nga ni swilo leswi nga ehansi

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

Swilo leswi cinca-cincaka

Ku engeteriwe eka v5.2.0

Tanihi xiphemu xa ndlela ya Bootstrap leyi cinca-cincaka ya swilo leswi cinca-cincaka swa CSS, ti-nav sweswi ti tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya eka .nav, .nav-tabs, na .nav-pillsku antswisiwa ka ku cinca-cinca ka nkarhi wa xiviri. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

Eka .navtlilasi ya le hansi:

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

Eka .nav-tabstlilasi ya xihundzuluxi:

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

Eka .nav-pillstlilasi ya xihundzuluxi:

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

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

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.

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.

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>

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.

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>

Plugin ya ti tabs yi tlhela yi tirha na tiphilisi.

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>

Naswona hi tiphilisi leti yimisiweke. Hi ndlela leyinene, eka tithebhu leti yimisiweke, u fanele ku tlhela u engetela aria-orientation="vertical"eka xikhomela-ndhawu xa nxaxamelo wa tithebhu.

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>

Ku fikelela

Swihlanganisi swa tithebhu leswi cinca-cincaka, tanihilaha swi hlamuseriweke hakona eka xivumbeko xa tithebhu ta ARIA Authoring Practices Guide , 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.

Hi ku fambisana na xivumbeko xa Maendlelo ya Vutsari ya ARIA, i thebhu leyi tirhaka sweswi ntsena leyi amukelaka ku kongomisa ka khibhodi. Loko xiengetelo xa JavaScript xi sunguriwa, xi ta veka tabindex="-1"eka swilawuri hinkwaswo swa thebhu leswi nga tirhiki. Loko thebhu leyi tirhaka sweswi yi ri na focus, swilotlelo swa xikombiso swi endla leswaku thebhu leyi hundzeke/leyi landzelaka yi tirha, laha plugin yi cincaka rovingtabindex hi ku ya hi sweswo. Kambe, xiya leswaku xiengetelo xa JavaScript a xi hambanisi exikarhi ka minxaxamelo ya tithebhu leti nga etlhelo ni leti yimisiweke loko swi ta eka ku tirhisana ka swilotlelo swa xikombiso: ku nga khathariseki ndlela leyi nxaxamelo wa tithebhu wu kongomisiweke ha yona, xikombiso xa le henhla ni xa ximatsi xi ya eka thebhu leyi hundzeke, naswona xikombiso xa le hansi ni xa xinene xi ya eka thebhu leyi landzelaka.

Hi ku angarhela, ku olovisa ku famba-famba ka khibhodi, swi ringanyetiwa ku endla leswaku tiphaneleni ta thebhu hi toxe ti kongomisa na tona, handle ka loko elemente yo sungula leyi nga ni swilo leswi nga ni nhlamuselo endzeni ka phanele ya thebhu se yi kongomisiwa. Plugin ya JavaScript a yi ringeti ku khoma xiphemu lexi—laha swi faneleke, u ta fanela ku endla hi ku kongoma tiphaneleni ta wena ta tithebhu ti kongomisa hi ku engetela tabindex="0"eka ku fungha ka wena.

Plugin ya JavaScript ya thebhu a yi seketeli swihlanganisi swa thebhu leswi nga 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.

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

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

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

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

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

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

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 .

Ku endla leswaku nhundzu ya wena yi tirha tanihi xiphemu xa thebhu.

U nga endla xikombiso xa thebhu hi muaki, xikombiso:

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

Ndlela	Nhlamuselo
`dispose`	Ku herisa thebhu ya elemente.
`getInstance`	Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa thebhu lexi fambelanaka na elemente ya DOM, u nga xi tirhisa hi ndlela leyi: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Ndlela ya static leyi vuyisaka xikombiso xa thebhu lexi fambelanaka na elemente ya DOM kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga. U nga yi tirhisa hi ndlela leyi: `bootstrap.Tab.getOrCreateInstance(element)`.
`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.tab`xiendlakalo xi nga si humelela).

Swiendlakalo

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

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