Navs a me nā papa

Nā palapala a me nā laʻana no ka hoʻohana ʻana i nā ʻāpana hoʻokele i hoʻokomo ʻia o Bootstrap.

Ma kēia ʻaoʻao

Base nav

Loaʻa ka hoʻokele ma Bootstrap i ka hōʻailona maʻamau a me nā ʻano, mai ka papa kumu .nava i nā mokuʻāina ikaika a me nā mea kīnā. E hoʻololi i nā papa hoʻololi e hoʻololi i waena o kēlā me kēia ʻano.

Kūkulu .navʻia ka ʻāpana kumu me ka flexbox a hāʻawi i kahi kumu ikaika no ke kūkulu ʻana i nā ʻano mea hoʻokele āpau. Loaʻa iā ia kekahi mau kāʻili ʻana (no ka hana ʻana me nā papa inoa), kekahi mau loulou loulou no nā wahi pā nui aʻe, a me ke kāʻei kino kīnā.

.navʻAʻole komo ka ʻāpana kumu i kekahi .activemokuʻāina. Aia nā laʻana ma lalo nei i ka papa, ʻo ka mea nui e hōʻike ana ʻaʻole i hoʻomaka kēia papa kūikawā i kekahi styling kūikawā.

No ka lawe ʻana i ke kūlana hana i nā ʻenehana kōkua, e hoʻohana i ke aria-currentʻano - me ka hoʻohana ʻana i ka pagewaiwai no ka ʻaoʻao o kēia manawa, a i ʻole trueno ka mea o kēia manawa i kahi pūʻulu.

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>

Hoʻohana ʻia nā papa a puni, no laila hiki ke maʻalahi kāu markup. E hoʻohana <ul>i nā mea e like me luna, <ol>inā he mea nui ka hoʻonohonoho ʻana o kāu mau mea, a i ʻole e ʻōwili iā ʻoe iho me kahi <nav>mea. Ma muli o ka .navhoʻohana ʻana display: flex, e hana like nā loulou nav me nā mea nav, akā me ka ʻole o ka hōʻailona ʻokoʻa.

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>

Loaʻa nā ʻano

Hoʻololi i ke ʻano o .navka ʻāpana me nā mea hoʻololi a me nā pono hana. Hoʻohui a hoʻohālikelike e like me ka mea e pono ai, a i ʻole e kūkulu i kāu ponoʻī.

Hoʻopololei hoʻopololei

E hoʻololi i ka hoʻopololei ʻāpae o kāu nav me nā pono hana flexbox . ʻO ka mea paʻamau, hoʻopaʻa ʻia nā navs ma ka hema, akā hiki iā ʻoe ke hoʻololi iā lākou i waena a i ʻole pololei.

Kūwaena me .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>

Kūlike ʻākau me .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>

Kū pololei

E hoʻopaʻa i kāu hoʻokele ma ka hoʻololi ʻana i ke kuhikuhi kikoʻī me ka .flex-columnpono. Pono e hoʻopaʻa iā lākou ma kekahi mau viewports akā ʻaʻole nā mea ʻē aʻe? E hoʻohana i nā mana pane (e laʻa, .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>

E like me nā manawa a pau, hiki ke hoʻokele kuʻekuʻe me ka ʻole <ul>o s.

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>

Nā papa

Lawe i ka nav maʻamau mai luna mai a hoʻohui i ka .nav-tabspapa e hana i kahi kikowaena tabbed. E hoʻohana iā lākou e hana i nā ʻāpana tabable me kā mākou papa 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>

Pills

E lawe i kēlā HTML like, akā e hoʻohana .nav-pillsma kahi:

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>

Hoopiha a hoapono

E hoʻoikaika i kāu .navmau mea e hoʻonui i ka laula piha i loaʻa i kekahi o nā papa hoʻololi ʻelua. No ka hoʻopiha piha ʻana i nā wahi āpau i loaʻa me kāu .nav-items, e hoʻohana i ka .nav-fill. E hoʻomaopopo i ka noho ʻana o nā wahi ākea āpau, akā ʻaʻole like ka laulā o kēlā me kēia mea nav.

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>

I ka hoʻohana ʻana i kahi <nav>hoʻokele -based, hiki iā ʻoe ke haʻalele me ka palekana e .nav-itemlike me ka mea .nav-linke koi ʻia no nā mea styling <a>.

html

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

No nā mea like-ākea, hoʻohana .nav-justified. E noho ʻia nā wahi ākea āpau e nā loulou nav, akā ʻaʻole like me ka mea i .nav-fillluna, e like ka laulā o kēlā me kēia mea nav.

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>

E like me ka .nav-filllaʻana e hoʻohana ana i kahi <nav>hoʻokele -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>

Ke hana nei me nā pono hana maʻalahi

Inā makemake ʻoe i nā ʻano hoʻololi nav pane, e noʻonoʻo e hoʻohana i kahi pūʻulu o nā pono hana flexbox . ʻOiai ʻoi aku ka verbose, hāʻawi kēia mau mea pono i ka hana maʻamau ma waena o nā breakpoints pane. Ma ka laʻana ma lalo nei, e hoʻopaʻa ʻia kā mākou nav ma ka haʻahaʻa haʻahaʻa loa, a laila e hoʻololi i kahi hoʻonohonoho hoʻolālā e hoʻopiha i ka laula i loaʻa e hoʻomaka ana mai ka haʻihaʻi liʻiliʻi.

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>

E pili ana i ka hiki

Inā ʻoe e hoʻohana nei i nā navs no ka hoʻolako ʻana i kahi pae hoʻokele, e hōʻoia e hoʻohui i kahi role="navigation"i ka pahu makua kūpono loa o ka <ul>, a i ʻole e hoʻopili i kahi <nav>mea a puni ka hoʻokele holoʻokoʻa. Mai hoʻohui i ke kuleana iā <ul>ia iho, no ka mea e pale ʻia ia mai ka hoʻolaha ʻia ʻana he papa inoa maoli e nā ʻenehana kōkua.

E hoʻomanaʻo, ʻaʻole pono e hāʻawi ʻia nā pahu hoʻokele, ʻoiai inā ʻike ʻia e like me nā tab me ka .nav-tabspapa, a i ʻole nā hiʻohiʻona . He mea kūpono wale nō kēia no nā ʻaoʻao i hoʻopaʻa ʻia, e like me ia i wehewehe ʻia ma ke ʻano papa kuhikuhi ARIA Authoring Practices Guide . E ʻike i ke ʻano JavaScript no nā ʻaoʻao i hoʻopaʻa ʻia ma kēia ʻāpana no kahi laʻana. ʻAʻole pono ke ʻano ma nā ʻaoʻao i hoʻopaʻa ʻia no ka mea ua mālama kā mākou JavaScript i ka mokuʻāina i koho ʻia ma ka hoʻohui ʻana i ka pā hana.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Ke hoʻohana nei i nā hāʻule iho

Hoʻohui i nā menus dropdown me kahi HTML hou aʻe a me ka plugin JavaScript dropdowns .

Nā papa me nā hāʻule iho

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>

ʻO nā pila me nā hāʻule iho

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

Nā mea hoʻololi

Hoʻohui ʻia ma v5.2.0

Ma ke ʻano o ka hoʻokokoke ʻana o nā ʻano hoʻololi CSS e ulu ana a Bootstrap, hoʻohana nā navs i kēia manawa i nā ʻano CSS kūloko ma .nav, .nav-tabs, a .nav-pillsno ka hoʻomaikaʻi ʻana i ka manawa maoli. Hoʻonohonoho ʻia nā waiwai no nā ʻano CSS ma o Sass, no laila ke kākoʻo mau ʻia nei ka hana maʻamau Sass.

Ma ka .navpapa kumu:

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

Ma ka .nav-tabspapa hoʻololi:

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

Ma ka .nav-pillspapa hoʻololi:

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

Nā hoʻololi 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;

ʻO ka hana JavaScript

E hoʻohana i ka plugin JavaScript tab—e hoʻokomo iā ia i kēlā me kēia a i ʻole ma o ka bootstrap.jsfaila i hōʻuluʻulu ʻia—e hoʻonui i kā mākou mau ʻaoʻao hoʻokele a me nā pila no ka hana ʻana i nā pane tabable o ka ʻike kūloko.

ʻO kēia kekahi maʻiʻo placeholder ka ʻikepili pili o ka Home tab . Ke kaomi ʻana i kahi ʻaoʻao ʻē aʻe e hoʻololi i ka ʻike o kēia no ka mea aʻe. Hoʻololi ka ʻaoʻao JavaScript i nā papa e hoʻomalu i ka ʻike ʻike a me ke ʻano. Hiki iā ʻoe ke hoʻohana iā ia me nā tabs, pill, a me nā .navhoʻokele mana ʻē aʻe.

ʻO kēia kekahi maʻiʻo placeholder ka ʻikepili pili o ka ʻaoʻao Profile . Ke kaomi ʻana i kahi ʻaoʻao ʻē aʻe e hoʻololi i ka ʻike o kēia no ka mea aʻe. Hoʻololi ka ʻaoʻao JavaScript i nā papa e hoʻomalu i ka ʻike ʻike a me ke ʻano. Hiki iā ʻoe ke hoʻohana iā ia me nā tabs, pill, a me nā .navhoʻokele mana ʻē aʻe.

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>

No ke kōkua ʻana i kāu mau pono, hana kēia me ka <ul>markup -based, e like me ka mea i hōʻike ʻia ma luna, a i ʻole me kekahi markup "roll your own". E hoʻomanaʻo, inā ʻoe e hoʻohana nei i ka <nav>, ʻaʻole pono ʻoe e hoʻohui role="tablist"pololei iā ia, no ka mea, e hoʻopau kēia i ke kuleana maoli o ka mea ma ke ʻano he ʻāina hoʻokele. Akā, e hoʻololi i kahi mea ʻē aʻe (ma ka laʻana ma lalo nei, kahi maʻalahi <div>) a ʻōwili a <nav>puni ia.

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>

Hoʻohana pū ka plugin tabs me nā pila.

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

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

A me nā lāʻau kūpaʻa. ʻO ke kūpono, no nā ʻaoʻao kū pololei, pono ʻoe e hoʻohui aria-orientation="vertical"i ka pahu papa inoa tab.

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

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

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

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

Hiki ke komo

ʻO nā ʻaoʻao hoʻopaʻa paʻa dynamic, e like me ia i wehewehe ʻia ma ka ARIA Authoring Practices Guide tabs pattern , pono role="tablist", role="tab", role="tabpanel", a me nā aria-hiʻohiʻona ʻē aʻe i mea e hōʻike ai i ko lākou kūkulu, hana, a me ke kūlana o kēia manawa i nā mea hoʻohana i nā ʻenehana kōkua (e like me nā mea heluhelu pale). Ma ke ʻano he hoʻomaʻamaʻa maikaʻi loa, paipai mākou e hoʻohana i <button>nā mea no nā tabs, no ka mea he mau mana kēia e hoʻomaka ai i kahi loli ikaika, ma mua o nā loulou e hoʻokele i kahi ʻaoʻao hou a i ʻole wahi.

Ma ka laina me ka ARIA Authoring Practices pattern, ʻo ka papa hana i kēia manawa wale nō e loaʻa ka manaʻo keyboard. Ke hoʻomaka ʻia ka plugin JavaScript, e kau ʻia tabindex="-1"ma luna o nā mana papa hana ʻole. I ka manawa e nānā ai ka papa hana i kēia manawa, hoʻāla nā kī kī i ka ʻaoʻao mua / aʻe, me ka plugin e hoʻololi i ka rovingtabindex e like me ia. Eia naʻe, e hoʻomaopopo ʻaʻole ʻokoʻa ka plugin JavaScript ma waena o nā papa kuhikuhi papa kuhikuhi a me ke kūpaʻa i ka wā e pili ana i nā pilina kī cursor: me ka nānā ʻole i ke ʻano o ka papa inoa o ka papa inoa, hele ka piko a me ka ʻaoʻao hema i ka ʻaoʻao mua, a ʻo ka pihi lalo a me ka ʻākau e hele i ka papa aʻe.

Ma keʻano laulā, no ka hoʻoikaika ʻana i ka hoʻokele keyboard, ʻōlelo ʻia e hana pono i nā panela tab iā lākou iho pū kekahi, ke ʻole ka mea mua i loaʻa nā ʻike koʻikoʻi i loko o ka panel tab. ʻAʻole hoʻāʻo ka plugin JavaScript e hoʻokele i kēia ʻano - inā kūpono, pono ʻoe e hoʻokaʻawale i kāu mau panel tab ma ka hoʻohui tabindex="0"ʻana i kāu markup.

ʻAʻole kākoʻo ka plugin JavaScript tab i nā loulou i loaʻa nā menus dropdown, no ka mea, ke kumu kēia i nā pilikia o ka hoʻohana a me ka hiki. Mai kahi hiʻohiʻona hoʻohana, ʻaʻole ʻike koke ʻia ka mea hoʻomaka o ka tab i hōʻike ʻia i kēia manawa (no ka mea aia i loko o ka papa kuhikuhi i pani ʻia) hiki ke huikau. Mai ka manaʻo hiki ke hiki, ʻaʻohe ala kūpono i kēia manawa e palapala i kēia ʻano hana i kahi maʻamau WAI ARIA maʻamau, ʻo ia hoʻi ʻaʻole hiki ke hoʻomaopopo maʻalahi i nā mea hoʻohana i nā ʻenehana kōkua.

Ke hoʻohana nei i nā ʻano ʻikepili

Hiki iā ʻoe ke hoʻoikaika i ka ʻaoʻao a i ʻole ka hoʻokele pila me ka kākau ʻole ʻana i kekahi JavaScript ma ke kuhikuhi wale ʻana a i data-bs-toggle="tab"ʻole data-bs-toggle="pill"ma kahi mea. E hoʻohana i kēia mau ʻano ʻikepili ma a i .nav-tabsʻole .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>

Ma o JavaScript

E hoʻā i nā ʻaoʻao papa ma o JavaScript (pono e hoʻāla ʻia kēlā me kēia ʻaoʻao):

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

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

Hiki iā ʻoe ke hoʻāla i nā pā pākahi ma nā ʻano he nui:

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

Ka hopena mae

No ka hoʻopau ʻana i nā tabs, hoʻohui .fadei kēlā me kēia .tab-pane. Pono ka pane ʻaoʻao mua e ʻike .showi ka ʻike mua.

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

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

Ho'ā i kāu ʻike ma ke ʻano he ʻāpana tab.

Hiki iā ʻoe ke hana i kahi laʻana tab me ka mea hana, no ka laʻana:

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

Kaʻina hana	wehewehe
`dispose`	Hoʻopau i ka pā o kahi mea.
`getInstance`	ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana tab e pili ana me kahi mea DOM, hiki iā ʻoe ke hoʻohana e like me kēia: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	ʻO ke ʻano static e hoʻihoʻi i kahi laʻana tab e pili ana i kahi mea DOM a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia. Hiki iā ʻoe ke hoʻohana e like me kēia: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Koho i ka pā i hāʻawi ʻia a hōʻike i kāna pane pili. ʻAʻole i koho ʻia kekahi ʻaoʻao ʻē aʻe i koho mua ʻia a hūnā ʻia kāna pane pili. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka pane tab (ʻo ia hoʻi ma mua o ka hiki ʻana o ka `shown.bs.tab`hanana).

Nā hanana

I ka hōʻike ʻana i kahi ʻaoʻao hou, e ʻā nā hanana ma ke ʻano penei:

hide.bs.tab(ma ka papa hana o kēia manawa)
show.bs.tab(ma ka ʻaoʻao e hōʻike ʻia)
hidden.bs.tab(ma ka papa hana mua, e like me ka hide.bs.tabhanana)
shown.bs.tab(ma ka ʻaoʻao hou i hōʻike ʻia, e like me ka show.bs.tabhanana)

Inā ʻaʻohe papa i hana mua ʻia, ʻaʻole e puhi ʻia nā hanana hide.bs.taba me nā hanana.hidden.bs.tab

ʻAno hanana	wehewehe
`hide.bs.tab`	Ke ahi kēia hanana i ka wā e hōʻike ʻia ai kahi pā hou (a no laila e hūnā ʻia ka pā hana mua). E hoʻohana `event.target`a `event.relatedTarget`e hoʻopaʻa i ka ʻaoʻao ʻeleu o kēia manawa a me ka ʻaoʻao koke-e-ʻeleu hou.
`hidden.bs.tab`	Ke ahi kēia hanana ma hope o ka hōʻike ʻia ʻana o kahi pā hou (a no laila ua hūnā ʻia ka pā hana mua). E hoʻohana `event.target`a `event.relatedTarget`e hoʻopaʻa i ka papa hana mua a me ka pā hana hou.
`show.bs.tab`	Hoʻomaka kēia hanana ma ka hōʻike pā, akā ma mua o ka hōʻike ʻia ʻana o ka pā hou. E hoʻohana `event.target`a `event.relatedTarget`e hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
`shown.bs.tab`	Hoʻomaka kēia hanana ma ka hōʻike pā ma hope o ka hōʻike ʻia ʻana o kahi pā. E hoʻohana `event.target`a `event.relatedTarget`e hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).

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