Source

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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Bw’oba ​​okozesa enkola <nav>eyesigamiziddwa ku -, kakasa nti ossaako .nav-itemku nnanga.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Okufaananako .nav-filln’ekyokulabirako ng’okozesa enkola <nav>eyesigamiziddwa ku -, kakasa nti ossaamu .nav-itemku nnanga.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 WAI ARIA Authoring Practices . 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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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 ebipande ebisobola okuwandiikibwako eby’ebirimu eby’omu kitundu, ne bwe kiba nga oyita mu menu ezikka wansi.

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

Dynamic tabbed interfaces, nga bwe kinyonyoddwa mu WAI ARIA Authoring Practices , zeetaaga role="tablist", role="tab", role="tabpanel", n’ebintu ebirala aria-okusobola okutuusa ensengeka yazo, enkola n’embeera eriwo kati eri abakozesa tekinologiya ayamba (nga screen readers).

Weetegereze nti dynamic tabbed interfaces tezirina kubaamu dropdown menus, kubanga kino kireeta byombi enkozesa n'okutuuka ku nsonga. 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.

Raw denim osanga toziwuliddeko jean shorts Austin. Nesciunt tofu stumptown aliqua, okuyonja omukugu mu kukola eby’amaguzi eby’edda. Ebirevu cliche eby’ekiseera, williamsburg carles vegan helvetica. Reprehenderit omunyama retro keffiyeh omukwasi w'ebirooto synth. Ssweeta ya cosby eu banh mi, qui irure terry richardson eyali squid. Aliquip placeat omusajja omulala ayitibwa salvia cillum iphone. Seitan aliquip quis cardigan engoye z'omumerika, omunyama voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure ekintu ekitali kya mugaso eky’okubeera eky’obulamu. Fugiat velit proident aliquip nisi incididunt okukola dduyiro w’ennyindo proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id ennyindo okutuula cupidatat mu veniam ad. Eiusmod consequat eu adipisicing ensolo entono ennyo amazzi agayitibwa cupidatat culpa okuggyako quis. Occaecat tuula eu okukola dduyiro irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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.

Cillum ad ut irure akaseera velit ennyindo occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt okukola esse magna mollit okujjako laborum qui. Id id okunenya okutuula est eu aliqua occaecat quis ne velit okuggyako laborum mollit dolore eiusmod. Ipsum dolor mu occaecat commodo ne voluptate ekitono ennyo ekivumirira ekiwuka ekiyitibwa mollit pariatur. Deserunt non laborum enim ne cillum eu okuggyako ekintu ekitali kya kuzaala ekitono ennyo occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Osobola okukola tabu ssekinnoomu mu ngeri eziwerako:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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 oba a data-targetoba an hreftargeting a container node mu DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').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:

  1. hide.bs.tab(ku tabu ekola kati)
  2. show.bs.tab(ku kitundu ekigenda okulagibwa)
  3. hidden.bs.tab(ku tabu ekola emabega, y’emu hide.bs.tabn’ey’omukolo)
  4. 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.targetne event.relatedTargetokutunuulira 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.targetne event.relatedTargetokutunuulira 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.targetne event.relatedTargetokutunuulira 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.targetne event.relatedTargetokutunuulira tabu ekola emabega ne tabu empya ekola, mu kulondako. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})