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.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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.

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Ku toosan .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Tabs

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 .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Kiniinnada

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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.

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

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

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

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.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

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

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.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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 tabban ee fir-fircoon, sida lagu qeexay Hab-dhaqannada Qoritaanka ee WAI ARIA . 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

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

Kiniinnada hoos u dhaca

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

Sass

Kala duwanaansho

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

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.

Interfaces tabbeded firfircoon, sida lagu qeexay WAI ARIA Hababka Qorista , waxay u baahan yihiin role="tablist", role="tab", role="tabpanel", iyo aria-sifooyin dheeraad ah si ay u gudbiyaan qaab-dhismeedkooda, shaqeyntooda iyo xaaladda 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.

Ogsoonow in is-dhexgalka firfircoon ee tabbeded aysan ku jirin liiska hoos u dhaca, sababtoo ah tani waxay sababtaa 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.

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.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

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.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

plugin tabs sidoo kale waxay la shaqeysaa kaniiniyada.

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

Oo leh kiniinno toosan.

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

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

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

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">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Iyadoo loo marayo JavaScript

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

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Waxaad u dhaqaajin kartaa tabs shaqsiyeed dhowr siyaabood:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

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 .

constructor

Wuxuu hawlgeliyaa curiyaha tab iyo weelka ka kooban. Tabku waa inuu lahaadaa mid data-bs-targetama, haddii la isticmaalayo xidhiidhiye, hrefsifo, lagu beegsanayo noodhka weelka ee DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

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.tabdhacdada dhicin).

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

  tab.show()

tuurid

Burburiyaa tabka curiyaha.

heliTusaale

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaale tab ah oo la xidhiidha curiyaha DOM

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

HelOrCreateInstance

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaale tab ah oo la xidhiidha curiyaha DOM, ama abuurto mid cusub haddii aan la bilaabin

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

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

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})