Navs a thabiau

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

Ar y dudalen hon

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.

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.

html

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

html

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

html

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

Wedi'i alinio i'r dde gyda .justify-content-end:

html

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

html

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

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

html

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

html

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

Pils

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

html

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

html

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

html

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

html

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

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

html

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

html

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

html

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

Pils gyda dropdowns

html

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

CSS

Newidynnau

Ychwanegwyd yn v5.2.0

Fel rhan o ddull newidynnau CSS esblygol Bootstrap, mae navs bellach yn defnyddio newidynnau CSS lleol ar .nav, .nav-tabs, ac .nav-pillsar gyfer addasu amser real gwell. Mae gwerthoedd ar gyfer y newidynnau CSS yn cael eu gosod trwy Sass, felly mae addasu Sass yn dal i gael ei gefnogi hefyd.

Ar y .navdosbarth sylfaen:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Ar y .nav-tabsdosbarth addasydd:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Ar y .nav-pillsdosbarth addasydd:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Newidynnau Sass

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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.

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.

Dyma rywfaint o gynnwys dalfan cynnwys cysylltiedig y tab Proffil . 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 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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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.

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 Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Mae'r ategyn tabiau hefyd yn gweithio gyda pils.

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

A chyda pils fertigol. Yn ddelfrydol, ar gyfer tabiau fertigol, dylech hefyd ychwanegu aria-orientation="vertical"at y cynhwysydd rhestr tab.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Hygyrchedd

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.

Yn unol â phatrwm Arferion Awduro ARIA, dim ond y tab gweithredol presennol sy'n derbyn ffocws bysellfwrdd. Pan fydd yr ategyn JavaScript wedi'i gychwyn, bydd yn gosod tabindex="-1"yr holl reolaethau tab anactif. Unwaith y bydd y tab sy'n weithredol ar hyn o bryd wedi ffocws, mae'r bysellau cyrchwr yn actifadu'r tab blaenorol / nesaf, gyda'r ategyn yn newid y crwydrotabindex yn unol â hynny. Fodd bynnag, nodwch nad yw'r ategyn JavaScript yn gwahaniaethu rhwng rhestrau tab llorweddol a fertigol o ran rhyngweithiadau allwedd cyrchwr: waeth beth fo cyfeiriadedd y rhestr tab, mae'r cyrchwr i fyny ac i'r chwith yn mynd i'r tab blaenorol, ac i lawr ac i'r dde ewch i'r cyrchwr y tab nesaf.

Yn gyffredinol, er mwyn hwyluso llywio bysellfwrdd, argymhellir gwneud y paneli tab eu hunain yn ffocws hefyd, oni bai bod yr elfen gyntaf sy'n cynnwys cynnwys ystyrlon y tu mewn i'r panel tab eisoes yn ffocws. Nid yw'r ategyn JavaScript yn ceisio delio â'r agwedd hon - lle bo'n briodol, bydd angen i chi wneud eich paneli tab yn benodol yn ffocws trwy ychwanegu tabindex="0"eich marcio.

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

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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Trwy JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

Gallwch chi actifadu tabiau unigol mewn sawl ffordd:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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 .

Yn actifadu'ch cynnwys fel elfen tab.

Gallwch greu enghraifft tab gyda'r adeiladwr, er enghraifft:

const bsTab = new bootstrap.Tab('#myTab')

Dull	Disgrifiad
`dispose`	Yn dinistrio tab elfen.
`getInstance`	Dull statig sy'n eich galluogi i gael yr enghraifft tab yn gysylltiedig ag elfen DOM, gallwch ei ddefnyddio fel hyn: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Dull statig sy'n dychwelyd enghraifft tab sy'n gysylltiedig ag elfen DOM neu greu un newydd rhag ofn na chafodd ei gychwyn. Gallwch ei ddefnyddio fel hyn: `bootstrap.Tab.getOrCreateInstance(element)`.
`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.tab`digwyddiad ddigwydd).

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

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