Navs

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

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.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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.

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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

E tsepame ka .justify-content-center: .

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

E logagane ka go le letona le .justify-content-end: .

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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 .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Dipilisi

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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>

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

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

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Dipilisi tšeo di nago le di- dropdown

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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.

Ge e ba o aga JavaScript ya rena go tšwa mothopong, e nyakautil.js .

Didirišwa tša go dirišana tše di nago le 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.

Hlokomela gore polaka ya JavaScript ya thepo 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.

Diteng tša seswari sa lefelo bakeng sa phanele ya thepo. Ye e amana le thepo ya gae. E go tšea dimaele godimo, godimo kudu, ka gobane o na le pososelo yeo e tee ya boditšhabatšhaba. Go na le motho yo ke sa mo tsebego mpeteng wa ka, go na le go thula hlogong ya ka. Oo, aowa. Bophelong bjo bongwe ke be ke tla go dira gore o dule. 'Cause nna, ke na le bokgoni bja selo se sengwe le se sengwe. Go lokela ntwa ya ka ya go rweša mphapahlogo. E tlwaetše go utswa bjala bja batswadi ba gago gomme wa namela marulelong. Tone, tan fit le loketse, e retelehela ho fihlela e baka gettin 'boima lona. Lerato la gagwe le swana le sehlare-tagi. Ke nagana gore ke lebetše gore ke na le kgetho.

Diteng tša seswari sa lefelo bakeng sa phanele ya thepo. Ye e amana le thepo ya profaele. O hweditše meago e mebotse kudu. Ditempe tša phasepoto, ke cosmopolitan. E botse, e foreše, e bogale, re e hweditše ka senotlelo. Never planned gore ka letšatši le lengwe ke tla be ke go lahlegelwa. O ja pelo ya gago ka ntle. Katlo ya gago ke ya cosmic, move o mongwe le o mongwe ke maleatlana. Ke ra bao, ke ra bjalo ka ge eka ke yena. Dumelang baratiwa a re tseeng leeto. E no ba mong wa bošego bjalo ka di 4 tša July! Eupša o ka rata go senywa.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

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.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

The dithepo plugin e boetse e sebetsa le lipilisi.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Le ka dipilisi tse emeng.

Diteng tša seswari sa lefelo bakeng sa phanele ya thepo. Ye e amana le thepo ya gae. Ke go bone downtown o opela Blues. Lebelela o dikologa drain. Ke ka baka la’ng o sa ntumelele go ema? Boima ke hlogo yeo e aparago mphapahlogo. Ee, re dira gore barongwa ba lle, ba neša pula lefaseng go tšwa godimo. Wanna bona pontšo ka 3D, filimi. Na o kile wa ikwa, o ikwa o sesane ga pampiri gakaakaa. Ke ee goba aowa, aowa mohlomongwe.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
      <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
      <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

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-toggle="tab"goba data-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-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

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

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

Fade 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">...</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>

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 .

$ (). thepo ya

E tsenya tirišong elemente ya thepo le setshelo sa diteng. Thepo e swanetše go ba le e ka ba data-targetgoba, ge o šomiša kgokagano, hrefseka seo se nepišago noutu ya setshelo ka go DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab ('bontša') .

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 ye 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 ga ge shown.bs.tabtiragalo e direga).

$('#someTab').tab('show')

.tab ('lahla') .

E senya thepo ya elemente.

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 šoma yeo e sa tšwago go bontšhwa, 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
bontša.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.
e bontšhitšwe.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.
pata.bs.thepo	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.
e utilwego.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.

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