Navs ndi tabu

Zolemba ndi zitsanzo zamomwe mungagwiritsire ntchito zida za Bootstrap zomwe zikuphatikizidwa ndi navigation.

Patsamba ili

Base nav

Mayendedwe omwe amapezeka mu Bootstrap amagawana zolembera ndi masitayelo, kuchokera kumagulu oyambira .navkupita kumayiko omwe akugwira ntchito ndi olumala. Sinthani makalasi osintha kuti musinthe pakati pa sitayilo iliyonse.

Chigawo choyambira .navchimamangidwa ndi flexbox ndipo chimapereka maziko olimba omangira mitundu yonse ya zigawo za navigation. Zimaphatikizanso zolembedwa zina (zogwira ntchito ndi mindandanda), zolumikizira zina zamagawo akulu omenyedwa, ndi masitaelo olemala.

Chigawo choyambira .navsichimaphatikizapo dziko lililonse .active. Zitsanzo zotsatirazi zikuphatikiza kalasi, makamaka kuwonetsa kuti kalasi ili siliyambitsa makongoletsedwe apadera.

Kuti mupereke zomwe zikuchitika ku matekinoloje othandizira, gwiritsani ntchito aria-currentchidziwitsocho - pogwiritsa ntchito pagemtengo watsamba lapano, kapena truechinthu chomwe chilipo mu seti.

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>

Makalasi amagwiritsidwa ntchito ponseponse, kotero kuyika kwanu kumatha kusinthika kwambiri. Gwiritsani ntchito <ul>s monga pamwambapa, <ol>ngati dongosolo la zinthu zanu ndilofunika, kapena gudubuzani lanu ndi <nav>chinthu. Chifukwa chakugwiritsa .navntchito display: flex, maulalo a nav amachita chimodzimodzi monga momwe zinthu ziliri, koma popanda chowonjezera chowonjezera.

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>

Masitayilo omwe alipo

Sinthani mawonekedwe a .navs gawo ndi zosintha ndi zofunikira. Sakanizani ndi kufananiza ngati mukufunikira, kapena pangani zanu.

Kuyanjanitsa kopingasa

Sinthani kuyanika kopingasa kwa nav yanu ndi zida za flexbox . Mwachikhazikitso, ma navs amakhala olunjika kumanzere, koma mutha kuwasintha kukhala apakati kapena kumanja.

Yopangidwa ndi .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>

Zogwirizana ndi .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>

Oima

Sungani navigation yanu posintha njira yosinthira zinthu ndi .flex-columnzofunikira. Mukuyenera kuwayika pamawonekedwe ena koma osati ena? Gwiritsani ntchito matembenuzidwe omvera (mwachitsanzo, .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>

Monga nthawi zonse, kuyenda koyima kumatheka popanda <ul>s, nakonso.

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>

Ma tabu

Imatengera nav yoyambira kuchokera pamwamba ndikuwonjezera .nav-tabskalasi kuti ipange mawonekedwe osankhidwa. Agwiritseni ntchito kupanga zigawo zowoneka ndi tabu yathu 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>

Mapiritsi

Tengani HTML yomweyo, koma gwiritsani ntchito .nav-pills:

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>

Lembani ndi kulungamitsa

Limbikitsani .navzomwe zili mkati mwanu kuti muwonjezere kukula komwe kulipo limodzi mwa magulu awiri osintha. Kuti mukwaniritse malo onse omwe alipo ndi yanu .nav-item, gwiritsani ntchito .nav-fill. Zindikirani kuti malo onse opingasa ali ndi anthu, koma sizinthu zonse za nav zomwe zili ndi m'lifupi mwake.

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>

Mukamagwiritsa ntchito <nav>--based navigation, mutha kusiya mosamala .nav-itemmomwe .nav-linkzimafunikira pamakongoletsedwe <a>azinthu.

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>

Pazinthu zokhala ndi kukula kofanana, gwiritsani ntchito .nav-justified. Malo onse opingasa adzakhala ndi maulalo a nav, koma mosiyana ndi .nav-fillpamwambapa, chinthu chilichonse cha nav chidzakhala chofanana m'lifupi.

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>

Mofanana ndi .nav-fillchitsanzo pogwiritsa ntchito <nav>navigation -based.

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>

Kugwira ntchito ndi flex utility

Ngati mukufuna ma nav osiyanasiyana omvera, lingalirani kugwiritsa ntchito zida zingapo za flexbox . Ngakhale zili zachidule kwambiri, zida izi zimapereka makonda ambiri pamagawo omvera. Muchitsanzo chomwe chili pansipa, nav yathu idzayikidwa pamalo otsika kwambiri, kenaka sinthani ndi mawonekedwe opingasa omwe amadzaza m'lifupi mwake kuyambira podutsa pang'ono.

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>

Za kupezeka

Ngati mukugwiritsa ntchito navs kuti mupereke malo olowera, onetsetsani kuti mwawonjezera pa role="navigation"chidebe chomveka bwino cha kholo la <ul>, kapena kulungani <nav>chinthu pozungulira ponseponse. Osawonjeza gawolo <ul>, chifukwa izi zingalepheretse kulengezedwa ngati mndandanda weniweni ndi matekinoloje othandizira.

Dziwani kuti ma navigation bar, ngakhale atalembedwa ngati tabu ndi .nav-tabskalasi, sayenera kuperekedwa , role="tablist"kapena role="tab"mawonekedwe role="tabpanel". Izi ndizoyenera pazolumikizana zosinthika, monga momwe zafotokozedwera mu ARIA Authoring Practices Guide pateni . Onani machitidwe a JavaScript pamawonekedwe osinthika a tab mu gawoli mwachitsanzo. Mkhalidwewu aria-currentsiwofunikira pamawonekedwe osinthika a tabbed popeza JavaScript yathu imagwira gawo losankhidwa powonjezera aria-selected="true"pa tabu yogwira.

Kugwiritsa ntchito dropdowns

Onjezani mindandanda yotsitsa ndi HTML yowonjezera pang'ono ndi pulagi yotsitsa ya JavaScript .

Ma tabu okhala ndi zotsitsa

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>

Mapiritsi okhala ndi zotsitsa

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

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la kusintha kwa CSS kwa Bootstrap, ma navs tsopano amagwiritsa ntchito zosintha zapa CSS pa .nav, .nav-tabs, ndi .nav-pillskupititsa patsogolo makonda a nthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

Pa .navBase class:

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

Pa .nav-tabskalasi ya modifier:

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

Pa .nav-pillskalasi ya modifier:

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

Zosintha za 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;

Makhalidwe a JavaScript

Gwiritsani ntchito pulogalamu yowonjezera ya JavaScript-iphatikizepo payekhapayekha kapena kudzera pa bootstrap.jsfayilo yomwe yaphatikizidwa-kuti tiwonjezere ma tabu athu oyenda ndi mapiritsi kuti tipange mapanelo azomwe zili m'deralo.

Izi ndi zina zomwe zili ndi tabu Yakunyumba zomwe zikugwirizana nazo. Kudina tabu ina kudzasintha kuwonekera kwa iyi kuti ikwaniritse. Tsamba la JavaScript limasinthiratu makalasi kuti muwongolere mawonekedwe ndi masitayelo. Mutha kugwiritsa ntchito ndi ma tabo, mapiritsi, ndi .navnavigation ina iliyonse.

Izi ndi zina zomwe zili ndi tsamba la Profile zomwe zikugwirizana nazo. Kudina tabu ina kudzasintha kuwonekera kwa iyi kuti ikwaniritse. Tsamba la JavaScript limasinthiratu makalasi kuti muwongolere mawonekedwe ndi masitayelo. Mutha kugwiritsa ntchito ndi ma tabo, mapiritsi, ndi .navnavigation ina iliyonse.

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>

Kuti zikuthandizeni kukwaniritsa zosowa zanu, izi zimagwira ntchito ndi <ul>zolembera zokhazikika, monga tawonera pamwambapa, kapena ndi zolembera zanu zilizonse. Zindikirani kuti ngati mukugwiritsa ntchito <nav>, simuyenera kuwonjezerapo role="tablist", chifukwa izi zitha kupitilira gawo lachilengedwe la chinthucho ngati chizindikiro choyendera. M'malo mwake, sinthani ku chinthu china (muchitsanzo chomwe chili pansipa, chosavuta <div>) ndikukulunga <nav>mozungulira.

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>

Pulogalamu yowonjezera ya ma tabo imagwiranso ntchito ndi mapiritsi.

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>

Ndipo ndi mapiritsi ofukula. Momwemo, pama tabo oyimirira, muyeneranso kuwonjezera aria-orientation="vertical"pa chidebe cha mndandanda wa tabu.

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>

Kufikika

Mawonekedwe a Dynamic tabbed, monga momwe tafotokozera mu ARIA Authoring Practices Guide tabu , amafuna role="tablist", role="tab", role="tabpanel", ndi zina zowonjezera aria-kuti apereke mawonekedwe awo, momwe amagwirira ntchito, ndi momwe alili pano kwa ogwiritsa ntchito matekinoloje othandizira (monga owerenga skrini). Monga njira yabwino, timalimbikitsa kugwiritsa ntchito <button>zinthu zama tabu, chifukwa awa ndi maulamuliro omwe amayambitsa kusintha kwamphamvu, osati maulalo omwe amapita kutsamba latsopano kapena malo.

Mogwirizana ndi machitidwe a ARIA Authoring Practices, tabu yokhayo yomwe ikugwira ntchito ndiyomwe imalandira chidwi cha kiyibodi. JavaScript plugin ikayambika, imayikidwa tabindex="-1"paziwongolero zonse zosagwira ntchito. Tabu yomwe ikugwira ntchito ikangoyang'ana, makiyi a cholozera amatsegula tabu yapitayo/yotsatira, pulogalamu yowonjezera ikusintha mayendedwetabindex moyenerera. Komabe, zindikirani kuti pulogalamu yowonjezera ya JavaScript simasiyanitsa pakati pa mindandanda yopingasa ndi yoyima ikafika pakusinthana kwa makiyi a cholozera: mosasamala kanthu za kalozera wa tabu, cholozera chammwamba ndi chakumanzere chimapita ku tabu yapitayo, ndipo cholozera chakumunsi ndi chakumanja chimapita tsamba lotsatira.

Nthawi zambiri, kuti mutsogolere kusaka kwa kiyibodi, tikulimbikitsidwa kuti tipangenso mapanelo kuti azitha kuyang'ananso, pokhapokha chinthu choyamba chomwe chili ndi tanthauzo mkati mwa tabu chikuwonekera kale. Pulogalamu yowonjezera ya JavaScript siyesa kuthana ndi izi - ngati kuli koyenera, muyenera kupangitsa kuti mapanelo anu azitha kuyang'ana kwambiri powonjezera zolembera tabindex="0"zanu.

The tab JavaScript plugin sigwirizana ndi ma tab interfaces omwe ali ndi mindandanda yotsikira, chifukwa izi zimayambitsa zovuta kugwiritsa ntchito komanso kupezeka. Malinga ndi momwe mungagwiritsire ntchito, mfundo yoti choyambitsa tabu yomwe ikuwonetsedwa pano sikuwoneka nthawi yomweyo (monga ili mkati mwa menyu otsika) ikhoza kuyambitsa chisokonezo. Kuchokera kumalo ofikirako, pakali pano palibe njira yodziwikiratu yopangira mapangidwe amtundu uwu kukhala mawonekedwe a WAI ARIA, kutanthauza kuti sizingamveke mosavuta kwa ogwiritsa ntchito matekinoloje othandizira.

Kugwiritsa ntchito mawonekedwe a data

Mutha kuyambitsa tabu kapena kuyenda kwamapiritsi osalemba JavaScript mwa kungotchulapo data-bs-toggle="tab"kapena data-bs-toggle="pill"pa chinthu. Gwiritsani ntchito mawonekedwe a data awa pa .nav-tabskapena .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>

Kudzera pa JavaScript

Yambitsani ma tabable kudzera pa JavaScript (tabu iliyonse iyenera kutsegulidwa payekhapayekha):

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

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

Mutha kuyambitsa ma tabo amodzi m'njira zingapo:

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

Kuzimiririka

Kuti ma tabo azitha kuzimiririka, onjezani .fadechilichonse .tab-pane. Gawo loyamba la tabu liyeneranso .showkupangitsa kuti zomwe zili zoyamba ziwonekere.

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

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

Imatsegula zomwe zili ngati tabu.

Mukhoza kupanga chitsanzo cha tabu ndi womanga, mwachitsanzo:

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

Njira	Kufotokozera
`dispose`	Iwononga tabu ya chinthu.
`getInstance`	Njira yosasunthika yomwe imakupatsani mwayi wopeza tabu yolumikizidwa ndi chinthu cha DOM, mutha kuyigwiritsa ntchito motere: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Njira yosasunthika yomwe imabweretsanso tabu yolumikizidwa ndi chinthu cha DOM kapena kupanga ina yatsopano ngati sichinayambike. Mutha kugwiritsa ntchito motere `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Imasankha tabu yomwe yapatsidwa ndikuwonetsa gawo lomwe likugwirizana nalo. Tabu ina iliyonse yomwe idasankhidwa kale imakhala yosasankhidwa ndipo gawo lomwe limalumikizidwa limabisika. Imabwereranso kwa woyimbayo tsamba la tabu lisanasonyezedwe (ie zisanachitike `shown.bs.tab`).

Zochitika

Mukawonetsa tabu yatsopano, zochitika zimayaka motere:

hide.bs.tab(pa tabu yomwe ikugwira ntchito pano)
show.bs.tab(pa tabu yomwe ikuyenera kuwonetsedwa)
hidden.bs.tab(pa tabu yogwira kale, yofanana ndi ya hide.bs.tabchochitikacho)
shown.bs.tab(pa tabu yomwe yangowonetsedwa kumene, yofanana ndi ya show.bs.tabchochitikacho)

Ngati palibe tabu yomwe idagwira kale, ndiye kuti hide.bs.tabndi hidden.bs.tabzochitika sizidzachotsedwa.

Mtundu wa chochitika	Kufotokozera
`hide.bs.tab`	Chochitikachi chimayaka pomwe tabu yatsopano iyenera kuwonetsedwa (ndipo chifukwa chake tabu yogwira kale iyenera kubisika). Gwiritsani ntchito `event.target`ndi `event.relatedTarget`kulunjika tabu yomwe ikugwira ntchito ndi tsamba latsopano lomwe lizigwira ntchito posachedwa, motsatana.
`hidden.bs.tab`	Chochitikachi chimayaka pambuyo poti tabu yatsopano yawonetsedwa (ndipo chifukwa chake tabu yogwira kale yabisika). Gwiritsani `event.target`ntchito `event.relatedTarget`ndikulunjika tabu yomwe idagwira kale ndi tabu yatsopano, motsatana.
`show.bs.tab`	Chochitikachi chikuyaka pa tabu chiwonetsero, koma tabu yatsopano isanasonyezedwe. Gwiritsani ntchito `event.target`ndikuwongolera `event.relatedTarget`tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
`shown.bs.tab`	Chochitika ichi chikuyaka pa tabu chiwonetsero pambuyo poti tabu yawonetsedwa. Gwiritsani ntchito `event.target`ndikuwongolera `event.relatedTarget`tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.

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