Navs

Dogfennaeth ac enghreifftiau ar gyfer sut i ddefnyddio cydrannau llywio cynnwys Bootstrap.

Sylfaen nav

Mae llywio sydd ar gael yn Bootstrap yn rhannu marciau ac arddulliau cyffredinol, o'r .navdosbarth sylfaen i'r taleithiau gweithredol ac anabl. Cyfnewid dosbarthiadau addaswyr i newid rhwng pob arddull.

Mae'r gydran sylfaen .navwedi'i hadeiladu gyda flexbox ac yn darparu sylfaen gref ar gyfer adeiladu pob math o gydrannau llywio. Mae'n cynnwys rhai gwrthwneud arddull (ar gyfer gweithio gyda rhestrau), rhai padin cyswllt ar gyfer ardaloedd taro mwy, a steilio sylfaenol i bobl anabl.

Nid yw'r gydran sylfaen .navyn cynnwys unrhyw .activegyflwr. Mae'r enghreifftiau canlynol yn cynnwys y dosbarth, yn bennaf i ddangos nad yw'r dosbarth penodol hwn yn sbarduno unrhyw arddull arbennig.

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

Defnyddir dosbarthiadau drwyddi draw, felly gall eich marcio fod yn hynod hyblyg. Defnyddiwch <ul>s fel uchod, <ol>os yw trefn eich eitemau yn bwysig, neu rholiwch eich rhai eich hun gydag <nav>elfen. Oherwydd bod y .navdefnyddiau display: flex, mae'r dolenni nav yn ymddwyn yr un fath ag y byddai eitemau llywio, ond heb y marcio ychwanegol.

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

Arddulliau sydd ar gael

Newid arddull .navcydran s gydag addaswyr a chyfleustodau. Cymysgwch a chyfatebwch yn ôl yr angen, neu adeiladwch un eich hun.

Aliniad llorweddol

Newidiwch aliniad llorweddol eich llywio gyda chyfleustodau flexbox . Yn ddiofyn, mae navs wedi'u halinio i'r chwith, ond gallwch chi eu newid yn hawdd i aliniad canol neu dde.

Wedi'i ganoli gyda .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>

Wedi'i alinio i'r dde gyda .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>

Fertigol

Pentyrru'ch llywio trwy newid cyfeiriad fflecs yr eitem gyda'r .flex-columncyfleustodau. Angen eu pentyrru ar rai mannau gwylio ond nid eraill? Defnyddiwch y fersiynau ymatebol (ee, .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>

Fel bob amser, mae llywio fertigol yn bosibl heb <ul>s, hefyd.

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

Tabiau

Yn cymryd y nav sylfaenol oddi uchod ac yn ychwanegu'r .nav-tabsdosbarth i gynhyrchu rhyngwyneb tabbed. Defnyddiwch nhw i greu rhanbarthau tabladwy gyda'n ategyn tab JavaScript .

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

Pils

Cymerwch yr un HTML, ond defnyddiwch .nav-pillsyn lle hynny:

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

Llenwch a chyfiawnhau

Gorfodwch eich .navcynnwys i ymestyn y lled llawn sydd ar gael un o ddau ddosbarth addasu. I lenwi'r holl le sydd ar gael yn gymesur gyda'ch .nav-items, defnyddiwch .nav-fill. Sylwch fod pob gofod llorweddol yn cael ei feddiannu, ond nid oes gan bob eitem llywio yr un lled.

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

Wrth ddefnyddio <nav>llywio sy'n seiliedig ar -, gallwch yn ddiogel hepgor .nav-itemfel sy'n ofynnol ar gyfer elfennau .nav-linkarddull yn unig.<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>

Ar gyfer elfennau lled cyfartal, defnyddiwch .nav-justified. Bydd yr holl ofod llorweddol yn cael ei feddiannu gan ddolenni nav, ond yn wahanol i'r .nav-filluchod, bydd pob eitem llywio yr un lled.

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

Yn debyg i'r .nav-fillenghraifft gan ddefnyddio <nav>llywio sy'n seiliedig ar -.

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

Gweithio gyda chyfleustodau hyblyg

Os oes angen amrywiadau llywio ymatebol arnoch, ystyriwch ddefnyddio cyfres o gyfleustodau flexbox . Er eu bod yn fwy llafar, mae'r cyfleustodau hyn yn cynnig mwy o addasu ar draws torbwyntiau ymatebol. Yn yr enghraifft isod, bydd ein llywio yn cael ei bentyrru ar y torbwynt isaf, yna'n addasu i gynllun llorweddol sy'n llenwi'r lled sydd ar gael gan ddechrau o'r torbwynt bach.

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

Ynglŷn â hygyrchedd

Os ydych chi'n defnyddio navs i ddarparu bar llywio, gwnewch yn siŵr eich bod yn ychwanegu role="navigation"at gynhwysydd rhiant mwyaf rhesymegol y <ul>, neu lapio <nav>elfen o amgylch y llywio cyfan. Peidiwch ag ychwanegu'r rôl at y rôl <ul>ei hun, gan y byddai hyn yn ei hatal rhag cael ei chyhoeddi fel rhestr wirioneddol gan dechnolegau cynorthwyol.

Sylwch na ddylid rhoi , neu briodoleddau i fariau llywio, hyd yn oed os ydynt wedi'u steilio'n weledol fel tabiau gyda'r .nav-tabsdosbarth . Dim ond ar gyfer rhyngwynebau tabiau deinamig y mae'r rhain yn briodol, fel y disgrifir ym mhatrwm tabiau Canllaw Arferion Awduro ARIA . Gweler ymddygiad JavaScript ar gyfer rhyngwynebau tabbed deinamig yn yr adran hon er enghraifft.role="tablist"role="tab"role="tabpanel"

Defnyddio cwymplenni

Ychwanegwch gwymplenni gydag ychydig o HTML ychwanegol a'r ategyn JavaScript cwymplenni .

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

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

Ymddygiad JavaScript

Defnyddiwch yr ategyn tab JavaScript - ei gynnwys yn unigol neu drwy'r bootstrap.jsffeil a luniwyd - i ymestyn ein tabiau llywio a'n tabledi i greu cwareli tabable o gynnwys lleol.

Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js .

Mae rhyngwynebau tabbed deinamig, fel y disgrifir ym mhatrwm tabiau Canllaw Arferion Awduro ARIA , yn gofyn am role="tablist", role="tab", role="tabpanel", a nodweddion ychwanegol aria-er mwyn cyfleu eu strwythur, eu swyddogaeth a'u cyflwr presennol i ddefnyddwyr technolegau cynorthwyol (fel darllenwyr sgrin). Fel arfer gorau, rydym yn argymell defnyddio <button>elfennau ar gyfer y tabiau, gan mai rheolyddion yw'r rhain sy'n sbarduno newid deinamig, yn hytrach na dolenni sy'n llywio i dudalen neu leoliad newydd.

Sylwch nad yw'r ategyn tab JavaScript yn cefnogi rhyngwynebau tabiau sy'n cynnwys cwymplenni, gan fod y rhain yn achosi problemau defnyddioldeb a hygyrchedd. O safbwynt defnyddioldeb, gall y ffaith nad yw elfen sbardun y tab a ddangosir ar hyn o bryd yn weladwy ar unwaith (gan ei fod y tu mewn i'r gwymplen gaeedig) achosi dryswch. O safbwynt hygyrchedd, nid oes unrhyw ffordd synhwyrol ar hyn o bryd o fapio’r math hwn o adeiladwaith i batrwm safonol ARIA WAI, sy’n golygu na ellir ei wneud yn hawdd i ddefnyddwyr technolegau cynorthwyol ei ddeall.

Cynnwys dalfan ar gyfer y panel tab. Mae'r un hwn yn ymwneud â'r tab cartref. Yn mynd â chi filltiroedd o uchder, mor uchel, 'achos mae ganddi'r un wên ryngwladol honno. Mae yna ddieithryn yn fy ngwely, mae curo yn fy mhen. O na. Mewn bywyd arall byddwn yn gwneud i chi aros. 'Achos I, rwy'n gallu gwneud unrhyw beth. Yn addas ar gyfer fy mrwydr goroni. Wedi'i ddefnyddio i ddwyn gwirod eich rhieni a dringo i'r to. Tôn, tan heini a pharod, trowch ef i fyny achos ei gettin' trwm. Mae ei chariad fel cyffur. Mae'n debyg fy mod wedi anghofio fy mod wedi cael dewis.

Cynnwys dalfan ar gyfer y panel tab. Mae'r un hwn yn ymwneud â'r tab proffil. Rydych chi wedi cael y bensaernïaeth orau. Stampiau pasbort, mae hi'n gosmopolitan. Gain, ffres, ffyrnig, rydym yn ei gael ar glo. Erioed wedi cynllunio y byddwn i'n colli chi un diwrnod. Mae hi'n bwyta'ch calon allan. Mae eich cusan yn gosmig, mae pob symudiad yn hud. Rwy'n golygu'r rhai, rwy'n golygu mai hi yw'r un. Cyfarchion anwyliaid gadewch i ni fynd ar daith. Dim ond yn berchen ar y noson fel y 4ydd o Orffennaf! Ond byddai'n well gennych gael eich gwastraffu.

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>

Er mwyn helpu i gyd-fynd â'ch anghenion, mae hyn yn gweithio gyda <ul>marcio ar sail, fel y dangosir uchod, neu gydag unrhyw farcio “rholio eich hun” mympwyol. Sylwch, os ydych chi'n defnyddio <nav>, ni ddylech ychwanegu'n role="tablist"uniongyrchol ato, gan y byddai hyn yn diystyru rôl frodorol yr elfen fel tirnod llywio. Yn lle hynny, newidiwch i elfen amgen (yn yr enghraifft isod, syml <div>) a lapio <nav>o'i chwmpas.

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>

Mae'r ategyn tabiau hefyd yn gweithio gyda pils.

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

A chyda pils fertigol.

Cynnwys dalfan ar gyfer y panel tab. Mae'r un hwn yn ymwneud â'r tab cartref. Wedi gweld chi ganol y ddinas yn canu'r Gleision. Gwyliwch chi o amgylch y draen. Pam na wnewch chi adael i mi stopio gan? Trwm yw'r pen sy'n gwisgo'r goron. Ydym, gwnawn i angylion wylo, gan fwrw glaw i lawr ar y ddaear oddi uchod. Eisiau gweld y sioe mewn 3D, ffilm. Ydych chi byth yn teimlo, yn teimlo mor denau papur. Mae'n ie neu na, na efallai.

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>

Defnyddio priodoleddau data

Gallwch chi actifadu llywio tab neu bilsen heb ysgrifennu unrhyw JavaScript trwy nodi data-toggle="tab"neu data-toggle="pill"ar elfen yn unig. Defnyddiwch y priodoleddau data hyn ar .nav-tabsneu .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>

Trwy JavaScript

Galluogi tabiau tabadwy trwy JavaScript (mae angen actifadu pob tab yn unigol):

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

Gallwch chi actifadu tabiau unigol mewn sawl ffordd:

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

Effaith pylu

I wneud i dabiau bylu i mewn, ychwanegwch .fadeat bob .tab-pane. Rhaid i'r cwarel tab cyntaf hefyd .showwneud y cynnwys cychwynnol yn weladwy.

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

Dulliau

Dulliau a thrawsnewidiadau anghydamserol

Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .

Gweler ein dogfennaeth JavaScript am ragor o wybodaeth .

$().tab

Yn actifadu elfen tab a chynhwysydd cynnwys. Dylai fod gan dab naill ai nodwedd sy'n targedu nod cynhwysydd yn y DOM data-target, neu os yw'n defnyddio dolen .href

<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('dangos')

Yn dewis y tab a roddir ac yn dangos ei cwarel cysylltiedig. Mae unrhyw dab arall a ddewiswyd o'r blaen yn mynd heb ei ddewis ac mae ei gwarel cysylltiedig wedi'i guddio. Yn dychwelyd i'r galwr cyn i'r cwarel tab gael ei ddangos (hy cyn i'r shown.bs.tabdigwyddiad ddigwydd).

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

.tab ('gwaredu')

Yn dinistrio tab elfen.

Digwyddiadau

Wrth ddangos tab newydd, mae'r digwyddiadau'n tanio yn y drefn ganlynol:

hide.bs.tab(ar y tab gweithredol cyfredol)
show.bs.tab(ar y tab i'w ddangos)
hidden.bs.tab(ar y tab gweithredol blaenorol, yr un un ag ar gyfer y hide.bs.tabdigwyddiad)
shown.bs.tab(ar y tab newydd-weithredol sydd newydd ei ddangos, yr un un ag ar gyfer y show.bs.tabdigwyddiad)

Os nad oedd unrhyw dab eisoes yn weithredol, yna ni fydd y hide.bs.taba hidden.bs.tabdigwyddiadau yn cael eu tanio.

Math o Ddigwyddiad	Disgrifiad
dangos.bs.tab	Mae'r digwyddiad hwn yn tanio ar sioe tab, ond cyn i'r tab newydd gael ei ddangos. Defnyddiwch `event.target`ac `event.relatedTarget`i dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
dangos.bs.tab	Mae'r digwyddiad hwn yn tanio ar sioe dabiau ar ôl i dab gael ei ddangos. Defnyddiwch `event.target`ac `event.relatedTarget`i dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
cuddio.bs.tab	Mae'r digwyddiad hwn yn tanio pan fydd tab newydd yn cael ei ddangos (ac felly mae'r tab gweithredol blaenorol i'w guddio). Defnyddiwch `event.target`ac `event.relatedTarget`i dargedu'r tab gweithredol cyfredol a'r tab newydd cyn bo hir, yn y drefn honno.
cudd.bs.tab	Mae'r digwyddiad hwn yn tanio ar ôl i dab newydd gael ei ddangos (ac felly mae'r tab gweithredol blaenorol wedi'i guddio). Defnyddiwch `event.target`ac `event.relatedTarget`i dargedu'r tab gweithredol blaenorol a'r tab gweithredol newydd, yn y drefn honno.

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