Navs a thabiau

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

Ar y dudalen hon

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

I gyfleu'r cyflwr gweithredol i dechnolegau cynorthwyol, defnyddiwch y aria-currentpriodoledd - gan ddefnyddio'r pagegwerth ar gyfer y dudalen gyfredol, neu truear gyfer yr eitem gyfredol mewn set.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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 , na phriodoleddau i fariau llywio, hyd yn oed os ydynt wedi'u steilio'n weledol fel tabiau gyda'r .nav-tabsdosbarth . Dim ond ar gyfer rhyngwynebau tabbed deinamig y mae'r rhain yn briodol, fel y disgrifir yn Arferion Awduro ARIA WAI . Gweler ymddygiad JavaScript ar gyfer rhyngwynebau tabbed deinamig yn yr adran hon er enghraifft. Nid yw'r priodoledd yn angenrheidiol ar ryngwynebau tabbed deinamig gan fod ein JavaScript yn trin y cyflwr a ddewiswyd trwy ychwanegu ar y tab gweithredol.role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Pils gyda dropdowns

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sass

Newidynnau

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

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.

Mae rhyngwynebau tabbed deinamig, fel y disgrifir yn Arferion Awduro ARIA WAI , 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 na ddylai rhyngwynebau tabbed deinamig gynnwys cwymplenni, gan fod hyn 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 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.

Dyma rywfaint o gynnwys dalfan cynnwys cysylltiedig y tab Cartref. Bydd clicio ar dab arall yn newid gwelededd yr un hwn ar gyfer y nesaf. Mae'r tab JavaScript yn cyfnewid dosbarthiadau i reoli gwelededd ac arddull y cynnwys. Gallwch ei ddefnyddio gyda thabiau, tabledi, ac unrhyw .navlywio â phwer arall.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <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>

Defnyddio priodoleddau data

Gallwch chi actifadu llywio tab neu bilsen heb ysgrifennu unrhyw JavaScript trwy nodi data-bs-toggle="tab"neu data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Gallwch chi actifadu tabiau unigol mewn sawl ffordd:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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 .

constructor

Yn actifadu elfen tab a chynhwysydd cynnwys. Dylai fod gan dab naill ai nodwedd data-bs-targetneu, os yw'n defnyddio dolen, hrefnodwedd sy'n targedu nod cynhwysydd yn y 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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

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

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

dispose

Yn dinistrio tab elfen.

getInstance

Dull statig sy'n eich galluogi i gael yr enghraifft tab yn gysylltiedig ag elfen DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Dull statig sy'n eich galluogi i gael yr enghraifft tab yn gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Events

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
`show.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.
`shown.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.
`hide.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.
`hidden.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.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})