Navs le dithepo

Ditokomane le mehlala ya ka moo o ka šomišago dikarolo tša go sepelasepela tše di akareditšwego tša Bootstrap.

Letlakaleng le

Nav ya motheo

Navigation e fumanehang ka Bootstrap arolelana kakaretso markup le mekhoa, ho tloha sehlopha sa motheo .navho ea mafolofolo le holofetseng e re. Swap diklase tša sefetoši go fetola magareng ga setaele se sengwe le se sengwe.

Karolo ya motheo .nave agilwe ka flexbox gomme e fa motheo wo o tiilego wa go aga mehuta ka moka ya dikarolo tša go sepela. E akaretša diphetošo tše dingwe tša setaele (bakeng sa go šoma ka mananeo), go tlatša mo gongwe ga kgokagano bakeng sa mafelo a magolo a go otla, le setaele sa motheo se se golofetšego.

Karolo ya motheo .navga e akaretše .activemmušo ofe goba ofe. Mehlala ye e latelago e akaretša sehlopha, kudukudu go laetša gore sehlopha se se itšego ga se hlohleletše setaele sefe goba sefe se se kgethegilego.

Go fetišetša boemo bjo bo šomago go theknolotši ya go thuša, šomiša aria-currentseka — o šomiša pageboleng bja letlakala la bjale, goba truebakeng sa selo sa bjale ka seteng.

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>

Diklase di šomišwa gohle, ka fao markup ya gago e ka ba super flexible. Šomiša <ul>s go swana le ka godimo, <ol>ge e le gore tatelano ya dilo tša gago e bohlokwa, goba o kgokološe ya gago ka <nav>elemente. Ka gobane .navditirišo display: flex, dikgokagano tša nav di itshwara go swana le ge dilo tša nav di be di tla dira bjalo, eupša ntle le go swaya mo go oketšegilego.

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>

Ditaele tše di lego gona

Fetola setaele sa .navs karolo le diphetolo le utilities. Hlakanya le go nyalelanya ge go nyakega, goba o age ya gago.

Go logaganya mo go rapaletšego

Fetoša go logaganya ga go rapalala ga nav ya gago ka didirišwa tša flexbox . Ka go ikemela, di-nav di logagantšwe ka go le letshadi, eupša o ka di fetoša gabonolo go ya bogareng goba di logagantšwe ka go le letona.

E tsepame ka .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>

E logagane ka go le letona le .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>

Tsepamego

Stack go sepelasepela ga gago ka go fetoša tlhahlo ya selo sa go koba ka .flex-columnutility. O hloka go di kgoboketša go di-viewport tše dingwe eupša e sego tše dingwe? Diriša diphetolelo tše di arabelago (mohlala, .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>

Bjalo ka mehleng, go sepelasepela ka go ema go a kgonega ntle le <ul>s, le gona.

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>

Dithepo

E tšea nav ya motheo go tšwa godimo gomme e tlaleletša ka .nav-tabssehlopha go tšweletša segokanyimmediamentsi sa sebolokigolo sa dithepo. Di šomiše go hlama dilete tša dithepo ka polaka ya rena ya JavaScript ya thepo .

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>

Dipilisi

Tšea yona HTML yeo, eupša diriša .nav-pillsgo e na le moo:

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>

Tlatša le go lokafatša

Gapeletša .navdikagare tša gago tša go katološa bophara bjo bo lego gona ka botlalo e nngwe ya dihlopha tše pedi tša sefetoši. Go tlatša ka go lekana sekgoba ka moka seo se lego gona ka .nav-items ya gago, diriša .nav-fill. Hlokomela gore sekgoba ka moka sa go rapalala se tšerwe, eupša ga se selo se sengwe le se sengwe sa nav seo se nago le bophara bjo bo swanago.

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>

Ge o šomiša go <nav>sepelasepela mo go theilwego go -, o ka tlogela ka polokego ka .nav-itemge go nyakega fela bakeng sa dielemente tša .nav-linksetaele .<a>

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>

Bakeng sa dielemente tša bophara bjo bo lekanago, diriša .nav-justified. Sebaka ka moka sa go rapalala se tla tšewa ke dikgokagano tša nav, eupša go fapana le tše di .nav-filllego ka mo godimo, selo se sengwe le se sengwe sa nav se tla ba le bophara bjo bo swanago.

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>

Go swana le .nav-fillmohlala ka go šomiša go <nav>sepelasepela mo go theilwego go -.

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>

Go šoma ka didirišwa tša go flex

Ge e ba o nyaka diphetogo tša nav tše di arabelago, nagana ka go diriša lelokelelo la didirišwa tša flexbox . Le ge e le gore e na le mantšu a mantši, didirišwa tše di fa go tlwaetša mo gogolo go ralala le mafelo a go kgaotša ao a arabelago. Mohlaleng wo o lego ka mo tlase, nav ya rena e tla kgoboketšwa godimo ga ntlha ya go kgaotša ya fase kudu, ke moka ya tlwaela peakanyo ye e rapaletšego yeo e tlatšago bophara bjo bo lego gona go thoma go tšwa go ntlha ye nnyane ya go kgaotša.

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>

Mabapi le phihlelelo

Ge o šomiša navs go fa baara ya go sepelasepela, kgonthiša gore o tlaleletša a role="navigation"go setshelo sa motswadi seo se kwagalago kudu sa <ul>, goba o phuthele <nav>elemente go dikologa go sepelasepela ka moka. O se ke wa oketša tema go yona <ul>ka boyona, ka ge se se be se tla e thibela go tsebišwa bjalo ka lenaneo la kgonthe ke theknolotši ya go thuša.

Hlokomela gore dibara tša go sepelasepela, le ge e le gore di setaele ka pono bjalo ka dithepo ka .nav-tabssehlopha, ga se tša swanela go fiwa role="tablist", role="tab"goba role="tabpanel"dika. Tše di loketše fela go didirišwa tša go dirišana tša dithepo tše di fetogago, bjalo ka ge go hlalošitšwe ka go paterone ya dithepo tša Tlhahlo ya Mekgwa ya Bongwadi ya ARIA . Bona boitshwaro bja JavaScript bja didirišwa tša go dirišana tša dithepo tše di fetogago karolong ye bakeng sa mohlala. Sebopego aria-currentga se nyakege go didirišwa tša go dirišana tša dithepo tše di fetogago ka ge JavaScript ya rena e swara boemo bjo bo kgethilwego ka go tlaleletša aria-selected="true"go thepo ye e šomago.

Go diriša dilo tšeo di theogago

Oketša dimenu tša go theoga ka HTML ye nnyane ya tlaleletšo le plugin ya JavaScript ya go theoga .

Dithepo tšeo di nago le dilo tšeo di theogago

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>

Dipilisi tšeo di nago le di- dropdown

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

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya mokgwa wa go fetoga wa diphetogo tša CSS wa Bootstrap, di-nav bjale di diriša diphetogo tša CSS tša lefelong leo go .nav, .nav-tabs, le .nav-pillsbakeng sa go tlwaetša mo go kaonefaditšwego ga nako ya kgonthe. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

Ka .navsehlopha sa motheo:

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

Ka .nav-tabssehlopha sa mofetoledi:

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

Ka .nav-pillssehlopha sa mofetoledi:

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

Diphetogo tša 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;

Boitshwaro bja JavaScript

Diriša thepo ya polaka ya JavaScript—e akaretše ka botee goba ka bootstrap.jsfaele yeo e kgobokeditšwego—go katološa dithepo tša rena tša go sepelasepela le dipilisi go hlama diphensele tša go ba le dithepo tša diteng tša lefelong leo.

Ye ke diteng tše dingwe tša seswaro sa lefelo diteng tše di amanago le thepo ya Gae . Go klika thepo ye nngwe go tla fetoša go bonagala ga ye go ye e latelago. Thepo ya JavaScript e fapantšha diklase go laola go bonagala ga diteng le setaele. O ka e diriša ka dithepo, dipilisi, le .navgo sepelasepela le ge e le gofe mo gongwe mo go matlafatšwago.

Ye ke diteng tše dingwe tša seswari sa lefelo diteng tše di amanago le thepo ya Profaele . Go klika thepo ye nngwe go tla fetoša go bonagala ga ye go ye e latelago. Thepo ya JavaScript e fapantšha diklase go laola go bonagala ga diteng le setaele. O ka e diriša ka dithepo, dipilisi, le .navgo sepelasepela le ge e le gofe mo gongwe mo go matlafatšwago.

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>

Go thuša go swanela dinyakwa tša gago, se se šoma ka go <ul>swaya mo go theilwego go -, bjalo ka ge go bontšhitšwe ka godimo, goba ka go swaya le ge e le gofe ga boithatelo “go kgokološa ga gago”. Hlokomela gore ge o šomiša <nav>, ga se wa swanela go tlaleletša role="tablist"thwii go yona, ka ge se se tla tloša tema ya setlogo ya elemente bjalo ka leswao la go sepelasepela. Go e na le moo, fetogela go elemente e nngwe (mohlaleng wo o lego ka mo tlase, e bonolo <div>) gomme o phuthele go <nav>e dikologa.

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>

The dithepo plugin e boetse e sebetsa le lipilisi.

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>

Le ka dipilisi tse emeng. Ka kgopolo, bakeng sa dithepo tše di emego thwii, o swanetše go oketša gape aria-orientation="vertical"go setshelo sa lenaneo la dithepo.

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>

Phihlelelo

Didirišwa tša go dirišana tša dithepo tše di fetogago, bjalo ka ge di hlalošitšwe go mohlala wa dithepo tša Tlhahlo ya Mekgwa ya Bongwadi ya ARIA , di nyaka role="tablist", role="tab", role="tabpanel", le dika tša tlaleletšo aria-e le gore di fetišetšwe sebopego sa tšona, mošomo, le boemo bja bjale go badiriši ba theknolotši ya go thuša (go swana le babadi ba skrine). Bjalo ka mokgwa wo mokaone, re kgothaletša go šomiša <button>dielemente tša dithepo, ka ge tše e le ditaolo tšeo di hlohleletšago phetogo ye e fetogago, go e na le dikgokagano tšeo di sepelago go letlakala le lefsa goba lefelo.

Go sepelelana le paterone ya Mekgwa ya go Ngwala ya ARIA, ke fela thepo ye e šomago gabjale yeo e amogelago nepo ya khiiboto. Ge polaka ya JavaScript e thongwa, e tla beakanya tabindex="-1"go ditaolo ka moka tša thepo ye e sa šomego. Ge thepo ye e šomago gabjale e na le go tsepamiša kgopolo, dinotlelo tša khesara di tsenya tirišong thepo ya peleng/ye e latelago, ka polaka e fetoša go sepelasepelatabindex ka go swanela. Le ge go le bjalo, ela hloko gore polaka ya JavaScript ga e fapantšhe magareng ga mananeo a thepo a go rapalala le a go ema ge go tliwa go ditirišano tša senotlelo sa khesara: go sa šetšwe tshekamelo ya lenaneo la thepo, bobedi khesara ya godimo le ya nngele e ya thepong ya go feta, gomme khesara ya fase le ya go ja e ya go thepo e latelang.

Ka kakaretšo, go nolofatša go sepelasepela ga khiiboto, go kgothaletšwa go dira gore diphanele tša thepo ka botšona di tsepame gape, ntle le ge elemente ya mathomo yeo e nago le diteng tše di nago le mohola ka gare ga phanele ya thepo e šetše e tsepame. Plugin ya JavaScript ga e leke go swara karolo ye—moo go swanetšego, o tla swanelwa ke go dira ka go lebanya gore diphanele tša gago tša thepo di tsepame ka go oketša tabindex="0"ka go swaya ga gago.

Thepo ya JavaScript plugin ga e thekge didirišwa tša go dirišana tša thepo tšeo di nago le dimenu tša go theoga, ka ge tše di baka bobedi mathata a go šomišega le a phihlelelo. Go tšwa go pono ya go šomišega, taba ya gore elemente ya go hlohleletša ya thepo ye e bontšhitšwego gabjale ga e bonagale ka pela (ka ge e le ka gare ga thepo ya go theoga ye e tswaletšwego) e ka hlola kgakanego. Go tšwa go ntlha ya phihlelelo, ga bjale ga go na tsela ye e nago le tlhaologanyo ya go beakanya mohuta wo wa go aga go ya go mohlala wa WAI ARIA wa maemo, go ra gore o ka se dirwe gore go kwešišege gabonolo go badiriši ba theknolotši ya go thuša.

Go šomiša dika tša datha

O ka tsenya tirišong go sepelasepela ga thepo goba pilisi ntle le go ngwala JavaScript efe goba efe ka go fo laetša data-bs-toggle="tab"goba data-bs-toggle="pill"godimo ga elemente. Šomiša dika tše tša datha go .nav-tabsgoba .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>

Ka JavaScript

Kgontšha dithepo tša dithepo ka JavaScript (thepo ye nngwe le ye nngwe e swanetše go tsenywa tirišong ka botee):

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

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

O ka tsenya tirišong dithepo ka botee ka ditsela tše mmalwa:

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 phello

Go dira gore dithepo di fifala ka gare, oketša .fadego e nngwe le e nngwe .tab-pane. Lefasetešana la thepo ya mathomo le lona le swanetše go ba le .showgo dira gore diteng tša mathomo di bonagale.

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

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

E dira gore diteng tša gago di šome bjalo ka elemente ya thepo.

O ka hlama mohlala wa thepo ka mohlami, mohlala:

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

Mokgwa	Tlhalošo
`dispose`	E senya thepo ya elemente.
`getInstance`	Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa thepo wo o amanago le elemente ya DOM, o ka e šomiša ka tsela ye: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Mokgwa wa go se fetoge wo o bušetšago mohlala wa thepo wo o amanago le elemente ya DOM goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa. O ka e diriša ka tsela ye: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Kgetha thepo ye e filwego gomme e bontšha lefasetere la yona leo le amanago. Thepo efe goba efe ye nngwe yeo e bego e kgethilwe peleng e ba yeo e sa kgethwago gomme lefasetere la yona leo le amanago le lona le a utilwe. E boela go mogala pele lefasetere la thepo le bontšhitšwe e le ka kgonthe (ke gore pele `shown.bs.tab`tiragalo e direga).

Ditiragalo

Ge o bontšha thepo ye mpsha, ditiragalo di thunya ka tatelano ye e latelago:

hide.bs.tab(go thepo ya bjale ye e šomago) .
show.bs.tab(go thepo yeo e tlago go bontšhwa)
hidden.bs.tab(go thepong ya go šoma ya peleng, e swanago le ya hide.bs.tabtiragalo)
shown.bs.tab(go thepong yeo e sa tšwago go bontšhwa yeo e sa tšwago go šoma, e swanago le ya show.bs.tabtiragalo)

Ge e ba go se na thepo yeo e bego e šetše e šoma, gona ditiragalo tša hide.bs.table hidden.bs.tabdi ka se thuntšwe.

Mohuta wa tiragalo	Tlhalošo
`hide.bs.tab`	Tiragalo ye e a tuka ge thepo ye mpsha e swanetše go bontšhwa (gomme ka go realo thepo ye e šomago ya peleng e swanetše go utollwa). Šomiša `event.target`le `event.relatedTarget`go nepiša thepo ya bjale ye e šomago le thepo ye mpsha yeo e tlago go šoma kgauswinyane, ka go latelelana.
`hidden.bs.tab`	Tiragalo ye e thunya ka morago ga ge thepo ye mpsha e bontšhitšwe (gomme ka go realo thepo ye e šomago ya peleng e a utilwe). Šomiša `event.target`le `event.relatedTarget`go nepiša thepo ye e šomago ya peleng le thepo ye mpsha ye e šomago, ka go latelelana.
`show.bs.tab`	Tiragalo ye e thunya ka pontšho ya thepo, eupša pele ga ge thepo ye mpsha e bontšhitšwe. Šomiša `event.target`le `event.relatedTarget`go nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana.
`shown.bs.tab`	Tiragalo ye e thunya pontšhong ya thepo ka morago ga ge thepo e bontšhitšwe. Šomiša `event.target`le `event.relatedTarget`go nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana.

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