Navs sy tabs

Documentation sy ohatra momba ny fampiasana ireo singa fitetezana ao amin'ny Bootstrap.

Amin'ity pejy ity

Base nav

Ny fitetezana hita ao amin'ny Bootstrap dia mizara marika sy fomba ankapobeny, manomboka amin'ny .navkilasy fototra ka hatrany amin'ny fanjakana mavitrika sy kilemaina. Ampifamadiho ny kilasy modifier mba hifindra eo amin'ny fomba tsirairay.

Ny .navsinga fototra dia natsangana tamin'ny flexbox ary manome fototra mafy orina amin'ny fananganana karazana singa rehetra. Ao anatin'izany ny fanodinkodinana fomba sasany (ho an'ny miasa miaraka amin'ny lisitra), ny padding rohy sasany ho an'ny faritra voadona lehibe kokoa, ary ny fanaingoana fototra kilemaina.

Ny .navsinga fototra dia tsy ahitana .activefanjakana. Ireto ohatra manaraka ireto dia ahitana ny kilasy, indrindra indrindra mba hampisehoana fa ity kilasy manokana ity dia tsy miteraka fanaingoana manokana.

Mba hampita ny toetra mavitrika amin'ny teknolojia manampy, ampiasao ny aria-currenttoetra — mampiasa ny pagesanda ho an'ny pejy ankehitriny, na trueho an'ny singa ankehitriny ao anaty andiana.

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

Ampiasaina manerana ny kilasy ny kilasy, noho izany dia mety ho malefaka be ny marikao. Ampiasao <ul>ny s toy ny etsy ambony, <ol>raha zava-dehibe ny filaharan'ireo entanao, na manodina ny anao amin'ny <nav>singa iray. Satria ny .navfampiasana display: flex, ny rohy nav dia mitovy amin'ny zavatra nav, fa tsy misy marika fanampiny.

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

Fomba misy

Hanova ny endriky ny .navsinga s miaraka amin'ny modifiers sy utility. Afangaro ary ampifanaraho araka izay ilaina, na manangana anao manokana.

Fandrindrana marindrano

Ovay ny fampifanarahana marindrano amin'ny nav anao amin'ny fitaovana flexbox . Amin'ny alàlan'ny default, ny navs dia mirindra havia, saingy azonao atao ny manova azy ireo mora foana ho afovoany na havanana.

Foibe miaraka amin'ny .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>

Mifanaraka tsara amin'ny .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>

mijidina

Atsangano ny fitetezanao amin'ny alàlan'ny fanovana ny làlan'ny singa flex miaraka amin'ny .flex-columnfitaovana. Mila manangana azy ireo amin'ny toerana fijery sasany fa tsy ny hafa? Ampiasao ny dikan-teny mamaly (oh, .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>

Toy ny mahazatra, azo atao ny navigateur mitsangana tsy misy <ul>s ihany koa.

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

Tabs

Maka ny nav fototra avy any ambony ary manampy ny .nav-tabskilasy hamoronana interface tsara misy tabilao. Ampiasao izy ireo mba hamoronana faritra misy tabilao miaraka amin'ny plugin JavaScript tab .

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

levitra

Raiso io HTML io ihany, fa ampiasao .nav-pillskosa:

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

Fenoy ary manamarina

Manery ny .navatiny hanitarana ny sakany feno iray amin'ireo kilasy modifier roa. Mba hamenoana ny toerana misy anao amin'ny .nav-items anao, ampiasao ny .nav-fill. Mariho fa ny habaka marindrano rehetra dia mipetraka, fa tsy ny singa nav rehetra dia mitovy ny sakany.

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

Rehefa mampiasa <nav>navigateur mifototra ianao, dia azonao atao ny miala amin'ny fomba azo antoka .nav-itemfa .nav-linkilaina amin'ny <a>singa fanaingoana.

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

Ho an'ny singa mitovy sakany dia ampiasao .nav-justified. Ny habaka marindrano rehetra dia hofehezin'ny rohy nav, fa tsy toy ny .nav-filletsy ambony, ny singa nav rehetra dia hitovy ny sakany.

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

Mitovy amin'ny .nav-fillohatra mampiasa <nav>navigateur mifototra.

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

Miasa amin'ny flex utility

Raha mila fiovaovan'ny nav mamaly ianao dia diniho ny fampiasana andiana fitaovana flexbox . Na dia mibaribary kokoa aza, ireo fitaovana ireo dia manolotra fanasokajiana bebe kokoa amin'ireo teboka fiatoana mamaly. Ao amin'ny ohatra etsy ambany, ny nav-ntsika dia hapetraka eo amin'ny teboka farany ambany indrindra, avy eo ampifanaraho amin'ny lamina marindrano izay mameno ny sakany misy manomboka amin'ny teboka kely.

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

Momba ny accessibility

Raha mampiasa navs ianao mba hanomezana bara fitetezana, aza hadino ny manampy a role="navigation"amin'ny fitoeran'ny ray aman-dreny lojika indrindra amin'ny <ul>, na manarona <nav>singa iray manodidina ny fitetezana manontolo. Aza ampidirina amin'ny <ul>tenany ny andraikitra, satria izany dia hanakana azy tsy hambara ho lisitra tena izy amin'ny alàlan'ny teknolojia manampy.

Mariho fa tsy tokony homena , na toetra ny bar navigation, na dia natao ho toy ny tabilao miaraka amin'ny .nav-tabskilasy aza. Ireo ihany no mety amin'ny interface dynamic tabbed, araka ny voalaza ao amin'ny WAI ARIA Authoring Practices . Jereo ny fitondran-tena JavaScript ho an'ny seha-pifandraisana mavitrika amin'ity fizarana ity ho ohatra. Ny toetra dia tsy ilaina amin'ny dynamic tabbed interface tsara satria ny JavaScript-ntsika no mitantana ny fanjakana voafantina amin'ny fanampiana amin'ny tabilao mavitrika.role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Mampiasa dropdowns

Ampio ny menio midina miaraka amin'ny HTML fanampiny kely sy ny plugin JavaScript dropdowns .

Kiheba misy fidinana

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

Pills misy dropdowns

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

Sass

hiovaova

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

Fihetsika JavaScript

Ampiasao ny plugin JavaScript kiheba—ampidiro tsirairay izany na amin'ny alalan'ny bootstrap.jsrakitra natambatra—mba hanitarana ny tabilao sy pills navigateur mba hamoronana takelaka misy tabilao misy ny atiny eo an-toerana.

Ny interface dynamic tabbed, araka ny voalaza ao amin'ny WAI ARIA Authoring Practices , dia mitaky role="tablist", role="tab", role="tabpanel", ary aria-toetra fanampiny mba hampitana ny rafitra, ny fiasany ary ny toetrany amin'izao fotoana izao amin'ireo mpampiasa ny teknolojia manampy (toy ny mpamaky efijery). Amin'ny maha fanao tsara indrindra, dia manoro hevitra ny fampiasana <button>singa ho an'ny tabilao izahay, satria ireo dia fanaraha-maso izay miteraka fiovana mavitrika, fa tsy rohy mandeha amin'ny pejy na toerana vaovao.

Mariho fa ny interface dynamique tabbed dia tsy tokony ahitana menio midina, satria miteraka olana amin'ny fampiasana sy ny fidirana. Avy amin'ny fomba fijery azo ampiasaina, mety hiteraka fisavoritahana ny hoe tsy hita avy hatrany ny singa trigger an'ny kiheba aseho amin'izao fotoana izao (satria ao anatin'ny menio midina mihidy). Amin'ny fomba fijery azo idirana, tsy misy fomba azo saina amin'izao fotoana izao hanoratana an'io karazana fanorenana io amin'ny lamina WAI ARIA mahazatra, midika izany fa tsy mora azo amin'ny mpampiasa ny teknolojia fanampiana izany.

Ity dia atiny mpihazona toerana sasany amin'ny atiny mifandray amin'ny tabilao Home. Ny fipihana kiheba hafa dia hanova ny fahitana an'ity iray ity ho an'ny manaraka. Ny tabilao JavaScript dia mifamadika kilasy mba hifehezana ny fahitana ny atiny sy ny fomba. Azonao atao ny mampiasa azy io miaraka amin'ny tabilao, pilina, ary .navnavigation hafa.

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>

Mba hanampiana amin'ny zavatra ilainao, ity dia miasa miaraka amin'ny <ul>marika mifototra, araka ny aseho etsy ambony, na miaraka amin'ny marika "manodina ny anao manokana". Mariho fa raha mampiasa <nav>, ianao dia tsy tokony hanampy role="tablist"azy mivantana, satria izany dia hanaisotra ny andraikitry ny teratany ho toy ny mari-pamantarana fitetezana. Fa kosa, miverena amina singa iray hafa (amin'ny ohatra etsy ambany, tsotra <div>) ary aforeto ny <nav>manodidina azy.

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

Ny plugin tabs koa dia miasa miaraka amin'ny pilina.

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

Ary miaraka amin'ny pilina mitsangana.

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>

Mampiasa ny angona toetra

Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra JavaScript amin'ny alalan'ny famaritana fotsiny data-bs-toggle="tab"na data-bs-toggle="pill"amin'ny singa iray. Ampiasao amin'ny .nav-tabsna .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>

Amin'ny JavaScript

Alefaso amin'ny alalan'ny JavaScript ny kiheba azo vakiana (mila ampihetsika tsirairay ny tabilao tsirairay):

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

Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:

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

Fade effect

Mba hahatonga ny tabilao ho levona, ampio .fadeny tsirairay .tab-pane. Ny takelaka tabilao voalohany dia tsy maintsy .showmanao ny atiny voalohany ho hita ihany koa.

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

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .

constructor

Mampihetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana data-bs-targetna, raha mampiasa rohy, hreftoetra iray, mikendry ny node container ao amin'ny 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>

FAMPISEHOANA

Mifidy ny kiheba nomena ary mampiseho ny tontonana mifandray aminy. Izay kiheba hafa izay nofantenana teo aloha dia lasa tsy voafantina ary nafenina ny tontonana mifandraika aminy. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny takelaka tabilao (izany hoe alohan'ny shown.bs.tabnitrangan'ny hetsika).

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

  tab.show()

Ario

Manimba ny tabilao misy singa.

getInstance

Fomba static izay ahafahanao mahazo ny ohatra tabilao mifandray amin'ny singa DOM

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

getOrCreateInstance

Fomba static izay ahafahanao mahazo ny ohatra tabilao mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany

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

zava-mitranga

Rehefa mampiseho kiheba vaovao dia miredareda toy izao manaraka izao ny hetsika:

hide.bs.tab(amin'ny tabilao mavitrika ankehitriny)
show.bs.tab(eo amin'ny tabilao haseho)
hidden.bs.tab(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'ny hide.bs.tabhetsika)
shown.bs.tab(eo amin'ny tabilao vao naseho vao mavitrika, mitovy amin'ny an'ny show.bs.tabhetsika)

Raha tsy misy kiheba efa navitrika, dia tsy ho voaroaka ny hetsika ary hide.bs.tab.hidden.bs.tab

Karazana hetsika	Description
`show.bs.tab`	Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao `event.target`sy `event.relatedTarget`kendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
`shown.bs.tab`	Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao `event.target`sy `event.relatedTarget`kendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
`hide.bs.tab`	Mirehitra ity hetsika ity rehefa misy kiheba vaovao haseho (ary noho izany dia afenina ny kiheba mavitrika teo aloha). Ampiasao `event.target`sy `event.relatedTarget`kendrena ny tabilao mavitrika ankehitriny sy ny tabilao vaovao tsy ho ela.
`hidden.bs.tab`	Mirehitra ity hetsika ity rehefa miseho ny tabilao vaovao (ary noho izany dia afenina ny tabilao mavitrika teo aloha). Ampiasao `event.target`sy `event.relatedTarget`ikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao.

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