Source

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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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: .

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

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

Ge o diriša go <nav>sepelasepela mo go theilwego go -, kgonthišetša gore o akaretša .nav-itemgodimo ga ditshetledi.

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

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

Go swana le .nav-fillmohlala wa go šomiša go <nav>sepelasepela mo go theilwego go -, kgonthiša gore o akaretša .nav-itemgodimo ga ditshetledi.

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

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" href="#" tabindex="-1" aria-disabled="true">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 WAI ARIA Authoring Practices . 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-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>

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

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 diphaephe tša dithepo tša diteng tša lefelong leo, gaešita le ka dimenu tša go theoga.

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 ka go WAI ARIA Authoring Practices , 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).

Hlokomela gore didirišwa tša go dirišana tša dithepo tše di fetogago ga se tša swanela go ba le dimenu tša go theoga, ka ge se se hlola 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.

Raw denim mohlomongwe ga se wa kwa ka bona jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth mong'a hloekisa. Ditedu cliche nakwana, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh mohlapetši wa ditoro synth. Cosby jesi eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.. Ke nyaka go nyoba nnywana ya mosadi. Seitan aliquip quis cardigan liaparo tsa american, butcher 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>

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.

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

The dithepo plugin e boetse e sebetsa le lipilisi.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt e duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt go itšhidulla ga nko go itšhidulla proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud dula cupidat ka veniam papatso. Eiusmod consequat eu adipisicing bonyane sephedi se senyenyane sa go swana le se segolo sa go se be le selo. Occaecat dula eu go itšhidulla 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>

Le ka dipilisi tse emeng.

Cillum ad ut irure nakwana velit nostrud occaecat ullamco aliqua ani Lorem sint. Veniam sint duis incididunt dira esse magna mollit ntle le laborum qui. Id id reprehenderit dula est eu aliqua occaecat quis le velit ntle le laborum mollit dolore eiusmod. Ipsum dolor ka occaecat commodo le voluptate bonyane reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu leloko la go se be le mošomo wa go se be le mošomo o monyenyane 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>

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

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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#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 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. Tab e swanetše go ba le e ka ba a data-targetgoba a go hrefnepiša noutu ya setshelo ka go 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 ('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 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.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:

  1. hide.bs.tab(go thepo ya bjale ye e šomago) .
  2. show.bs.tab(go thepo yeo e tlago go bontšhwa)
  3. hidden.bs.tab(go thepong ya go šoma ya peleng, e swanago le ya hide.bs.tabtiragalo)
  4. 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
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.targetle event.relatedTargetgo 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.targetle event.relatedTargetgo 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.targetle event.relatedTargetgo 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.targetle event.relatedTargetgo nepiša thepo ye e šomago ya peleng le thepo ye mpsha ye e šomago, ka go latelelana. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})