Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
in English

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 iyi siyambitsa masitayelo apadera.

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

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

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 zanu ndi <nav>chinthu. Chifukwa chakugwiritsa .navntchito display: flex, maulalo a nav amachita chimodzimodzi monga momwe zinthu ziliri, koma popanda chowonjezera chowonjezera.

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

Masitayilo omwe alipo

Sinthani mawonekedwe a .navgawo la s 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:

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

Zogwirizana ndi .justify-content-end:

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

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

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

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

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

Ma tabu

Imatengera nav yoyambira pamwamba ndikuwonjezera .nav-tabskalasi kuti ipange mawonekedwe osankhidwa. Agwiritseni ntchito kupanga zigawo zowoneka ndi tabu yathu JavaScript plugin .

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

Mapiritsi

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

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

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.

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

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

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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.

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

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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 zafotokozedwera mu WAI ARIA Authoring Practices . 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

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

Mapiritsi okhala ndi zotsitsa

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

Sass

Zosintha

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

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

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

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.

Mawonekedwe amphamvu a tabbed, monga tafotokozera mu WAI ARIA Authoring Practices , amafuna role="tablist", role="tab", role="tabpanel", ndi zina zowonjezera aria-kuti apereke mawonekedwe awo, magwiridwe antchito 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.

Zindikirani kuti zolumikizira zosinthika siziyenera kukhala ndi mindandanda yotsitsa, chifukwa izi zimayambitsa zovuta zamagwiritsidwe 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.

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.

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

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

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.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Pulogalamu yowonjezera ya ma tabo imagwiranso ntchito ndi mapiritsi.

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.

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

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

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Ndipo ndi mapiritsi ofukula.

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.

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 Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

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

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

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

Kudzera pa JavaScript

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

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

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

Mutha kuyambitsa ma tabo amodzi m'njira zingapo:

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

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Kuzimiririka

Kuti ma tabo azizimire, onjezani .fadealiyense .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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Njira

Asynchronous njira ndi kusintha

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

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

constructor

Imayatsa chinthu cha tabu ndi chidebe cha zinthu. Tabu iyenera kukhala ndi data-bs-targetkapena, ngati ikugwiritsa ntchito ulalo, lingaliro href, lolunjika pagawo lachidebe mu DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

chiwonetsero

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

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

  tab.show()

kutaya

Iwononga tabu ya chinthu.

getInstance

Njira yosasunthika yomwe imakupatsani mwayi wopeza tabu yolumikizidwa ndi chinthu cha DOM

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

GetOrCreateInstance

Njira yosasunthika yomwe imakupatsani mwayi wopeza tabu yolumikizidwa ndi chinthu cha DOM, kapena pangani yatsopano ngati sichinayambike.

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

Zochitika

Mukawonetsa tabu yatsopano, zochitika zimayaka motere:

  1. hide.bs.tab(pa tabu yomwe ikugwira ntchito pano)
  2. show.bs.tab(pa tabu yomwe ikuyenera kuwonetsedwa)
  3. hidden.bs.tab(pa tabu yogwira kale, yofanana ndi ya hide.bs.tabchochitikacho)
  4. 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
show.bs.tab Chochitikachi chikuyaka pa tabu chiwonetsero, koma tabu yatsopano isanasonyezedwe. Gwiritsani ntchito event.targetndikuwongolera event.relatedTargettabu 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.targetndikuwongolera event.relatedTargettabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
hide.bs.tab Chochitika ichi chimayaka pomwe tabu yatsopano iyenera kuwonetsedwa (ndipo chifukwa chake tabu yogwira kale iyenera kubisika). Gwiritsani ntchito event.targetndi event.relatedTargetkulunjika tabu yomwe ikugwira ntchito komanso tsamba lomwe lizigwira ntchito posachedwa, motsatana.
hidden.bs.tab Chochitikachi chimayaka pambuyo poti tabu yatsopano yawonetsedwa (ndipo chifukwa chake tabu yogwira kale yabisika). Gwiritsani event.targetntchito event.relatedTargetndikulunjika tabu yomwe idagwira kale ndi tabu yatsopano, motsatana. 
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})