Navs iyo tabs

Dukumeenti iyo tusaalooyin ku saabsan sida loo isticmaalo Bootstrap's ka kooban hagidda qaybaha.

Boggan

Saldhig nav

Navigation ee laga heli karo Bootstrap waxay wadaagaan calaamadaynta guud iyo qaababka, laga bilaabo .navfasalka hoose ilaa kuwa firfircoon iyo kuwa naafada ah. Isku beddel fasallada wax ka beddelka si aad u kala beddesho qaab kasta.

Qaybta salka .navwaxaa lagu dhisay flexbox waxayna bixisaa aasaas adag oo lagu dhisayo dhammaan noocyada qaybaha socodka. Waxaa ka mid ah hab-ka-hortagga qaar ka mid ah (oo loogu talagalay la shaqeynta liisaska), qaar ka mid ah xirmooyinka xirmooyinka meelaha waaweyn ee la garaacay, iyo qaabeynta naafada aasaasiga ah.

Qaybta salka .navkuma jirto .activegobol kasta. Tusaalooyinka soo socda waxa ku jira fasalka, inta badan si loo muujiyo in fasalkan gaarka ahi aanu kicin habayn gaar ah.

Si aad u gudbiso xaalada firfircoon ee tignoolajiyada caawinta, isticmaal aria-currentsifada - addoo isticmaalaya pageqiimaha bogga hadda, ama trueshayga hadda jira ee ku jira set.

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>

Fasallada waxaa la isticmaalaa inta oo dhan, markaa calaamadayntaadu waxay noqon kartaa mid aad u dabacsan. Isticmaal <ul>sida korka oo kale, <ol>haddii siday u kala horreeyaan alaabtaadu muhiim tahay, ama ku gal adiga oo wata <nav>curiye. Sababtoo ah .navisticmaalka display: flex, isku xirka nav wuxuu u dhaqmaa si la mid ah shayada nav, laakiin aan lahayn calaamado dheeri ah.

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>

Hababka la heli karo

Ku beddel qaabka .navqaybta s wax ka beddelayaasha iyo yutiilitooyinka. Isku qas oo iswaafaji hadba sida loo baahdo, ama adigu iska dhis.

Toosin toosan

Ku beddel toosinta toosan ee navkaaga adigoo isticmaalaya flexbox utilities . Sida caadiga ah, navs-ku waxay toosan yihiin bidix, laakiin waxaad si fudud ugu beddeli kartaa mid dhexe ama toosan.

Udub dhexaad u ah .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>

Ku toosan .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>

Toosan

Ku dheji marinkaaga adiga oo ku beddelaya jihada shayga dabacsan oo leh .flex-columnutility. Ma u baahan tahay inaad ku dhejiso meelaha daawashada qaarkood laakiin maaha kuwa kale? Isticmaal noocyada jawaabaha leh (tusaale, .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>

Sida had iyo jeer, navigation toosan waa suurtogal <ul>s la'aanteed, sidoo kale.

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

Wuxuu ka qaataa nav aasaasiga ah xagga sare wuxuuna ku daraa .nav-tabsfasalka si uu u soo saaro interface tabbed. Isticmaal iyaga si aad u abuurto gobollo la taaban karo leh 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>

Kiniinnada

Qaado HTML isku mid ah, laakiin isticmaal .nav-pillsbeddelka:

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>

Buuxi oo qiil

Ku qas .navwaxa ku jira inay kordhiyaan ballaca buuxa ee la heli karo mid ka mid ah labada fasal ee wax ka beddelka. Si loo qiyaaso u buuxi dhammaan boosaska banaan ee .nav-itemskaaga, isticmaal .nav-fill. U fiirso in dhammaan bannaanka jiifka ah la haysto, laakiin shay kasta oo nav ahi ma laha ballac isku mid ah.

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>

Markaad isticmaalayso <nav>navigation ku salaysan, waxaad si badbaado leh uga tagi kartaa .nav-itemsida kaliya .nav-linkee looga baahan yahay <a>curiyayaasha habaynta.

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>

Walxaha siman ballaca, isticmaal .nav-justified. Dhammaan meelaha jiifka ah waxaa qabsan doona isku xirka nav, laakiin si ka duwan kan .nav-fillkore, shay kasta oo nav wuxuu noqon doonaa balac isku mid ah.

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>

Si la mid ah .nav-filltusaalaha iyadoo la adeegsanayo <nav>navigation ku salaysan.

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>

La shaqaynta utility flex

Haddii aad u baahan tahay kala duwanaansho nav jawaab celin ah, tixgeli inaad isticmaasho taxane ah utilities flexbox . In kasta oo ay ka hadal badan yihiin, adeegyadani waxa ay bixiyaan is-beddel weyn oo ku yimaadda meelaha nasashada ee jawaabta ah. Tusaalaha hoose, nav-keena waxa lagu dhejin doonaa barta jabinta ugu hooseysa, ka dibna la qabsi qaabayn toosan oo buuxinaysa ballaca la heli karo laga bilaabo barta jabinta yar.

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>

Marka la eego gelitaanka

Haddii aad isticmaalayso navs si aad u bixiso navigation bar, hubi inaad ku darto role="navigation"weelka ugu macquulsan ee waalidka ee <ul>, ama ku duub shay <nav>hareeraha oo dhan. Ha ku darin doorka <ul>laftiisa, sababtoo ah tani waxay ka hortagi doontaa in lagu dhawaaqo liiska dhabta ah ee tignoolajiyada caawinta.

Ogsoonow in baararka navigation-ka, xitaa haddii muuqaal ahaan loo qaabeeyey tab .nav-tabsfasalka, waa in aan la siin role="tablist", role="tab"ama role="tabpanel"sifooyinka. Kuwaani waxay ku habboon yihiin oo keliya is-dhexgalyada tababbarka ah ee firfircoon, sida lagu sharraxay ARIA hannaanka Tilmaamaha Dhaqanka Qoraaga . Tusaale ahaan ka eeg hab- dhaqanka JavaScript ee is-dhex-galka firfircoon ee tabbeded ee qaybtan tusaale ahaan. Sifada aria-currentlagama maarmaan ma aha interfaces tabbeded firfircoon maadaama JavaScript-keena uu maamulo gobolka la doortay iyadoo lagu darayo aria-selected="true"tab firfircoon.

Isticmaalka hoos u dhaca

Ku dar liiska hoos-u-dhaca oo leh HTML yar oo dheeri ah iyo dul-dhigayaasha JavaScript plugin .

Tabs leh hoos u dhac

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>

Kiniinnada hoos u dhaca

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

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, navs hadda waxay isticmaalaan doorsoomayaasha CSS maxalliga ah .nav, .nav-tabs, iyo .nav-pillshagaajinta habeynta-waqtiga dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

Dhanka .navfasalka:

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

On .nav-tabsfasalka wax ka beddelka:

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

On .nav-pillsfasalka wax ka beddelka:

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

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

Dhaqanka JavaScript

Isticmaal tabka JavaScript-ka-ku dar si gaar ah ama bootstrap.jsfaylka la soo ururiyey-si aad u kordhiso tabsiyadayada iyo kaniiniyadayada si aad u abuurto muraayado la taaban karo oo ka kooban gudaha.

Tani waa qaar ka mid ah waxyaabaha ku jira boos-hayeyaasha waxyaabaha la xidhiidha tabka Guriga . Gujista tab kale waxay u rogi doontaa muuqalka kan kan xiga. Tab JavaScript waxay isku beddeshaa fasallo si loo xakameeyo muuqaalka iyo qaabaynta nuxurka. Waxaad ku isticmaali kartaa tabs, kaniini, iyo .navhagitaan kasta oo awood leh.

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

Si ay kaaga caawiso ku habboonaanta baahiyahaaga, tani waxay la shaqaysaa <ul>calaamadaynta ku salaysan, sida kor ka muuqata, ama calaamad kasta oo "ku-dullid adigu" oo aan sabab lahayn. Ogsoonow haddii aad isticmaalayso <nav>, waa inaadan role="tablist"si toos ah ugu darin, sababtoo ah tani waxay meesha ka saaraysaa doorka asalka ah ee curiyaha ee calaamada marineed. Bedelkeeda, u beddel shay kale (tusaale hoose, fudud <div>) oo ku duub <nav>hareeraha.

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>

plugin tabs sidoo kale waxay la shaqeysaa kaniiniyada.

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>

Oo leh kiniinno toosan. Fikrad ahaan, tabsyada toosan, waa inaad sidoo kale aria-orientation="vertical"ku dartaa weelka liiska 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>

Helitaanka

Interfaces tabbeded firfircoon, sida lagu sifeeyay ARIA Hababka Hagaha Hababka Qorista , waxay u baahan yihiin role="tablist", role="tab", role="tabpanel", iyo aria-sifooyin dheeraad ah si ay ugu gudbiyaan qaab-dhismeedkooda, shaqayntooda, iyo xaalada hadda isticmaalayaasha tignoolajiyada caawinta (sida akhristayaasha shaashadda). Sida dhaqanka ugu wanaagsan, waxaan kugula talineynaa isticmaalka <button>walxaha tabs-yada, maadaama kuwani yihiin kontaroolo kicinaya isbeddel firfircoon, halkii ay ka ahaan lahaayeen xiriirinta u socdaalaya bog ama goob cusub.

Iyadoo la raacayo qaabka Dhaqanka Qorista ee ARIA, kaliya tabaha hadda firfircoon ayaa helaya diiradda kiiboodhka. Marka plugin JavaScript la bilaabo, waxay dejin tabindex="-1"doontaa dhammaan kontaroolada tab ee aan shaqaynayn. Marka tabka hadda firfircooni uu diirada saaro, furayaasha cursorku waxa ay hawl galiyaan tab hore/xiga, iyada oo plugin-ku uu u bedelayo socodka sitabindex waafaqsan. Si kastaba ha ahaatee, ogow in plugin-ka JavaScript uusan u kala sooceynin liisaska tab-tooska ah iyo kuwa toosan marka ay timaaddo cursor isdhexgalka muhiimka ah: iyadoon loo eegin jihada liiska tab, labada kor iyo bidixba waxay aadayaan tabtii hore, hoos iyo hoos iyo midigna aad tag tab xiga.

Guud ahaan, si loo fududeeyo hagidda kiiboodhka, waxa lagu talinayaa in laga dhigo tab-bandhigyada laftooda kuwo diiradda la saarayo, ilaa qaybta ugu horreysa ee ka kooban nuxurka macne ee ku jirta guddida tab aanay hore u ahayn diiradda. Plugin-ka JavaScript iskuma dayo in uu maareeyo dhinacan-halka ay ku habboon tahay, waxa aad u baahan doontaa in aad si cad u samayso muraayadaha tabkaaga kuwo diiradda la saarayo adiga oo ku daraya tabindex="0"calaamadayntaada.

Shabakadda JavaScript-ka ee tabka ma taageerto is-dhexgalka tabbeded ee ay ku jiraan menu-yada hoos u dhaca, sababtoo ah kuwani waxay sababaan isticmaalka iyo arrimaha gelitaanka labadaba. Marka laga eego dhinaca isticmaalka, xaqiiqda ah in qaybta kiciya ee hadda la soo bandhigay aan isla markiiba la arki karin (maadaama ay ku jirto liiska hoos u dhaca ee xiran) waxay keeni kartaa jahawareer. Marka laga eego aragtida gelitaanka, hadda ma jirto hab macquul ah oo lagu khariidado dhismaha noocan ah oo lagu jaangooyo qaabka caadiga ah ee WAI ARIA, taasoo la macno ah inaan si fudud loo fahmi karin isticmaalayaasha tignoolajiyada caawinta.

Isticmaalka sifooyinka xogta

Waxaad dhaqaajin kartaa tab ama kaniiniga navigation adoon qorin wax JavaScript ah adiga oo si fudud u qeexaya data-bs-toggle="tab"ama data-bs-toggle="pill"shay. Isticmaal xogtan sifaadka .nav-tabsama .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>

Iyadoo loo marayo JavaScript

U oggolow tab tabsiyada JavaScript-ka (tabo kastaa waxay u baahan tahay in si gaar ah loo hawlgeliyo):

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

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

Waxaad u dhaqaajin kartaa tabs shaqsiyeed dhowr siyaabood:

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

Saamaynta libdhi

Si aad tabsku u libdhaan, ku dar .fademid kasta .tab-pane. Shabakadda ugu horreysa waa inay sidoo kale ka .showdhigtaa nuxurka bilowga ah mid muuqda.

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

Hababka

Hababka iyo kala-guurka aan isku midka ahayn

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .

Waxay u shaqaysiisaa macluumaadkaaga sidii qayb tab ah.

Waxaad samayn kartaa tusaale tab ah dhisaha, tusaale ahaan:

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

Habka	Sharaxaada
`dispose`	Burburiyaa tabka curiyaha.
`getInstance`	Habka taagan ee kuu ogolaanaya inaad hesho tusaale tab ah oo la xidhiidha curiyaha DOM, waxaad u isticmaali kartaa sidan: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Habka taagan ee soo celiya tusaale tab ah oo la xidhiidha curiyaha DOM ama abuura mid cusub haddii aan la bilaabin. Waxaad u isticmaali kartaa sidan `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Wuxuu doortaa tab la siiyay oo tusa shaadhka la xidhiidha. Tabo kasta oo kale oo hore loo doortay waxa ay noqotaa mid aan la dooran oo muqaalkeeda la xidhiidha waa qarsoon yahay. Ku soo noqda qofka soo wacay ka hor inta aan la soo bandhigin muraayadda tab (tusaale ka hor intaanay `shown.bs.tab`dhacdada dhicin).

Dhacdooyinka

Marka la tuso tab cusub, dhacdooyinku waxay u dabcaan sida soo socota:

hide.bs.tab(ku yaal tab firfircoon ee hadda)
show.bs.tab(ku yaal tabka lagu soo bandhigi doono)
hidden.bs.tab(ee tabtii hore ee firfircoonayd, oo la mid ah hide.bs.tabdhacdada)
shown.bs.tab(oo ku yaal tab cusub oo firfircoon, oo la mid ah show.bs.tabdhacdada)

Haddi aanu tab hore u shaqayn, markaa dhacdooyinka hide.bs.tabiyo hidden.bs.tabdhacdooyinka lama eryi doono.

Nooca dhacdada	Sharaxaada
`hide.bs.tab`	Dhacdadani waxay dab kacaysaa marka tab cusub la muujinayo (oo sidaas awgeed tabtii hore ee firfircoonayd waa in la qariyaa). Isticmaal `event.target`oo `event.relatedTarget`aad beegsato tab firfircoon ee hadda iyo ta cusub ee dhawaan-wax-qaban doona, siday u kala horreeyaan.
`hidden.bs.tab`	Dhacdadani waxay dabaysaa ka dib marka tab cusub la muujiyo (oo sidaas awgeed tabtii hore ee firfircoonayd ayaa qarsoon). Isticmaal `event.target`oo `event.relatedTarget`aad beegsato tabtii hore ee firfircoonayd iyo tab cusub ee firfircoon, siday u kala horreeyaan.
`show.bs.tab`	Dhacdadani waxay ku socotaa bandhigga tab, laakiin ka hor intaan tab cusub la muujin. Isticmaal `event.target`oo `event.relatedTarget`aad beegsato tab firfircooni iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan.
`shown.bs.tab`	Dhacdadani waxay ku gubanaysaa bandhiga tab ka dib marka tab la tuso. Isticmaal `event.target`oo `event.relatedTarget`aad beegsato tab firfircooni iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan.

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