Navs and tabs

Cov ntaub ntawv thiab cov piv txwv rau kev siv Bootstrap cov khoom siv navigation.

Ntawm nplooj ntawv no

Base nav

Kev taw qhia muaj nyob hauv Bootstrap qhia cov cim dav dav thiab cov qauv, los ntawm cov .navchav kawm hauv paus mus rau lub xeev nquag thiab tsis taus. Hloov cov chav kawm hloov pauv hloov ntawm txhua tus qauv.

Lub hauv paus .navtivthaiv yog tsim nrog flexbox thiab muab lub hauv paus muaj zog rau kev tsim txhua yam ntawm cov khoom siv navigation. Nws suav nrog qee qhov kev hloov pauv hloov pauv (rau kev ua haujlwm nrog cov npe), qee qhov txuas txuas rau thaj chaw loj dua, thiab cov qauv kev tsis taus yooj yim.

Lub hauv paus .navtivthaiv tsis suav nrog ib .activelub xeev. Cov piv txwv hauv qab no suav nrog cov chav kawm, feem ntau yog ua kom pom tias chav kawm tshwj xeeb no tsis ua rau muaj qhov tshwj xeeb styling.

Txhawm rau qhia lub xeev nquag mus rau kev pabcuam thev naus laus zis, siv tus aria-currentcwj pwm - siv tus pagenqi rau nplooj ntawv tam sim no, lossis truerau cov khoom tam sim no hauv ib txheej.

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>

Cov chav kawm yog siv thoob plaws, yog li koj cov ntawv cim tuaj yeem hloov pauv tau yooj yim. Siv <ul>s zoo li saum toj no, <ol>yog tias qhov kev txiav txim ntawm koj cov khoom tseem ceeb, los yog yob koj tus kheej nrog ib lub <nav>caij. Vim tias kev .navsiv display: flex, cov kev sib txuas nav ua tib yam li cov khoom siv nav, tab sis tsis muaj qhov cim ntxiv.

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>

Muaj cov qauv

Hloov cov style ntawm .navs tivthaiv nrog kev hloov kho thiab kev siv hluav taws xob. Sib tov thiab phim raws li xav tau, lossis tsim koj tus kheej.

Kab rov tav alignment

Hloov cov kab rov tav txoj kab nruab nrab ntawm koj lub nav nrog flexbox utilities . Los ntawm lub neej ntawd, navs yog sab laug, tab sis koj tuaj yeem hloov tau yooj yim rau nruab nrab lossis sab xis.

Centered nrog .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>

Right-aligned nrog .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>

Ntsug

Muab koj cov kev taw qhia los ntawm kev hloov cov khoom flex kev taw qhia nrog cov .flex-columnkhoom siv hluav taws xob. Yuav tsum tau muab lawv tso rau ntawm qee qhov chaw saib tab sis tsis yog lwm tus? Siv cov lus teb versions (piv txwv li, .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>

Raws li ib txwm muaj, ntsug navigation yog ua tau yam tsis muaj <ul>s, ib yam nkaus.

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>

Tabs

Siv qhov yooj yim nav los ntawm saum toj no thiab ntxiv cov .nav-tabschav kawm los tsim ib lub tabbed interface. Siv lawv los tsim cov cheeb tsam tabbable nrog peb tab 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>

Cov tshuaj

Siv tib yam HTML, tab sis siv .nav-pillshloov:

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>

Sau thiab ua pov thawj

quab yuam koj .navcov ntsiab lus txuas ntxiv qhov dav muaj nyob hauv ib qho ntawm ob chav hloov kho. Yuav kom proportionately sau tag nrho cov chaw muaj nrog koj .nav-items, siv .nav-fill. Daim ntawv ceeb toom tias txhua qhov chaw kab rov tav yog nyob, tab sis tsis yog txhua qhov khoom nav muaj qhov dav tib yam.

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>

Thaum siv ib <nav>-raws li kev taw qhia, koj tuaj yeem ua kom nyab xeeb tshem tawm .nav-itemraws li tsuas .nav-linkyog xav tau rau cov ntsiab lus 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>

Rau qhov sib npaug-dav, siv .nav-justified. Txhua qhov chaw kab rov tav yuav nyob ntawm qhov txuas nav, tab sis tsis zoo li cov .nav-fillsaum toj no, txhua yam khoom nav yuav yog tib qhov dav.

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>

Zoo ib yam li qhov .nav-fillpiv txwv uas siv ib <nav>-based navigation.

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>

Ua haujlwm nrog flex utilities

Yog tias koj xav tau cov kev hloov pauv hloov pauv, xav txog kev siv cov khoom siv hluav taws xob flexbox . Thaum hais lus ntau dua, cov khoom siv no muab kev hloov kho ntau dua hla cov ntsiab lus teb. Hauv qhov piv txwv hauv qab no, peb cov nav hia yuav muab tso rau ntawm qhov chaw qis tshaj plaws, tom qab ntawd hloov mus rau kab rov tav layout uas sau qhov dav muaj pib los ntawm qhov chaw me me.

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>

Hais txog kev siv tau

Yog tias koj siv navs los muab lub bar navigation, nco ntsoov ntxiv ib qho role="navigation"rau lub thawv niam txiv lub ntsiab lus tshaj plaws ntawm <ul>, lossis qhwv ib lub <nav>caij nyob ib ncig ntawm tag nrho cov navigation. Tsis txhob ntxiv lub luag haujlwm rau <ul>nws tus kheej, vim qhov no yuav tiv thaiv nws los ntawm kev tshaj tawm raws li cov npe tiag tiag los ntawm kev pabcuam thev naus laus zis.

Nco ntsoov tias cov bars navigation, txawm tias pom kev zoo li tabs nrog cov .nav-tabschav kawm, yuav tsum tsis txhob muab role="tablist", role="tab"lossis role="tabpanel"cov cwj pwm. Cov no tsuas yog tsim nyog rau dynamic tabbed interfaces, raws li tau piav qhia hauv ARIA Authoring Practices Guide tabs qauv . Saib JavaScript tus cwj pwm rau dynamic tabbed interfaces hauv seem no piv txwv. Tus aria-currentcwj pwm tsis tsim nyog ntawm dynamic tabbed interfaces txij li peb JavaScript tswj hwm lub xeev xaiv los ntawm kev ntxiv aria-selected="true"rau ntawm lub tab nquag.

Siv cov dropdowns

Ntxiv dropdown menus nrog me ntsis ntxiv HTML thiab dropdowns JavaScript plugin .

Tabs nrog dropdowns

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>

Cov tshuaj nrog dropdowns

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

Hloov pauv

Ntxiv hauv v5.2.0

Raws li ib feem ntawm Bootstrap qhov kev hloov pauv CSS hloov pauv mus kom ze, navs tam sim no siv CSS qhov sib txawv hauv zos ntawm .nav, .nav-tabs, thiab .nav-pillsrau kev hloov kho lub sijhawm tiag tiag. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

Nyob rau hauv lub .navhauv paus chav kawm:

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

Ntawm .nav-tabschav kawm 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};

Ntawm .nav-pillschav kawm 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};

Sass variables

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

JavaScript cwj pwm

Siv lub tab JavaScript plugin - suav nrog nws tus kheej lossis los ntawm cov ntaub ntawv sau ua ke bootstrap.js- txhawm rau txuas ntxiv peb cov tab thiab cov ntsiav tshuaj los tsim cov tabbable panes ntawm cov ntsiab lus hauv zos.

Nov yog qee qhov chaw muab cov ntsiab lus hauv Tsev tab cov ntsiab lus cuam tshuam. Nyem rau lwm tab yuav toggle qhov pom ntawm qhov no rau lwm qhov. Lub tab JavaScript swaps chav kawm los tswj cov ntsiab lus pom pom thiab styling. Koj tuaj yeem siv nws nrog tabs, ntsiav tshuaj, thiab lwm yam .nav-powered navigation.

Nov yog qee qhov chaw muab cov ntsiab lus ntawm Profile tab cov ntsiab lus cuam tshuam. Nyem rau lwm tab yuav toggle qhov pom ntawm qhov no rau lwm qhov. Lub tab JavaScript swaps chav kawm los tswj cov ntsiab lus pom pom thiab styling. Koj tuaj yeem siv nws nrog tabs, ntsiav tshuaj, thiab lwm yam .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.

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>

Txhawm rau pab kom haum koj cov kev xav tau, qhov no ua haujlwm nrog <ul>-based markup, raws li qhia saum toj no, lossis nrog kev txiav txim siab "yob koj tus kheej" markup. Nco ntsoov tias yog tias koj siv <nav>, koj yuav tsum tsis txhob ntxiv role="tablist"ncaj qha rau nws, vim qhov no yuav dhau los ntawm lub luag haujlwm ntawm lub luag haujlwm ua ib qho chaw navigation. Hloov chaw, hloov mus rau lwm lub caij (hauv qhov piv txwv hauv qab no, ib qho yooj yim <div>) thiab qhwv <nav>ib ncig ntawm nws.

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>

Tabs plugin kuj ua haujlwm nrog tshuaj.

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>

Thiab nrog cov tshuaj ntsug. Qhov zoo tshaj plaws, rau cov tab ntsug, koj yuav tsum tau ntxiv aria-orientation="vertical"rau cov ntawv teev cov thawv.

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>

Kev siv tau

Dynamic tabbed interfaces, raws li tau piav nyob rau hauv ARIA Authoring Practices Guide tabs qauv , xav tau role="tablist", role="tab", role="tabpanel", thiab cov aria-cwj pwm ntxiv txhawm rau txhawm rau nthuav qhia lawv cov qauv, kev ua haujlwm, thiab lub xeev tam sim no rau cov neeg siv cov thev naus laus zis pab (xws li cov neeg nyeem npo). Raws li qhov kev coj ua zoo tshaj plaws, peb pom zoo kom siv <button>cov ntsiab lus rau cov tabs, vim tias cov no yog cov kev tswj hwm uas ua rau muaj kev hloov pauv hloov pauv, tsis yog cov txuas uas mus rau nplooj ntawv tshiab lossis qhov chaw.

Raws li ARIA Authoring Practices qauv, tsuas yog lub tab tam sim no tau txais cov keyboard tsom. Thaum lub JavaScript plugin pib, nws yuav teem tabindex="-1"rau tag nrho cov inactive tab tswj. Thaum lub tab tam sim no ua haujlwm tau ua kom pom tseeb, tus cursor yuam sij qhib lub tab yav dhau los / tom ntej, nrog lub plugin hloov qhov rov uatabindex raws li. Txawm li cas los xij, nco ntsoov tias JavaScript plugin tsis paub qhov txawv ntawm kab rov tav thiab ntsug tab cov npe thaum nws los txog rau tus cursor tseem ceeb kev sib cuam tshuam: tsis hais cov npe tab kev taw qhia, ob qho tib si nce thiab sab laug cursor mus rau lub tab dhau los, thiab nqes thiab txoj cai cursor mus rau. lub tab tom ntej.

Feem ntau, txhawm rau pab txhawb cov keyboard navigation, nws raug nquahu kom ua kom cov tab panels lawv tus kheej tsom tau ib yam nkaus, tshwj tsis yog thawj lub ntsiab lus uas muaj cov ntsiab lus tseem ceeb hauv lub vaj huam sib luag tab twb tau tsom mus. JavaScript plugin tsis sim ua qhov no - qhov tsim nyog, koj yuav tsum tau ua kom meej meej ua rau koj lub tab panels tsom tau los ntawm kev ntxiv tabindex="0"rau hauv koj cov cim.

Tab JavaScript plugin tsis txhawb tabbed interfaces uas muaj dropdown menus, vim cov no ua rau ob qho tib si usability thiab accessibility teeb meem. Los ntawm kev pom kev siv tau, qhov tseeb tias tam sim no tab tom nthuav tawm lub ntsiab lus tsis pom tam sim ntawd (raws li nws nyob hauv cov ntawv qhia zaub mov kaw) tuaj yeem ua rau tsis meej pem. Los ntawm qhov kev nkag mus tau zoo, tam sim no tsis muaj txoj hauv kev zoo los piav qhia qhov kev tsim kho no rau tus qauv WAI ARIA tus qauv, txhais tau tias nws tsis tuaj yeem nkag siab yooj yim rau cov neeg siv cov cuab yeej pabcuam.

Siv cov ntaub ntawv tus cwj pwm

Koj tuaj yeem qhib lub tab lossis ntsiav tshuaj navigation yam tsis tau sau ib qho JavaScript los ntawm kev qhia yooj yim data-bs-toggle="tab"lossis data-bs-toggle="pill"ntawm lub ntsiab lus. Siv cov ntaub ntawv tus cwj pwm ntawm .nav-tabslossis .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>

Ntawm JavaScript

Qhib tabbable tabs ntawm JavaScript (txhua tab yuav tsum tau qhib ib tus zuj zus):

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

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

Koj tuaj yeem qhib ib tus neeg tab hauv ntau txoj hauv kev:

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

Fade nyhuv

Txhawm rau ua kom cov tabs ploj mus, ntxiv .faderau txhua qhov .tab-pane. Thawj tab pane yuav tsum tau .showua kom pom cov ntsiab lus thawj zaug.

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

Cov txheej txheem

Asynchronous txoj kev thiab kev hloov

Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

Qhib koj cov ntsiab lus raws li lub ntsiab tab.

Koj tuaj yeem tsim ib qho piv txwv nrog tus tsim, piv txwv li:

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

Txoj kev	Kev piav qhia
`dispose`	Ua kom puas lub ntsiab tab.
`getInstance`	Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv tab cuam tshuam nrog DOM lub caij, koj tuaj yeem siv nws zoo li no: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Txoj kev zoo li qub uas rov qab ib qho piv txwv cuam tshuam rau DOM lub caij lossis tsim ib qho tshiab yog tias nws tsis tau pib. Koj tuaj yeem siv nws li no: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Xaiv qhov muab tab thiab qhia nws cov kab sib txuas. Lwm lub tab uas tau xaiv yav dhau los yuav tsis raug xaiv thiab nws cov pane cuam tshuam tau muab zais. Rov qab mus rau tus neeg hu ua ntej lub tab pane tau tshwm sim tiag tiag (piv txwv li ua ntej qhov `shown.bs.tab`xwm txheej tshwm sim).

Cov xwm txheej

Thaum pom ib lub tab tshiab, cov xwm txheej hluav taws kub hauv qhov kev txiav txim hauv qab no:

hide.bs.tab(ntawm lub tab active tam sim no)
show.bs.tab(ntawm qhov yuav tsum tau qhia tab)
hidden.bs.tab(nyob rau yav dhau los active tab, tib yam li rau qhov hide.bs.tabkev tshwm sim)
shown.bs.tab(ntawm lub tab tshiab uas nyuam qhuav tshwm sim, tib yam li rau qhov show.bs.tabkev tshwm sim)

Yog tias tsis muaj tab twb ua haujlwm lawm, ces cov xwm txheej hide.bs.tabthiab hidden.bs.tabcov xwm txheej yuav tsis raug rho tawm haujlwm.

Hom xwm txheej	Kev piav qhia
`hide.bs.tab`	Qhov kev tshwm sim no tua hluav taws thaum lub tab tshiab yuav tsum tau tshwm sim (thiab yog li lub tab yav dhau los yuav tsum tau muab zais). Siv `event.target`thiab `event.relatedTarget`tsom rau cov tab tam sim no thiab cov tshiab sai sai-rau-yuav-ua haujlwm tab, feem.
`hidden.bs.tab`	Qhov kev tshwm sim no tshwm sim tom qab lub tab tshiab tau tshwm sim (thiab yog li lub tab active yav dhau los tau muab zais). Siv `event.target`thiab `event.relatedTarget`tsom mus rau lub tab active yav dhau los thiab cov tshiab tab tshiab, raws li.
`show.bs.tab`	Qhov kev tshwm sim no tua hluav taws ntawm tab qhia, tab sis ua ntej tab tshiab tau tshwm sim. Siv `event.target`thiab `event.relatedTarget`tsom rau lub tab active thiab yav dhau los active tab (yog tias muaj) feem.
`shown.bs.tab`	Qhov kev tshwm sim no tua hluav taws ntawm tab qhia tom qab tau pom tab. Siv `event.target`thiab `event.relatedTarget`tsom rau lub tab active thiab yav dhau los active tab (yog tias muaj) feem.

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