Navs

Ebiwandiiko n'ebyokulabirako ku ngeri y'okukozesaamu ebitundu by'okutambuliramu ebirimu Bootstrap.

Base nav

Navigation esangibwa mu Bootstrap egabana general markup ne styles, okuva ku base .navclass okutuuka ku active ne disabled states. Wap modifier classes okukyusa wakati wa buli sitayiro.

Ekitundu kya base .navkizimbibwa ne flexbox era kiwa omusingi omunywevu ogw’okuzimba ebika byonna eby’ebitundu by’okutambuliramu. Mulimu ebimu ku bikozesebwa mu kukola sitayiro (okukola n’enkalala), ebimu ku biyungo by’okuyunga ku bitundu ebinene ebikubwa, n’okukola sitayiro okulemesa okusookerwako.

Ekitundu eky’omusingi .navtekirimu .activembeera yonna. Ebyokulabirako bino wammanga mulimu ekibiina, okusinga okulaga nti kiraasi eno entongole tesitula sitayiro yonna ey’enjawulo.

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

Classes zikozesebwa wonna, kale markup yo esobola okuba super flexible. Kozesa <ul>s nga waggulu, <ol>singa ensengeka y’ebintu byo eba nkulu, oba roll your own with a <nav>element. Kubanga the .navuses display: flex, enkolagana za nav zeeyisa kye kimu nga ebintu bya nav bwe byandikoze, naye awatali markup ey'enjawulo.

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

Emisono egiriwo

Kyusa sitayiro ya .navs component ne modifiers ne utilities. Tabula okwatagane nga bwe kyetaagisa, oba zimba eyiyo.

Okulaganya okw’okwebungulula

Kyusa okulaganya okw'okwebungulula kwa nav yo n'ebikozesebwa bya flexbox . Nga bwekiba, navs ziteekeddwa ku kkono, naye osobola bulungi okuzikyusa okudda wakati oba ku ddyo.

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

Ekwatagana ku ddyo ne .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>

Okwesimba

Stack navigation yo nga okyusa flex item direction ne .flex-columnutility. Olina okuzituuma ku viewports ezimu naye nga si ndala? Kozesa enkyusa eziddamu (okugeza, .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>

Nga bulijjo, okutambulira mu bbanga (vertical navigation) kisoboka awatali <ul>s, nakyo.

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

Ebitabo ebiyitibwa Tabs

Atwala basic nav okuva waggulu n'agattako .nav-tabsclass okukola tabbed interface. Zikozese okukola ebitundu ebirina tabba nga tukozesa tab yaffe JavaScript plugin .

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

Empeke

Twala HTML eyo y’emu, naye kozesa .nav-pillsmu kifo ky’ekyo:

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

Jjuza era oweebwe obutuufu

Force your .nav's contents okugaziya obugazi obujjuvu obuliwo ekimu ku bibiri ebikyusa ebika. Okujjuza mu kigerageranyo ekifo kyonna ekiriwo ne .nav-items yo, kozesa .nav-fill. Weetegereze nti ekifo kyonna eky’okwebungulula kikwatibwa, naye si buli kintu kya nav nti kirina obugazi bwe bumu.

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

Nga okozesa -okutambulira ku <nav>-based navigation, osobola okulekawo awatali bulabe .nav-itemnga kyokka .nav-linkkye kyetaagisa ku <a>elementi z'okukola sitayiro.

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

Ku bintu eby’obugazi obwenkanankana, kozesa .nav-justified. Ekifo kyonna eky’okwebungulula kijja kuba kya nav links, naye obutafaananako ebyo .nav-fillwaggulu, buli kintu kya nav kijja kuba kya bugazi bwe bumu.

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

Okufaananako .nav-filln'ekyokulabirako nga tukozesa -okutambulira ku <nav>-based navigation.

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

Okukola ne flex utilities

Bw’oba weetaaga enkyukakyuka za nav eziddamu, lowooza ku kukozesa omuddirirwa gwa flexbox utilities . Wadde nga ebigambo ebisingawo, ebikozesebwa bino biwa okulongoosa okusingawo mu bifo eby’okumenyawo ebiddamu. Mu kyokulabirako wansi, nav yaffe ejja kutumbibwa ku breakpoint esinga wansi, olwo ekwatagana ne horizontal layout ejjuza obugazi obuliwo okutandika okuva ku breakpoint entono.

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

Ku bikwata ku kutuuka ku bantu

Bw’oba okozesa navs okuwa ebbaala y’okutambuliramu, kakasa nti ossaako a role="navigation"ku kibya ky’omuzadde ekisinga okutegeerekeka ekya <ul>, oba okuzinga <nav>ekintu okwetooloola okutambulira kwonna. Togattako kifo ku <ul>kyo, kubanga kino kyandiguremesezza okulangirirwa ng’olukalala lwennyini nga tekinologiya ayamba.

Weetegereze nti ebbaala z’okutambuliramu, ne bwe ziba nga zikoleddwa mu ngeri ey’okulaba nga tabu ne .nav-tabskiraasi, tezirina kuweebwa role="tablist", role="tab"oba role="tabpanel"ebifaananyi. Bino bituukira ddala ku nkolagana za tabbe ezikyukakyuka zokka, nga bwe kinyonyoddwa mu ARIA Authoring Practices Guide tabs pattern . Laba enneeyisa ya JavaScript ku dynamic tabbed interfaces mu kitundu kino ekyokulabirako.

Okukozesa ebifo ebikka wansi

Okwongerako menu ezikka wansi nga olina HTML akatono ak'enjawulo n'ebigwa JavaScript plugin .

Taabu eziriko ebigwa wansi

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

Empeke eziriko ebitonnya

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

Enneeyisa ya JavaScript

Kozesa tabu JavaScript plugin —giteekemu kinnoomu oba okuyita mu bootstrap.jsfayiro ekung’aanyiziddwa —okugaziya tabu zaffe ez’okutambuliramu n’empeke okukola tabbable panes ez’ebirimu eby’omu kitundu.

Bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisautil.js .

Dynamic tabbed interfaces, nga bwe kinyonyoddwa mu ARIA Authoring Practices Guide tabs pattern , zeetaaga role="tablist", role="tab", role="tabpanel", n’ebintu ebirala aria-okusobola okutuusa ensengeka yaabwe, enkola n’embeera eriwo kati eri abakozesa tekinologiya ayamba (nga screen readers). Nga enkola esinga obulungi, tusaba okukozesa <button>ebintu ku tabu, kubanga bino bye bifuga ebivaako enkyukakyuka ekyukakyuka, okusinga enkolagana ezigenda ku lupapula oba ekifo ekipya.

Weetegereze nti tab JavaScript plugin tewagira tabbed interfaces ezirimu dropdown menus, kubanga zino zireeta ensonga zombi ez'okukozesa n'okutuuka. Okusinziira ku ndowooza y'okukozesa, eky'okuba nti ekintu ekiziyiza ekya tabu eragiddwa mu kiseera kino tekirabika mangu (nga bwe kiri munda mu menu eggaddwa) kiyinza okuleeta okutabulwa. Okusinziira ku ndowooza y’okutuuka ku bantu, mu kiseera kino tewali ngeri ya magezi ey’okukola maapu y’ekika kino eky’okuzimba ku nkola ya WAI ARIA eya bulijjo, ekitegeeza nti tekiyinza kyangu kufuulibwa kitegeerekeka eri abakozesa tekinologiya ayamba.

Ebirimu mu kifo eky'ekipande kya tabu. Eno ekwatagana ne tabu y’awaka. Akutwala mayiro waggulu, waggulu nnyo, 'kubanga alina akamwenyumwenyu ako akamu ak'ensi yonna. Mu kitanda kyange mulimu omuntu gwe simanyi, waliwo okukuba mu mutwe. Oh, nedda. Mu bulamu obulala nandikufudde okusigala. ‘Kubanga nze, nnina obusobozi mu kintu kyonna. Okusaanira olutalo lwange olw’okutikkira engule. Ekozesebwa okubba omwenge gwa bazadde bo n'olinnya ku kasolya. Tone, tan fit ate nga ready, gikyuse waggulu cause its gettin' heavy. Omukwano gwe gulinga eddagala. Ntebereza nti nneerabira nti nnina eky’okulondako.

Ebirimu mu kifo eky'ekipande kya tabu. Eno ekwatagana ne profile tab. Ofunye ebizimbe ebisinga obulungi. Sitampu za paasipooti, ye cosmopolitan. Fine, fresh, fierce, twagifuna ku kkufulu. Never planned nti olunaku lumu nja kuba nkufiirwa. Akulya omutima gwo nga gufulumye. Kiss yo ya cosmic, buli move eba ya magic. Ntegeeza ezo, ntegeeza nga ye y'oyo. Mbalamusize abaagalwa tukole olugendo. Just own the night nga nga 4th July! Naye wandibadde ogenda kwonooneka.

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>

Okuyamba okutuukana n’ebyetaago byo, kino kikola ne <ul>-based markup, nga bwe kiragibwa waggulu, oba ne markup yonna ey’okwesalirawo “roll your own”. Weetegereze nti bw'oba okozesa <nav>, tolina kugigattako role="tablist"butereevu, kubanga kino kyandisukkiridde omulimu gw'ekintu enzaalwa ng'akabonero k'okutambuliramu. Wabula, kyusa ku elementi endala (mu kyokulabirako wansi, a simple <div>) era ozinge ku <nav>kyo.

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>

Tabs plugin nayo ekola ne pills.

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

Era nga balina empeke eziyimiridde.

Ebirimu mu kifo eky'ekipande kya tabu. Eno ekwatagana ne tabu y’awaka. Nakulabye downtown nga oyimba Blues. Laba nga weetooloola emyala. Lwaki temunzikiriza kuyimirirako? Muzito gwe mutwe oguyambala engule. Yee, tukaaba bamalayika, nga batonnya ku nsi okuva waggulu. Wanna okulaba show mu 3D, firimu. Owulirako, owulira nga empapula zigonvu nnyo. Kiba yee oba nedda, nedda mpozzi.

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>

Okukozesa ebikwata ku data

Osobola okukola tab oba pill navigation nga towandiise JavaScript yonna nga omala kulaga data-toggle="tab"oba data-toggle="pill"ku element. Kozesa bino ebikwata ku data ku .nav-tabsoba .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>

Okuyita mu JavaScript

Ssobozesa tabu eziriko tabba ng’oyita mu JavaScript (buli tabu yeetaaga okukozesebwa kinnoomu):

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

Osobola okukola tabu ssekinnoomu mu ngeri eziwerako:

$('#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 effect

Okusobola okufuula tabu okuzikira mu, yongera .fadeku buli .tab-pane. Ekipande kya tabu ekisooka nakyo kirina okuba nga .showkirina okufuula ebirimu ebisooka okulabika.

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

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

$().tab

Ekola ekintu kya tabu n'ekintu ekirimu. Tab erina okuba ne data-targetoba, singa okozesa link, hrefattribute egenderera node ya container mu 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('laga') .

Londa tabu eweereddwa era eraga ekitundu kyayo ekikwatagana. Taabu endala yonna eyalondebwa emabegako efuuka etalondeddwa era ekipande kyayo ekikwatagana ne kikwekebwa. Edda eri omuyita nga ekitundu kya tabu tekinnalagibwa ddala (kwe kugamba nga shown.bs.tabekintu tekinnabaawo).

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

.tab('okusuula')

Esaanyaawo tabu ya elementi.

Ebibaddewo

Nga olaga tabu empya, ebibaawo bikuba amasasi mu nsengeka eno wammanga:

hide.bs.tab(ku tabu ekola kati)
show.bs.tab(ku kitundu ekigenda okulagibwa)
hidden.bs.tab(ku tabu ekola emabega, y’emu hide.bs.tabn’ey’omukolo)
shown.bs.tab(ku kitundu ekipya-ekikola ekyaakalagibwa, kye kimu show.bs.tabn'eky'omukolo)

Singa tewali tabu yali yakola dda, olwo hide.bs.tabne hidden.bs.tabevents tezijja kugobwa.

Ekika ky’Ekibaddewo	Okunnyonnyola
okulaga.bs.tab	Ekintu kino kikuba omuliro ku tab show, naye nga tab empya tennalagibwa. Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.
eragiddwa.bs.tab	Ekintu kino kikuba omuliro ku tab show oluvannyuma lwa tab okulagibwa. Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.
okukweka.bs.tab	Ekintu kino kikuba omuliro nga tabu empya egenda kulagibwa (era bwe kityo tabu ekola eyasooka erina okukwekebwa). Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola kati ne tabu empya egenda okukola mu bbanga ttono, mu kulondako.
ekikwekebwa.bs.tab	Ekintu kino kikuba omuliro oluvannyuma lwa tabu empya okulagibwa (era bwe kityo tabu ekola eyasooka ekwekebwa). Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola emabega ne tabu empya ekola, mu kulondako.

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