Navs

Sgrìobhainnean agus eisimpleirean airson mar a chleachdas tu co-phàirtean seòlaidh Bootstrap.

Bun nav

Bidh seòladh a tha ri fhaighinn ann am Bootstrap a’ roinn comharran coitcheann agus stoidhlichean, bhon bhun- .navchlas gu na stàitean gnìomhach agus ciorramach. Dèan iomlaid air clasaichean mion-atharrachaidh gus gluasad eadar gach stoidhle.

Tha am pàirt bunaiteach .navair a thogail le flexbox agus a’ toirt bunait làidir airson a h-uile seòrsa de cho-phàirtean seòlaidh a thogail. Tha e a’ toirt a-steach cuid de stoidhlichean a’ dol thairis (airson a bhith ag obair le liostaichean), cuid de phlugadh ceangail airson raointean a tha air am bualadh nas motha, agus stoidhle bunaiteach ciorramach.

.navChan eil am pàirt bunaiteach a’ toirt a-steach .activestaid sam bith. Tha na h-eisimpleirean a leanas a’ toirt a-steach a’ chlas, gu h-àraidh airson sealltainn nach eil an clas sònraichte seo a’ brosnachadh stoidhle sònraichte sam bith.

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

Bithear a’ cleachdadh chlasaichean air feadh, agus mar sin faodaidh do chomharradh a bhith air leth sùbailte. Cleachd <ul>na rudan gu h-àrd, <ol>ma tha òrdugh nan nithean agad cudromach, no rolaich do chuid fhèin le <nav>eileamaid. Leis gu bheil na .navcleachdaidhean display: flex, bidh na ceanglaichean nav gan giùlan fhèin mar a bhiodh nithean nav, ach às aonais a’ chomharra a bharrachd.

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

Stoidhlichean rim faighinn

Atharraich stoidhle .navco-phàirt s le mion-atharraichean agus goireasan. Meudaich agus maids mar a dh ’fheumar, no tog do chuid fhèin.

Co-thaobhadh còmhnard

Atharraich co-thaobhadh còmhnard do nav le goireasan flexbox . Gu gnàthach, tha navs co-thaobhadh clì, ach is urrainn dhut gu furasta an atharrachadh gu meadhan no co-thaobhadh deas.

Air a chuimseachadh le .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>

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

Inghearach

Stack do sheòladh le bhith ag atharrachadh stiùireadh an nì flex leis a’ .flex-columnghoireas. Am feum thu an cruachadh air cuid de phuirt-seallaidh ach chan eil feadhainn eile? Cleachd na dreachan freagairteach (me, .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>

Mar as àbhaist, tha seòladh dìreach comasach às aonais <ul>s, cuideachd.

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

Tabaichean

A’ gabhail an nòs bunaiteach bho shuas agus a’ cur ris a’ .nav-tabschlas gus eadar-aghaidh tabaichte a chruthachadh. Cleachd iad gus roinnean tabable a chruthachadh leis a ’ plugan tab JavaScript againn .

<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

Gabh an aon HTML sin, ach cleachd .nav-pillsan àite sin:

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

Lìon agus fìreanachadh

Thoir .navair na tha anns an t-susbaint agad an leud iomlan a leudachadh aon de dhà chlas mion-atharrachaidh. Gus a h-uile àite a tha ri fhaighinn a lìonadh leis na .nav-items agad, cleachd .nav-fill. Mothaich gu bheil a h-uile àite còmhnard air a chleachdadh, ach chan eil an aon leud aig a h-uile nì seòlaidh.

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

Nuair a bhios tu a’ cleachdadh <nav>seòladh stèidhichte, faodaidh tu fàgail a-mach gu sàbhailte .nav-itemmar a tha riatanach airson eileamaidean .nav-linkstoidhle .<a>

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

Airson eileamaidean de leud co-ionann, cleachd .nav-justified. Bidh a h-uile àite còmhnard air a ghabhail a-steach le ceanglaichean nav, ach eu-coltach ris na tha gu h- .nav-fillàrd, bidh gach nì seòlaidh den aon leud.

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

Coltach ris an .nav-filleisimpleir a 'cleachdadh <nav>seòladh stèidhichte.

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

Ag obair le flex utilities

Ma tha feum agad air atharrachaidhean freagairteach nav, smaoinich air a bhith a’ cleachdadh sreath de ghoireasan flexbox . Fhad ‘s a tha iad nas gnìomhaiche, tha na goireasan sin a’ tabhann barrachd gnàthachaidh thairis air puingean brisidh freagairteach. Anns an eisimpleir gu h-ìosal, bidh an inneal-seòlaidh againn air a chruachadh air a’ phuing-bhriseadh as ìsle, agus an uairsin atharraichidh e gu cruth còmhnard a lìonas an leud a tha ri fhaighinn a’ tòiseachadh bhon àite brisidh bheag.

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

A thaobh ruigsinneachd

Ma tha thu a’ cleachdadh navs gus bàr seòlaidh a sholarachadh, bi cinnteach gun cuir thu ris role="navigation"a’ ghobhar phàrant as loidsigeach den <ul>, no paisg <nav>eileamaid timcheall an t-seòlaidh gu lèir. Na cuir an dreuchd ris <ul>fhèin, oir chuireadh seo stad air bho bhith air ainmeachadh mar fhìor liosta le teicneòlasan taice.

Thoir an aire nach bu chòir , no buadhan a thoirt do bhàraichean seòlaidh, eadhon ged a tha iad air an ainmeachadh mar tabaichean leis a’ .nav-tabschlas . Chan eil iad sin iomchaidh ach airson eadar-aghaidh tabbed fiùghantach, mar a chaidh a mhìneachadh ann am pàtran tabaichean Stiùireadh Cleachdaidhean Ùghdarrachaidh ARIA . Faic giùlan JavaScript airson eadar-aghaidh tabbed fiùghantach san roinn seo airson eisimpleir.role="tablist"role="tab"role="tabpanel"

A 'cleachdadh dropdowns

Cuir clàran-bìdh sìos le beagan HTML a bharrachd agus am plugan tuiteam-sìos JavaScript .

Tabaichean le dropdowns

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

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

Giùlan JavaScript

Cleachd am plugan tab JavaScript - cuir a-steach e leotha fhèin no tron bootstrap.jsfhaidhle cruinnichte - gus na tabaichean seòlaidh agus na pills againn a leudachadh gus panalan tabable de shusbaint ionadail a chruthachadh.

Ma tha thu a’ togail ar JavaScript bhon tùs, feumaidhutil.js e .

Feumaidh eadar-aghaidh tabbed fiùghantach, mar a chaidh a mhìneachadh ann am pàtran tabaichean Stiùireadh Cleachdaidhean Ùghdarrachaidh ARIA , role="tablist", role="tab", role="tabpanel", agus aria-buadhan a bharrachd gus an structar, an comas-gnìomh agus an staid làithreach a thoirt do luchd-cleachdaidh teicneòlasan taice (leithid leughadairean sgrion). Mar chleachdadh as fheàrr, tha sinn a’ moladh <button>eileamaidean a chleachdadh airson nan tabaichean, oir is e smachdan a tha seo a bhrosnaicheas atharrachadh fiùghantach, seach ceanglaichean a bhios a’ seòladh gu duilleag no àite ùr.

Thoir an aire nach eil am plugan tab JavaScript a’ toirt taic do eadar-aghaidh tabaichean anns a bheil clàir-thaice, leis gu bheil iad sin ag adhbhrachadh duilgheadasan cleachdaidh agus ruigsinneachd. Bho shealladh cleachdaidh, faodaidh an fhìrinn nach eil eileamaid brosnachaidh an taba a tha air a thaisbeanadh an-dràsta ri fhaicinn sa bhad (leis gu bheil e taobh a-staigh a ’chlàr tuiteam-sìos dùinte) troimh-chèile adhbhrachadh. Bho thaobh ruigsinneachd, chan eil dòigh reusanta ann an-dràsta an seòrsa togail seo a mhapadh gu pàtran àbhaisteach WAI ARIA, a’ ciallachadh nach urrainn dha a bhith furasta a thuigsinn do luchd-cleachdaidh theicneòlasan taice.

Susbaint neach-àite airson pannal nan tabaichean. Tha am fear seo co-cheangailte ris an taba dachaigh. Bheir i mìltean àrd, cho àrd, oir tha an aon ghàire eadar-nàiseanta sin aice. Tha coigreach na mo leabaidh, tha punnd na mo cheann. O, chan eil. Ann am beatha eile bheir mi ort fuireach. ‘Adhbhar mi, tha mi comasach air rud sam bith. Freagarrach airson mo bhlàr crùnaidh. Air a chleachdadh airson deoch-làidir do phàrantan a ghoid agus a dhìreadh chun mhullach. Tòn, tan iomchaidh agus deiseil, tionndaidh suas e ag adhbhrachadh gu bheil e trom. Tha a gaol coltach ri droga. Tha mi creidsinn gun do dhìochuimhnich mi gun robh roghainn agam.

Susbaint neach-àite airson pannal nan tabaichean. Tha am fear seo co-cheangailte ris an taba pròifil. Fhuair thu an ailtireachd as fheàrr. Stampaichean cead-siubhail, tha i cosmopolitan. Gu math, ùr, fann, fhuair sinn air glas e. Cha robh dùil agam gum biodh mi aon latha gad chall. Bidh i ag ithe do chridhe a-mach. Tha do phòg cosmach, tha a h-uile gluasad draoidheil. Tha mi a’ ciallachadh an fheadhainn, tha mi a’ ciallachadh mar is i an tè. Beannachdan luchd-gràidh leig leinn turas a ghabhail. Dìreach sealbhaich an oidhche mar an 4mh den Iuchar! Ach b’ fheàrr leat a dhol air chall.

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>

Gus cuideachadh le bhith a’ freagairt air na feumalachdan agad, bidh seo ag obair le <ul>comharradh stèidhichte, mar a chithear gu h-àrd, no le comharradh neo-riaghailteach “rol do chuid fhèin”. Thoir an aire ma tha thu a’ cleachdadh <nav>, cha bu chòir dhut cur ris role="tablist"gu dìreach, oir bhiodh seo a’ dol thairis air àite dùthchasach an eileamaid mar chomharra-tìre seòlaidh. An àite sin, gluais gu eileamaid eile (san eisimpleir gu h-ìosal, sìmplidh <div>) agus cuir <nav>timcheall air.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Bidh am plugan tabaichean cuideachd ag obair le pills.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Agus le pills dìreach.

Susbaint neach-àite airson pannal nan tabaichean. Tha am fear seo co-cheangailte ris an taba dachaigh. Chunnaic mi thu meadhan a’ bhaile a’ seinn nan Blues. Feuch gum bi thu a’ cuairteachadh an drain. Carson nach leig thu leam stad? Is trom an ceann a bhios a’ caitheamh a’ chrùin. Seadh, bheir sinn air ainglean caoineadh, a' sileadh sìos air thalamh bho shuas. Tha mi airson an taisbeanadh fhaicinn ann an 3D, film. A bheil thu a-riamh a’ faireachdainn, a’ faireachdainn cho tana pàipear. Is e tha no chan eil, chan eil is dòcha.

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>

A’ cleachdadh feartan dàta

Faodaidh tu seòladh taba no pill a chuir an gnìomh gun JavaScript sam bith a sgrìobhadh le bhith dìreach a’ sònrachadh data-toggle="tab"no data-toggle="pill"air eileamaid. Cleachd na buadhan dàta seo air .nav-tabsno .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>

Air sgàth javascript

Dèan comas air tabaichean tabable tro JavaScript (feumaidh gach taba a chuir an gnìomh leotha fhèin):

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

Faodaidh tu tabaichean fa leth a chuir an gnìomh ann an grunn dhòighean:

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

A 'bhuaidh a dh' fhalbh

Gus toirt air tabaichean a dhol a-steach, cuir .faderis gach .tab-pane. Feumaidh a’ chiad phana taba cuideachd .showan susbaint tùsail a dhèanamh follaiseach.

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

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .

$().tab

Cuir an gnìomh eileamaid tab agus inneal susbaint. Bu chòir gum biodh an dàrna cuid aig tab data-targetno, ma chleachdas tu ceangal, hreffeart a tha ag amas air nód soithich anns an DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('show')

Tagh an taba a chaidh a thoirt seachad agus seallaidh e am pana co-cheangailte ris. Bidh taba sam bith eile a chaidh a thaghadh roimhe gun a bhith air a thaghadh agus tha am pana co-cheangailte ris falaichte. Tillidh e chun neach-fios mus deach am pana taba a shealltainn (ie mus tachair an shown.bs.tabtachartas).

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

.tab ('cuir air falbh')

A 'sgrios tab eileamaid.

Tachartasan

Nuair a sheallas tu taba ùr, bidh na tachartasan a’ losgadh san òrdugh a leanas:

hide.bs.tab(air an taba gnìomhach làithreach)
show.bs.tab(air an taba a tha ri fhaicinn)
hidden.bs.tab(air an taba gnìomhach roimhe, an aon fhear ris an hide.bs.tabtachartas)
shown.bs.tab(air an taba a tha dìreach air a thaisbeanadh gu gnìomhach, an aon fhear ris an show.bs.tabtachartas)

Mura robh taba gnìomhach mu thràth, cha tèid na tachartasan hide.bs.tabagus na tachartasan a chuir às.hidden.bs.tab

Seòrsa Tachartas	Tuairisgeul
seall.bs.tab	Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
air a shealltainn.bs.tab	Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
seiche.bs.tab	Bidh an tachartas seo a’ losgadh nuair a tha taba ùr gu bhith air a shealltainn (agus mar sin tha an taba gnìomhach roimhe gu bhith falaichte). Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach gnàthach agus an taba ùr a dh’ aithghearr gu bhith gnìomhach, fa leth.
falaichte.bs.tab	Bidh an tachartas seo a’ losgadh às deidh taba ùr a nochdadh (agus mar sin tha an taba gnìomhach roimhe falaichte). Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach roimhe agus an taba gnìomhach ùr, fa leth.

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