Amato na tabs

Inyandiko n'ingero z'uburyo wakoresha Bootstrap irimo ibice byo kugenda.

Kuriyi page

Base nav

Kugenda kuboneka muri Bootstrap gusangira ibimenyetso rusange nuburyo, kuva murwego shingiro .navkugeza kuri leta ikora kandi ifite ubumuga. Swap modifier ibyiciro kugirango uhindure hagati yuburyo bwose.

Ibice fatizo .navbyubatswe na flexbox kandi bitanga umusingi ukomeye wo kubaka ubwoko bwose bwibikoresho byo kugenda. Harimo uburyo bumwe burenze (bwo gukorana nurutonde), guhuza padding kubice binini byibasiwe, hamwe nubumuga bwibanze.

Ibice shingiro .navntabwo birimo .activeleta iyo ariyo yose. Ingero zikurikira zirimo icyiciro, cyane cyane kwerekana ko iri somo ryihariye ridatera imiterere idasanzwe.

Kugirango utange leta ikora kugirango ifashe tekinoloji, koresha aria-currentikiranga - ukoresheje pageagaciro kurupapuro rwubu, cyangwa truekubintu biri mumurongo.

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>

Amasomo akoreshwa mugihe cyose, marike yawe rero irashobora guhinduka cyane. Koresha <ul>s nkibi byavuzwe haruguru, <ol>niba gahunda yibintu byawe ari ngombwa, cyangwa uzunguruke ibyawe hamwe <nav>nikintu. Kuberako .navikoreshwa display: flex, nav ihuza yitwara nkibintu bya nav byabikora, ariko nta marike yinyongera.

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>

Uburyo buboneka

Hindura uburyo bwa .navs ibice hamwe nabahindura nibikorwa. Kuvanga no guhuza nkuko bikenewe, cyangwa wubake ibyawe.

Guhuza utambitse

Hindura itambitse rya horizontal ya nav yawe hamwe na flexbox yingirakamaro . Mburabuzi, navs ihujwe-ibumoso, ariko urashobora kuyihindura byoroshye hagati cyangwa iburyo.

Hagati hamwe .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>

Guhuza iburyo na .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>

Uhagaritse

Shyira inzira yawe muguhindura flex icyerekezo icyerekezo hamwe .flex-columnningirakamaro. Ukeneye kubishyira kumurongo runaka ariko sibyo? Koresha verisiyo isubiza (urugero, .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>

Nkibisanzwe, vertical vertical ishoboka nta <ul>s, nayo.

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>

Tab

Fata nav shingiro kuva hejuru hanyuma wongereho urwego .nav-tabsrwo kubyara interineti. Koresha kugirango ukore uturere twimbonerahamwe hamwe na tab ya JavaScript plugin .

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>

Ibinini

Fata iyo HTML imwe, ariko ukoreshe .nav-pillsaho:

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>

Uzuza kandi ufite ishingiro

Hata .navibikubiyemo kugirango wongere ubugari bwuzuye buboneka kimwe mubyiciro bibiri bihindura. Kugereranya kuzuza umwanya wose uboneka hamwe na .nav-items, koresha .nav-fill. Menya ko umwanya wose utambitse urimo, ariko ntabwo buri kintu cya nav gifite ubugari bumwe.

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>

Mugihe ukoresheje inzira <nav>-ishingiye kugendagenda, urashobora gusiba neza .nav-itemnkuko .nav-linkbisabwa gusa muburyo bwo gutunganya <a>ibintu.

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>

Kubintu bingana-ubugari, koresha .nav-justified. Umwanya wose utambitse uzaba ufitwe na nav ihuza, ariko bitandukanye navuzwe .nav-fillharuguru, buri nav ikintu kizaba ubugari bumwe.

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>

Bisa .nav-fillnurugero ukoresheje <nav>-bishingiye kugendagenda.

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>

Gukorana na flex utilities

Niba ukeneye ibisubizo bitandukanya nav, tekereza gukoresha urukurikirane rwibikorwa bya flexbox . Mugihe inshinga nyinshi, izi nyungu zitanga ibisobanuro byinshi murwego rwo gusubiza. Murugero rukurikira, nav yacu izashyirwa kumurongo wo hasi cyane, hanyuma ihuze imiterere itambitse yuzuza ubugari buboneka guhera kumyanya mito.

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>

Kubyerekeye kugerwaho

Niba ukoresha navs kugirango utange inzira yo kugendagenda, menya neza ko wongeraho role="navigation"kubintu byumvikana byababyeyi byabigenewe <ul>, cyangwa <nav>uzenguruke ikintu hafi yikigenda cyose. Ntukongere uruhare <ul>rwonyine, kuko ibi byakubuza gutangazwa nkurutonde nyarwo hakoreshejwe ikoranabuhanga rifasha.

Menya ko kugendagenda kumurongo, kabone niyo bigaragara muburyo bwa tabs hamwe .nav-tabsnurwego, ntibigomba gutangwa , role="tablist"cyangwa role="tab"ibiranga role="tabpanel". Ibi birakwiriye gusa kuri interineti ifite imbaraga, nkuko byasobanuwe muri ARIA Yandika Imyitozo ngororamubiri . Reba imyitwarire ya JavaScript kuri dinamike ya tabbed intera muri iki gice kurugero. Ikiranga aria-currentntabwo gikenewe kuri dinamike ya tabbed intera kuva JavaScript yacu ikora leta yatoranijwe mukongeraho aria-selected="true"kuri tab ikora.

Gukoresha ibitonyanga

Ongeraho ibimanuka byamanutse hamwe na HTML yongeyeho na plugin ya JavaScript .

Tab hamwe nibitonyanga

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>

Ibinini hamwe nibitonyanga

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

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihindagurika CSS ihinduka, navs noneho ikoresha CSS yaho ihinduka kuri .nav, .nav-tabshamwe no .nav-pillskuzamura igihe-nyacyo cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

Ku .navcyiciro fatizo:

  --#{$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};

Ku .nav-tabscyiciro cyo guhindura:

  --#{$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};

Ku .nav-pillscyiciro cyo guhindura:

  --#{$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};

Ibihinduka bya 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;

Imyitwarire ya JavaScript

Koresha tab ya JavaScript plugin-shyiramo kugiti cyawe cyangwa unyuze muri bootstrap.jsdosiye yakozwe - kugirango wongere ibiyobora hamwe nibinini kugirango ukore ibibaho byibirimo byaho.

Nibintu bimwe byerekana umwanya murugo tab ijyanye nibirimo. Kanda kurindi tab bizahindura ibiboneka byiyi ikurikira. Tab JavaScript ihinduranya amasomo kugirango igenzure ibirimo kugaragara no kwishushanya. Urashobora kuyikoresha hamwe na tabs, ibinini, nibindi byose .nav-bishobora imbaraga zo kugenda.

Nibintu bimwe byerekana umwanya wibisobanuro bya tab . Kanda kurindi tab bizahindura ibiboneka byiyi ikurikira. Tab JavaScript ihinduranya amasomo kugirango igenzure ibirimo kugaragara no kwishushanya. Urashobora kuyikoresha hamwe na tabs, ibinini, nibindi byose .nav-bishobora imbaraga zo kugenda.

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>

Kugira ngo ufashe guhuza ibyo ukeneye, ibi bikorana <ul>-bishingiye ku kimenyetso, nkuko bigaragara hejuru, cyangwa hamwe na "kuzenguruka ibyawe" uko bishakiye. Menya ko niba ukoresha <nav>, ntugomba kubyongeraho role="tablist"muburyo butaziguye, kuko ibi byakwirengagiza uruhare kavukire nkibimenyetso byerekana inzira. Ahubwo, hindukira mubindi bikoresho (murugero rukurikira, byoroshye <div>) hanyuma <nav>uzenguruke.

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>

Amacomeka ya tabs nayo akorana n'ibinini.

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>

Kandi hamwe n'ibinini bihagaritse. Byiza, kuri vertical tabs, ugomba no kongeramo aria-orientation="vertical"kurutonde rwibikoresho.

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>

Kuboneka

Imigaragarire idahwitse, nkuko byasobanuwe muri ARIA Yandika Imyitozo Yubuyobozi bwa tabs ishusho , bisaba role="tablist",, hamwe nibindi biranga murwego rwo kugeza imiterere, imikorere, hamwe nuburyo bugezweho kubakoresha ikoranabuhanga rifasha (nkabasoma ecran). Nkumwitozo mwiza, turasaba gukoresha ibintu kuri tabs, kuko aribwo bugenzuzi butera impinduka zikomeye, aho guhuza inzira igana kurupapuro rushya cyangwa ahantu.role="tab"role="tabpanel"aria-<button>

Muburyo bwa ARIA Yandika Imyitozo, gusa tab ikora irakira yibanze ya clavier. Iyo JavaScript plugin yatangijwe, izashyira tabindex="-1"kumurongo wose udakora. Iyo tab ikora ubu ifite intumbero, urufunguzo rwerekana indanga ikora ibanziriza / ubutaha, hamwe na plugin ihindura ibizungurukatabindex . Ariko rero, menya ko plagin ya JavaScript idatandukanya urutonde rwa horizontal na vertical tab urutonde iyo bigeze kumurongo wingenzi urufunguzo: utitaye kumurongo wurutonde rwerekezo, byombi hejuru nibumoso indanga ijya kumurongo wabanjirije, hanyuma hepfo na iburyo indanga ijya kuri tab ikurikira.

Muri rusange, kugirango byoroherezwe kugendana na clavier, birasabwa gukora panneur ya tab ubwayo yibandaho kimwe, keretse niba ikintu cya mbere kirimo ibintu bifatika imbere muri tab panel yamaze kwibandwaho. Amacomeka ya JavaScript ntabwo agerageza gukemura iyi ngingo - aho bibaye ngombwa, uzakenera gukora kuburyo bweruye imbaho za tab yawe yibanze mugushyiramo tabindex="0"ikimenyetso cyawe.

Tab ya JavaScript plugin ntabwo ishigikira interineti yanditswemo irimo manuka yamanutse, kuko ibyo bitera ibibazo byombi nibikoreshwa. Urebye kubikoresha, kuba ibyerekanwe kuri tab ya trigger yibintu bidahita bigaragara (nkuko biri imbere muri menu yafunzwe) birashobora gutera urujijo. Uhereye kubintu byoroshye, kuri ubu nta buryo bwumvikana bwo gushushanya ubu bwoko bwubaka ku buryo busanzwe bwa WAI ARIA, bivuze ko bidashobora kumvikana byoroshye kubakoresha ikoranabuhanga rifasha.

Koresha ibiranga amakuru

Urashobora gukora tab cyangwa ibinini bigenda utanditse JavaScript iyerekana gusa data-bs-toggle="tab"cyangwa data-bs-toggle="pill"kubintu. Koresha aya makuru ibiranga kuri .nav-tabscyangwa .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>

Binyuze kuri JavaScript

Gushoboza imbonerahamwe ya tabs ukoresheje JavaScript (buri tab igomba gukenera kugiti cye):

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

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

Urashobora gukora ama tabs kugiti cye muburyo butandukanye:

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

Ingaruka zashize

Kugirango utume gushira, ongera .fadekuri buri .tab-pane. Urupapuro rwa mbere rwa pane rugomba kandi .showgukora ibintu byambere bigaragara.

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

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

Koresha ibikubiyemo nkibikoresho bya tab.

Urashobora gukora tab urugero hamwe niyubaka, kurugero:

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

Uburyo	Ibisobanuro
`dispose`	Gusenya ikintu cyibintu.
`getInstance`	Uburyo buhamye butuma ubona urugero rwa tab rujyanye nibintu bya DOM, urashobora kubikoresha gutya:`bootstrap.Tab.getInstance(element)` .
`getOrCreateInstance`	Uburyo buhagaze busubiza tab urugero rujyanye nibintu bya DOM cyangwa gukora bundi bushya mugihe bitatangijwe. Urashobora kuyikoresha gutya:`bootstrap.Tab.getOrCreateInstance(element)` .
`show`	Hitamo tab yatanzwe kandi yerekana pane ifitanye isano. Iyindi tab yose yatoranijwe mbere iba idatoranijwe kandi pane ifitanye isano irahishe. Garuka kumuhamagara mbere yuko tab pane yerekanwe (nukuvuga mbere yuko `shown.bs.tab`ibyabaye biba).

Ibyabaye

Iyo werekanye tab nshya, ibyabaye birashya muburyo bukurikira:

hide.bs.tab(kuri tab ikora)
show.bs.tab(kuri to-kwerekanwa tab)
hidden.bs.tab(kurupapuro rwibanze rukora, kimwe kimwe nahide.bs.tab nkicyabaye)
shown.bs.tab(ku gishya-gikora gusa-cyerekanwe tab, kimwe kimwe na kurishow.bs.tab nicyabaye)

Niba nta tab yari isanzwe ikora, noneho hide.bs.tabibyabaye hidden.bs.tabntibizasezererwa.

Ubwoko bwibyabaye	Ibisobanuro
`hide.bs.tab`	Ibirori birasa iyo tab nshya igomba kwerekanwa (nuko rero tab ikora ibanza igomba guhishwa). Koresha `event.target`no `event.relatedTarget`kugenera icyerekezo gikora hamwe nigishya vuba-kugirango-gikore, kimwe.
`hidden.bs.tab`	Ibirori birashya nyuma ya tab nshya yerekanwe (nuko rero tab yabanjirije gukora irahishe). Koresha `event.target`no `event.relatedTarget`guhitamo intego yabanjirije gukora hamwe na tab nshya ikora, uko bikurikirana.
`show.bs.tab`	Ibirori birasa kuri tab yerekana, ariko mbere yuko tab nshya yerekanwe. Koresha `event.target`no `event.relatedTarget`gutondekanya tab ikora hamwe na tab ikora mbere (niba ihari).
`shown.bs.tab`	Ibirori birasa kuri tab yerekanwe nyuma ya tab yerekanwe. Koresha `event.target`no `event.relatedTarget`gutondekanya tab ikora hamwe na tab ikora mbere (niba ihari).

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