in English

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

Ders li seranserê têne bikar anîn, ji ber vê yekê nîşankirina we dikare super maqûl be. <ul>Mîna jorîn bikar bînin , <ol>ger rêzika tiştên we girîng e, an jî xwe bi <nav>hêmanek bixin. 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">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">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">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">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">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">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">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="#">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>

Dema ku <nav>navîgasyonek-based bikar tînin, hûn dikarin bi ewlehî ji holê rakin .nav-itemji ber ku tenê .nav-linkji bo <a>hêmanên şêwazê hewce ye.

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

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.

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

Wek .nav-fillmînak bi karanîna <nav>navîgasyonek -based.

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

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

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 navberên tabloyên dînamîkî guncan in, wekî ku di şêwaza tabloyên Rêbernameya Pratîkên Nivîskariya ARIA de tê 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-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>

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

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 tab û hebên me yên navîgasyonê dirêj bikin da ku pelên tabloyên naveroka herêmî biafirînin.

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 şêwaza tabloyên Rêbernameya Pratîkên Nivîskariyê ya ARIA de tê diyar kirin , hewceyê role="tablist", role="tab", role="tabpanel"û aria-taybetmendiyên din in da ku struktur, fonksiyon û rewşa xwe ya heyî ji bikarhênerên teknolojiyên arîkar re (wek xwendevanên ekranê) ragihînin. Wekî pratîkek çêtirîn, em pêşniyar dikin ku <button>hêmanan ji bo tabloyan bikar bînin, ji ber ku ev kontrol in ku guherînek dînamîkî çêdikin, ji bilî girêdanên ku berbi rûpelek an cîhek nû ve diçin.

Bala xwe bidinê ku pêveka JavaScript-a tabê piştgirî nade navrûyên tabloyên ku pêşekên dakêşanê vedihewîne, ji ber ku ev hem dibe sedema pirsgirêkên bikêrhatî û hem jî gihandinê. 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.

Naveroka cîhê ji bo panela tabê. Ev yek bi tabloya malê ve girêdayî ye. We bi mîlometre bilind, ew qas bilind digire, 'ji ber ku wê ew bişirînek navneteweyî heye. Di nav nivînên min de xerîbek heye, di serê min de lêdanek heye. Oh, na. Di jiyanek din de ez ê bikim ku hûn bimînin. Ji ber ku ez, ez dikarim her tiştî bikim. Ji bo şerê taca min guncan e. Ji bo dizîna araqa dê û bavê te û hilkişîna ser banê tê bikaranîn. Tone, tan fit û amade ye, wê bizivirîne sedema giranbûna wê. Evîna wê mîna narkotîkê ye. Ez texmîn dikim ku min ji bîr kir ku min hilbijarkek hebû.

Naveroka cîhê ji bo panela tabê. Ev yek bi tabloya profîlê ve girêdayî ye. We mîmariya herî xweş girt. Mohra pasaportê, ew kozmopolît e. Baş, taze, hov, me ew girt. Qet plan nedikir ku rojekê ez ê te winda bikim. Ew dilê te dixwe. Maçkirina te kozmîk e, her tevger sêhr e. Mebesta min ewan e, ez dibêjim qey ew yek e. Silav hezkirîno em seferê bikin. Tenê xwedan şevek mîna 4-ê Tîrmehê bin! Lê hûn tercîh dikin ku winda bibin.

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>

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

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

Naveroka cîhê ji bo panela tabê. Ev yek bi tabloya malê ve girêdayî ye. We bi mîlometre bilind, ew qas bilind digire, 'ji ber ku wê ew bişirînek navneteweyî heye. Di nav nivînên min de xerîbek heye, di serê min de lêdanek heye. Oh, na. Di jiyanek din de ez ê bikim ku hûn bimînin. Ji ber ku ez, ez dikarim her tiştî bikim. Ji bo şerê taca min guncan e. Ji bo dizîna araqa dê û bavê te û hilkişîna ser banê tê bikaranîn. Tone, tan fit û amade ye, wê bizivirîne sedema giranbûna wê. Evîna wê mîna narkotîkê ye. Ez texmîn dikim ku min ji bîr kir ku min hilbijarkek hebû.

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.

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

Û bi hebên vertical.

Naveroka cîhê ji bo panela tabê. Ev yek bi tabloya malê ve girêdayî ye. We dît ku hûn li navenda bajêr strana Blues dibêjin. Temaşe bikin ku hûn çemberê diherikînin. Çima tu nahêlî ku ez bisekinim? Giran serê ku tacê li xwe dike. Belê, em milyaketan digirîn, ji jor ve baran dibarin. Dixwazin pêşandanê bi 3D, fîlimek bibînin. Ma hûn qet hîs dikin, ew qas kaxez nazik hîs dikin. Erê an na, belkî na.

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>

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

Bi JavaScript

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

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

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

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

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

$().tab

Elementek tabê û konteynir naverokê çalak dike. Pêdivî ye ku tabloyek an data-targetjî, ger girêdanek bikar bîne, hreftaybetmendiyek ku di DOM-ê de girêkek konteynerê armanc dike hebe.

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