Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Navs ati awọn taabu

Iwe ati awọn apẹẹrẹ fun bi o ṣe le lo Bootstrap pẹlu awọn paati lilọ kiri.

Lori iwe yi

Nav mimọ

Lilọ kiri ni Bootstrap pin isamisi gbogbogbo ati awọn aza, lati .navkilasi ipilẹ si awọn ipinlẹ ti nṣiṣe lọwọ ati alaabo. Yipada awọn kilasi modifier lati yipada laarin ara kọọkan.

A ṣe ipilẹ .navpaati ipilẹ pẹlu flexbox ati pese ipilẹ to lagbara fun kikọ gbogbo awọn iru awọn paati lilọ kiri. O pẹlu diẹ ninu awọn ifasilẹ ara (fun ṣiṣẹ pẹlu awọn atokọ), diẹ ninu awọn padding ọna asopọ fun awọn agbegbe to buruju nla, ati aṣa alaabo ipilẹ.

Ẹya ipilẹ .navko pẹlu eyikeyi .activeipinle. Awọn apẹẹrẹ atẹle pẹlu kilasi naa, ni pataki lati ṣafihan pe kilasi kan pato ko ṣe okunfa eyikeyi iselona pataki.

Lati fihan ipo ti nṣiṣe lọwọ si awọn imọ-ẹrọ iranlọwọ, lo aria-currentabuda — lilo pageiye fun oju-iwe lọwọlọwọ, tabi truefun ohun ti o wa lọwọlọwọ ninu eto kan.

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>

Awọn kilasi ni a lo jakejado, nitorinaa isamisi rẹ le rọ pupọ. Lo <ul>s bii loke, <ol>ti aṣẹ awọn nkan rẹ ba ṣe pataki, tabi yi tirẹ pẹlu <nav>eroja kan. Nitori awọn .navlilo display: flex, awọn ọna asopọ nav huwa kanna bi awọn ohun nav yoo ṣe, ṣugbọn laisi ami iyasọtọ.

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>

Awọn aṣa ti o wa

Yi awọn ara ti .navs paati pẹlu modifiers ati igbesi. Illa ati baramu bi o ti nilo, tabi kọ ara rẹ.

Petele titete

Yi titete petele ti nav rẹ pẹlu awọn ohun elo flexbox . Nipa aiyipada, awọn navs ti wa ni ibamu si apa osi, ṣugbọn o le ni rọọrun yi wọn pada si aarin tabi titọ ọtun.

Aarin pẹlu .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>

Ni ibamu-ọtun pẹlu .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>

Inaro

Ṣe akopọ lilọ kiri rẹ nipa yiyipada itọsọna ohun kan Flex pẹlu ohun .flex-columnelo naa. Nilo lati akopọ wọn lori diẹ ninu awọn iwo oju ṣugbọn kii ṣe awọn miiran? Lo awọn ẹya idahun (fun apẹẹrẹ, .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>

Gẹgẹbi nigbagbogbo, lilọ kiri inaro ṣee ṣe laisi <ul>s, paapaa.

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>

Awọn taabu

Mu awọn nav ipilẹ lati oke ati afikun .nav-tabskilasi lati se ina kan tabbed ni wiwo. Lo wọn lati ṣẹda awọn agbegbe tabbable pẹlu wa taabu JavaScript itanna .

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>

Awọn oogun

Mu HTML kanna, ṣugbọn lo .nav-pillsdipo:

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>

Kun ati ki o da

Fi ipa mu .navawọn akoonu inu rẹ lati faagun ni kikun iwọn ti o wa ọkan ninu awọn kilasi modifier meji. Lati kun gbogbo aaye to wa ni iwọn pẹlu .nav-items rẹ, lo .nav-fill. Akiyesi pe gbogbo petele aaye ti wa ni ti tẹdo, sugbon ko gbogbo nav ohun kan ni o ni kanna iwọn.

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>

Nigbati o ba nlo <nav>lilọ kiri-orisun, o le yọkuro lailewu .nav-itembi o ṣe .nav-linknilo nikan fun <a>awọn eroja aṣ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>

Fun awọn eroja iwọn dogba, lo .nav-justified. Gbogbo aaye petele yoo gba nipasẹ awọn ọna asopọ nav, ṣugbọn ko dabi .nav-fillloke, gbogbo ohun nav yoo jẹ iwọn kanna.

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>

Iru si .nav-fillapẹẹrẹ nipa lilo <nav>lilọ-orisun.

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>

Nṣiṣẹ pẹlu Flex igbesi

Ti o ba nilo awọn iyatọ nav idahun, ronu nipa lilo lẹsẹsẹ awọn ohun elo flexbox . Lakoko ti ọrọ-ọrọ diẹ sii, awọn ohun elo wọnyi nfunni ni isọdi nla kọja awọn aaye ifasilẹ idahun. Ni awọn apẹẹrẹ ni isalẹ, nav wa yoo wa ni tolera lori awọn ni asuwon ti breakpoint, ki o si orisirisi si si a petele akọkọ ti o kun awọn iwọn ti o wa ti o bere lati kekere breakpoint.

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>

Nipa wiwọle

Ti o ba nlo awọn navs lati pese ọpa lilọ kiri, rii daju lati ṣafikun kan role="navigation"si apoti obi ti oye julọ ti <ul>, tabi fi ipari si ohun <nav>kan ni ayika gbogbo lilọ kiri. Maṣe ṣafikun ipa naa si <ul>funrararẹ, nitori eyi yoo ṣe idiwọ lati kede bi atokọ gangan nipasẹ awọn imọ-ẹrọ iranlọwọ.

Ṣe akiyesi pe awọn ọpa lilọ kiri, paapaa ti oju ba ṣe aṣa bi awọn taabu pẹlu .nav-tabskilasi, ko yẹ ki o fun role="tablist", role="tab"tabi role="tabpanel"awọn abuda. Iwọnyi jẹ deede nikan fun awọn atọkun tabbed ti o ni agbara, bi a ti ṣe apejuwe rẹ ninu ilana Awọn ilana Awọn adaṣe Onkọwe ARIA . Wo JavaScript ihuwasi fun ìmúdàgba tabbed atọkun ni yi apakan fun apẹẹrẹ. Ẹya aria-currentnaa ko ṣe pataki lori awọn atọkun tabbed ti o ni agbara niwọn igba ti JavaScript wa mu ipo ti o yan nipa fifi kun aria-selected="true"lori taabu ti nṣiṣe lọwọ.

Lilo awọn dropdowns

Ṣafikun awọn akojọ aṣayan silẹ pẹlu HTML afikun diẹ ati awọn ohun itanna JavaScript awọn silẹ .

Awọn taabu pẹlu 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>

Ìşọmọbí pẹlu 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

Awọn oniyipada

Fi kun v5.2.0

Gẹ́gẹ́ bí ara Bootstrap’s títúnṣe àwọn àyípadà CSS, àwọn navs ń lo àwọn oniyipada CSS ti agbegbe lori .nav, .nav-tabs, ati .nav-pillsfun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

Lori .navkilasi ipilẹ:

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

Lori .nav-tabskilasi iyipada:

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

Lori .nav-pillskilasi iyipada:

  --#{$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 oniyipada

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

Lo ohun itanna JavaScript taabu-pẹlu ẹyọkan tabi nipasẹ bootstrap.jsfaili ti a ṣajọpọ—lati faagun awọn taabu lilọ kiri wa ati awọn oogun lati ṣẹda awọn pane ti akoonu agbegbe.

Eyi jẹ diẹ ninu akoonu dimu ile akoonu ti o somọ. Tite taabu miiran yoo yi hihan eyi pada fun atẹle. Awọn taabu JavaScript yi awọn kilasi pada lati ṣakoso hihan akoonu ati iselona. O le lo pẹlu awọn taabu, awọn oogun, ati eyikeyi miiran .nav-agbara lilọ kiri.

Eyi jẹ diẹ ninu akoonu oniduro aaye profaili taabu akoonu ti o somọ. Tite taabu miiran yoo yi hihan eyi pada fun atẹle. Awọn taabu JavaScript yi awọn kilasi pada lati ṣakoso hihan akoonu ati iselona. O le lo pẹlu awọn taabu, awọn oogun, ati eyikeyi miiran .nav-agbara lilọ kiri.

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>

Lati ṣe iranlọwọ lati baamu awọn iwulo rẹ, eyi n ṣiṣẹ pẹlu <ul>isamisi-orisun, bi a ṣe han loke, tabi pẹlu isamisi “yi tirẹ” lainidii. Ṣe akiyesi pe ti o ba nlo <nav>, o ko yẹ ki o ṣafikun role="tablist"taara si rẹ, nitori eyi yoo dojui ipa abinibi eroja bi ami-ilẹ lilọ kiri. Dipo, yipada si ohun elo miiran (ni apẹẹrẹ ni isalẹ, rọrun <div>) ki o fi ipari si ni <nav>ayika rẹ.

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

Awọn itanna awọn taabu tun ṣiṣẹ pẹlu awọn oogun.

Eyi jẹ diẹ ninu akoonu dimu ile akoonu ti o somọ. Tite taabu miiran yoo yi hihan eyi pada fun atẹle. Awọn taabu JavaScript yi awọn kilasi pada lati ṣakoso hihan akoonu ati iselona. O le lo pẹlu awọn taabu, awọn oogun, ati eyikeyi miiran .nav-agbara lilọ kiri.

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.

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>

Ati pẹlu inaro ìşọmọbí. Ni deede, fun awọn taabu inaro, o yẹ ki o tun ṣafikun aria-orientation="vertical"si eiyan atokọ taabu.

Eyi jẹ diẹ ninu akoonu dimu ile akoonu ti o somọ. Tite taabu miiran yoo yi hihan eyi pada fun atẹle. Awọn taabu JavaScript yi awọn kilasi pada lati ṣakoso hihan akoonu ati iselona. O le lo pẹlu awọn taabu, awọn oogun, ati eyikeyi miiran .nav-agbara lilọ kiri.

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.

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>

Wiwọle

Awọn atọkun taabu ti o ni agbara, gẹgẹbi a ti ṣe apejuwe rẹ ninu ilana Awọn adaṣe Awọn alakọwe ARIA , nilo role="tablist", role="tab", role="tabpanel", ati awọn abuda afikun aria-lati le sọ eto wọn, iṣẹ ṣiṣe, ati ipo lọwọlọwọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ (gẹgẹbi awọn oluka iboju). Gẹgẹbi iṣe ti o dara julọ, a ṣeduro lilo <button>awọn eroja fun awọn taabu, nitori iwọnyi jẹ awọn idari ti o nfa iyipada agbara, dipo awọn ọna asopọ ti o lọ kiri si oju-iwe tuntun tabi ipo.

Ni ila pẹlu ilana Awọn iṣe Onkọwe ARIA, taabu ti nṣiṣẹ lọwọlọwọ nikan gba idojukọ keyboard. Nigbati ohun itanna JavaScript ti wa ni ipilẹṣẹ, yoo ṣeto tabindex="-1"lori gbogbo awọn iṣakoso taabu aiṣiṣẹ. Ni kete ti taabu ti nṣiṣe lọwọ lọwọlọwọ ni idojukọ, awọn bọtini kọsọ mu išaaju/taabu t’okan ṣiṣẹ, pẹlu ohun itanna yi iyipada rovingtabindex ni ibamu. Sibẹsibẹ, ṣe akiyesi pe ohun itanna JavaScript ko ṣe iyatọ laarin awọn atokọ taabu petele ati inaro nigbati o ba de awọn ibaraẹnisọrọ bọtini kọsọ: laibikita iṣalaye atokọ taabu, mejeeji kọsọ oke ati apa osi lọ si taabu iṣaaju, ati isalẹ ati kọsọ ọtun lọ si tókàn taabu.

Ni gbogbogbo, lati dẹrọ lilọ kiri bọtini itẹwe, o ni iṣeduro lati jẹ ki awọn panẹli taabu funrara wọn ni idojukọ bi daradara, ayafi ti ipin akọkọ ti o ni akoonu ti o nilari ninu nronu taabu ti jẹ idojukọ tẹlẹ. Ohun itanna JavaScript ko gbiyanju lati mu abala yii mu-nibiti o ba yẹ, iwọ yoo nilo lati ṣe ni gbangba awọn panẹli taabu rẹ ni idojukọ nipa fifi kun tabindex="0"si isamisi rẹ.
Ohun itanna taabu JavaScript ko ṣe atilẹyin awọn atọkun taabu ti o ni awọn akojọ aṣayan silẹ, nitori iwọnyi fa mejeeji lilo ati awọn ọran iraye si. Lati irisi lilo, otitọ pe eroja okunfa taabu ti o han lọwọlọwọ ko han lẹsẹkẹsẹ (bi o ti wa ninu akojọ aṣayan silẹ pipade) le fa iporuru. Lati oju iwoye wiwọle, lọwọlọwọ ko si ọna ti o ni oye lati ṣe maapu iru ikole yii si apẹrẹ WAI ARIA boṣewa, afipamo pe ko le ṣe ni irọrun ni oye si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ.

Lilo awọn abuda data

O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-bs-toggle="tab"tabi data-bs-toggle="pill"lori nkan kan. Lo awọn abuda data wọnyi lori .nav-tabstabi .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>

Nipasẹ JavaScript

Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

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

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

O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:

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

Ipa ipare

Lati jẹ ki awọn taabu rẹ wọ inu, ṣafikun .fadesi ọkọọkan .tab-pane. PAN taabu akọkọ gbọdọ tun ni .showlati jẹ ki akoonu ibẹrẹ han.

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

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

Mu akoonu rẹ ṣiṣẹ bi eroja taabu.

O le ṣẹda apẹẹrẹ taabu pẹlu oluṣeto, fun apẹẹrẹ:

const bsTab = new bootstrap.Tab('#myTab')
Ọna Apejuwe
dispose Pa taabu eroja run.
getInstance Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ taabu ti o ni nkan ṣe pẹlu nkan DOM, o le lo bii eyi: bootstrap.Tab.getInstance(element).
getOrCreateInstance Ọna aimi eyiti o da apẹẹrẹ taabu kan ti o ni nkan ṣe si nkan DOM tabi ṣẹda ọkan tuntun ni ọran ti ko ṣe ipilẹṣẹ. O le lo bi eleyi bootstrap.Tab.getOrCreateInstance(element):.
show Yan taabu ti a fun ati ṣafihan PAN ti o somọ. Eyikeyi taabu miiran ti o ti yan tẹlẹ di aiyan ati pe iwe ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (ie ṣaaju ki shown.bs.tabiṣẹlẹ naa to waye).

Awọn iṣẹlẹ

Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:

  1. hide.bs.tab(lori taabu lọwọ lọwọlọwọ)
  2. show.bs.tab(lori taabu ti yoo han)
  3. hidden.bs.tab(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna fun hide.bs.tabiṣẹlẹ naa)
  4. shown.bs.tab(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna fun show.bs.tabiṣẹlẹ naa)

Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, lẹhinna hide.bs.tabati awọn hidden.bs.tabiṣẹlẹ kii yoo jẹ ina.

Iru iṣẹlẹ Apejuwe
hide.bs.tab Iṣẹlẹ yii n ṣiṣẹ nigbati taabu tuntun yoo han (ati nitorinaa taabu ti nṣiṣe lọwọ tẹlẹ ni lati farapamọ). Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ lọwọlọwọ ati taabu tuntun lai-lati-ṣiṣẹ, ni atele.
hidden.bs.tab Iṣẹlẹ yii n tan lẹhin ti taabu tuntun ti han (ati nitorinaa taabu ti nṣiṣe lọwọ iṣaaju ti farapamọ). Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ iṣaaju ati taabu ti nṣiṣe lọwọ tuntun, lẹsẹsẹ.
show.bs.tab Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
shown.bs.tab Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele. 
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
})