Source

Navs

Belgekirin û nimûneyên ji bo meriv çawa Bootstrap-ê hêmanên navîgasyonê bikar tîne.

Navê bingehîn

Navîgasyon ku di Bootstrap de peyda dibe, nîşankirin û şêwazên gelemperî, ji .navçîna bingehîn bigire heya dewletên çalak û neçalak. Dersên guhêrbar biguhezînin da ku di navbera her şêwazê de biguhezînin.

Parçeya bingehîn .navbi flexbox ve hatî çêkirin û bingehek bihêz ji bo avakirina hemî celeb pêkhateyên navîgasyonê peyda dike. Di nav xwe de hin guheztinên şêwazê (ji bo xebata bi navnîşan) vedihewîne, hin peldanka girêdanê ji bo deverên lêdan ên mezin, û şêwaza bingehîn a astengdar vedihewîne.

Pêkhateya bingehîn .navtu dewletî nagire nav xwe .active. Mînakên jêrîn polê vedigirin, bi taybetî ji bo ku nîşan bidin ku ev çîna taybetî tu şêwazek taybetî dernakeve.

<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="#">Disabled</a>
  </li>
</ul>

Ders li seranserê têne bikar anîn, ji ber vê yekê nîşankirina we dikare super maqûl be. Mîna li jor bikar bînin <ul>, an jî xwe bi <nav>hêmanek bêjin. Ji ber ku .navkaranîn display: flex, girêdanên navî wekî tiştên navokê tevdigerin, lê bêyî nîşana zêde.

<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="#">Disabled</a>
</nav>

Şêweyên berdest

Bi guherbar û karûbaran şêwaza .navpêkhateya s biguherînin. Li gorî hewcedariyê tevlihev bikin û li hev bikin, an ya xwe ava bikin.

Alignment Horizontal

Bi karûbarên flexbox re hevrêziya horizontî ya navika xwe biguhezînin . Ji hêla xwerû ve, navok li çepê têne rêz kirin, lê hûn dikarin bi hêsanî wan biguhezînin navend an rastê.

Navendî bi .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="#">Disabled</a>
  </li>
</ul>

Rast-rast bi .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="#">Disabled</a>
  </li>
</ul>

Çikanî

Navîgasyona xwe bi guheztina rêgeziya babetê nerm bi kargêriyê ve .flex-columnbiguhezînin. Ma hûn hewce ne ku wan li ser hin dîmenderan bixin lê ne yên din? Guhertoyên bersivdar bikar bînin (mînak, .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="#">Disabled</a>
  </li>
</ul>

Mîna her gav, navîgasyon vertîkal bêyî <ul>s jî gengaz e.

<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="#">Disabled</a>
</nav>

Tabs

Navê bingehîn ji jor digire û .nav-tabspolê lê zêde dike da ku navbeynek tablo çêbike. Wan bikar bînin da ku bi pêveka meya JavaScript tabê re herêmên tabloyê biafirînin .

<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="#">Disabled</a>
  </li>
</ul>

Pills

Heman HTML-ê bistînin, lê li şûna wê bikar .nav-pillsbînin:

<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="#">Disabled</a>
  </li>
</ul>

Dagirtin û rewa kirin

Bi zorê naverokên xwe .navbidin ku firehiya berdest yek ji du çînên guhêrbar dirêj bike. Ji bo ku bi s-ya xwe bi rêjeyî hemî cîhê berdest tijî bikin .nav-item, bikar bînin .nav-fill. Bala xwe bidinê ku hemî cîhê horizontî dagirkirî ye, lê ne her babet navokê xwedî heman firehiyê ye.

<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="#">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="#">Disabled</a>
  </li>
</ul>

Dema ku <nav>navîgasyonek-bingeh bikar bînin, pê ewle bin ku .nav-itemli ser lengeran tevbigerin.

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

Ji bo hêmanên wekhev-fireh, bikar bînin .nav-justified. Hemî cîhê horizontî dê ji hêla girêdanên navikê ve were dagîr kirin, lê berevajî ya .nav-filljorîn, her babet nav dê heman firehiyê be.

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

Mîna .nav-fillmînaka ku <nav>navîgasyonek-based bikar tîne, pê ewle bin ku .nav-itemli ser lengeran têxin nav xwe.

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

Bi karûbarên flex re dixebitin

Heke hûn hewceyê guhertoyên nav-ê yên bersivdar in, bi karanîna rêzek karûbarên flexbox -ê bifikirin . Digel ku bêtir devkî, van karûbaran di nav xalên veqetandinê yên bersivdar de xwerûkirina mezintir pêşkêş dikin. Di mînaka li jêr de, navika me dê li ser xala veqetînê ya herî nizm were danîn, dûv re bi sêwirana horizontî ya ku ji xala veqetînê ya piçûk dest pê dike firehiya berdest tije dike.

<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="#">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="#">Disabled</a>
</nav>

Di derbarê gihîştinê de

Heke hûn navîgasyonê bikar tînin da ku barek navîgasyon peyda bikin, pê ewle bin ku hûn a role="navigation"li konteynera dêûbavê ya herî mantiqî ya <ul>, an jî <nav>hêmanek li dora tevaya navîgasyonê bipêçin. Rolê li <ul>xwe zêde nekin, ji ber ku ev ê rê li ber ku ew wekî navnîşek rastîn ji hêla teknolojiyên arîkar ve were ragihandin.

Bala xwe bidinê ku barên navîgasyonê, her çend bi dîtbarî wekî tabloyên bi .nav-tabspolê re were şêwaz kirin, divê neyên dayîn role="tablist", role="tab"an role="tabpanel"taybetmendî. Vana tenê ji bo navbeynkên tabloyên dînamîkî guncan in, wekî ku di Pratîkên Nivîsandina WAI ARIA de têne diyar kirin . Di vê beşê de ji bo mînakek tevgerên JavaScript -ê ji bo navrûyên tabloyên dînamîkî bibînin .

Bikaranîna peldankan

Pêşekên daketinê bi HTML-ya piçûktir û pêveka JavaScript -a daketî zêde bikin.

Tabên bi daxistinan

<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="#">Disabled</a>
  </li>
</ul>

Pills bi 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="#">Disabled</a>
  </li>
</ul>

tevgera JavaScript

Pêveka JavaScript-a tabê bikar bînin - wê bi serê xwe an bi bootstrap.jspelê berhevkirî ve têxin nav xwe - da ku tablo û hebên me yên navîgasyonê dirêj bikin da ku paceyên tabloyên naveroka herêmî biafirînin, tewra bi navgîniya pêşekên dakêşanê.

Heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dikeutil.js .

Têkiliyên tabloyên dînamîk, wekî ku di Pratîkên Nivîskariya WAI ARIA de têne diyar kirin , hewceyê role="tablist", role="tab", role="tabpanel", û aria-taybetmendiyên zêde hene da ku struktur, fonksiyon û rewşa xwe ya heyî ji bikarhênerên teknolojiyên arîkar re (wek xwendevanên ekranê) ragihînin.

Bala xwe bidinê ku navberên tabloyên dînamîkî divê pêşekên dakêşanê nehewînin, ji ber ku ev dibe sedema pirsgirêkên bikêr û gihîştinê. Ji perspektîfek karanîna, rastiya ku hêmana tabloya ku niha tê xuyang kirin tavilê nayê xuyang kirin (ji ber ku ew di hundurê menuya dakêşana girtî de ye) dikare bibe sedema tevliheviyê. Ji nihêrîna gihîştinê, heya niha rêyek maqûl tune ku meriv bi vî rengî avahîsaziyê bi şêwazek standard WAI ARIA nexşe bike, tê vê wateyê ku ew bi hêsanî ji bikarhênerên teknolojiyên arîkar re nayê fam kirin.

Denim raw belkî we nebihîstiye ji wan jean shorts Austin. Nesciunt tofu stumptown aliqua, paqijkirina masterê synth retro. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip cîhê salvia cillum iphone. Seitan aliquip quis cardigan kincên amerîkî, qesab 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>

Ji bo ku ji hewcedariyên we re bibe alîkar, ev bi <ul>nîşankirina-bingehîn, wekî ku li jor hatî destnîşan kirin, an bi nîşanek "xweya xweya xwe" ya kêfî re dixebite. Bala xwe bidinê ku heke hûn bikar tînin <nav>, divê hûn role="tablist"rasterast lê zêde nekin, ji ber ku ev ê rola xweya elementê wekî nîşana navîgasyonê bişkîne. Di şûna wê de, veguhezînin hêmanek alternatîf (di mînaka jêrîn de, a hêsan <div>) û li <nav>dora wê bipêçin.

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

Pêveka tabê jî bi hebanan re dixebite.

Encama occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa exclusiveeur quis. Occaecat sit eu exercitation 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>

Û bi hebên vertical.

Ji ber vê yekê, ji bo ku hûn ji bo vê yekê biqewimin e ku ji bo demek dirêj ve girêdayî ye. Veniam sint duis incididunt do esse magna mollit bilî laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et illum eu deserunt onlyeur ea incididunt minim 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>

Taybetmendiyên daneyê bikar tînin

Hûn dikarin navîgasyonek tabloyek an pileyek bêyî nivîsandina JavaScriptê bi tenê diyar kirin data-toggle="tab"an data-toggle="pill"li ser hêmanek çalak bikin. Van taybetmendiyên daneyê li ser .nav-tabsan bikar bînin .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>

Bi JavaScript

Bi JavaScript-ê tabloyên tabloyê çalak bikin (pêdivî ye ku her tabloyek kesane were çalak kirin):

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

Hûn dikarin tabloyên kesane bi çend awayan çalak bikin:

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

Bandora fade

Ji bo ku tabloyan bişewitînin, li her yekê zêde .fadebikin .tab-pane. Pêdivî ye ku tabloya yekem jî pêdivî .showye ku naveroka destpêkê xuya bike.

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

Methods

Rêbaz û veguherînên Asynchronous

Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê binêrin.

$().tab

Elementek tabê û konteynir naverokê çalak dike. Tabê pêdivî ye ku di DOM-ê de girêkek konteynerê data-targetan jî armancek hebe.href

<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('nîşan bide')

Tabloya diyarkirî hildibijêre û panela wê ya têkildar nîşan dide. Her tabloyek din a ku berê hatibû hilbijartin, nehilbijartî dibe û pencereya wê ya têkildar tê veşartin. Berî ku tablo bi rastî were xuyang kirin (ango berî ku shown.bs.tabbûyer çêbibe) vedigere bangewazî.

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

.tab('dispose')

Tabloya hêmanekê hilweşîne.

Events

Dema ku tabloyek nû nîşan dide, bûyer bi rêza jêrîn dişewitin:

  1. hide.bs.tab(li ser tabloya çalak a heyî)
  2. show.bs.tab(li ser tabloya ku tê xuyang kirin)
  3. hidden.bs.tab(li ser tabloya çalak a berê, heman wekî hide.bs.tabbûyerê)
  4. shown.bs.tab(li ser tabloya ku nû-çalak hatî xuyang kirin, heman wekî show.bs.tabbûyerê)

Ger tu tablo jixwe çalak nebûya, wê hingê hide.bs.tabû hidden.bs.tabbûyer nayên avêtin.

Cureyê bûyerê Terîf
nîşan bide.bs.tab Ev bûyer di pêşandana tabloyê de dişewite, lê berî ku tabloya nû were xuyang kirin. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
nîşan dan.bs.tab Ev bûyer piştî ku tabloyek hate pêşandan li ser pêşandana tabê derdikeve. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
veşêre.bs.tab Dema ku tabloyek nû were xuyang kirin ev bûyer dişewite (û bi vî rengî tabloya çalak a berê were veşartin). Bi rêzê ve tabloya aktîf a heyî û tabloya nû ya zû-çalak bibe event.targetû armanc bikin.event.relatedTarget
veşartî.bs.tab Ev bûyer piştî ku tabloyek nû tê xuyang kirin dişewite (û bi vî rengî tabloya çalak a berê tê veşartin). Bi rêzê ve tabloya çalak a berê û tabloya nû ya çalak bikar bînin event.targetû bikin hedef.event.relatedTarget 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})