Navs

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

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.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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.

<nav class="nav">
  <a class="nav-link active" 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:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" 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:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" 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 flex .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" 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.

<nav class="nav flex-column">
  <a class="nav-link active" 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 dhaliyo 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" 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:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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 la heli karo mid ka mid ah labada fasal ee wax ka beddelka. Si loo qiyaaso u buuxi dhammaan boosaska la heli karo .nav-items-kaaga, 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" 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.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" 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.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" 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>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" 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.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" 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. Kuwani waxay ku habboon yihiin oo keliya is-dhexgalyada tabban ee fir-fircoon, 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.

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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

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.

Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js .

Interfaces tabbeded firfircoon, sida lagu sifeeyay ARIA hannaanka habdhaqanka qorista ee qaabka tabs , 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 taagan 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 tabka JavaScript plugin aanuu taageersanayn is-dhexgalka tabbeded ee ay ku jiraan menu-yada hoos u dhaca, maadaama ay kuwani 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.

Waxa ku jira meeleeyaha qaybta tab Middani waxay la xidhiidhaa tabka guriga. Waxay kugu qaadaa mayl sare, aad u sarreeya, sababtoo ah waxay heshay hal dhoola cadeyn caalami ah. Sariirtayda waxaa jooga nin qalaad, madaxa ayaa iga garaacaya. Oh, maya. Nolol kale waxaan kaa dhigi lahaa inaad joogtid. Sababta aniga, wax walba waan awoodaa. Ku habboon dagaalkayga taajka. Waxaa loo isticmaali jiray in lagu xaddo khamriga waalidkaa oo aad kor ugu qaaddo saqafka. Codka, taam ah oo diyaarsan, kor u kac ayaa keenaysa in uu cuslaado. Jacaylkeedu waa sida daroogada oo kale. Waxaan u malaynayaa in aan hilmaamay in aan doorasho lahaa.

Waxa ku jira meeleeyaha qaybta tab Midkani waxa uu la xidhiidha tab profile. Waxaad heshay dhismaha ugu wanaagsan Tigidhada baasaboorka, iyadu waa cosmopolitan. Fiican, cusub, daran, waxaanu ku helnay quful. Weligaa ha qorsheynin in aan maalin ku waayi doono. Qalbigaaga ayay cunaysaa. Dhunkashadaadu waa cosmic, dhaqaaq kasta waa sixir. Waxaan ula jeedaa kuwa, waxaan ula jeedaa sidii iyada oo kale. Salaan gacaliye aan safar qaadno. Lahaanshaha habeenka oo kale sida 4-ta Luulyo! Laakin waxaad jeclaan lahayd inaad khasaarto.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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.

Waxa ku jira meeleeyaha qaybta tab Middani waxay la xidhiidhaa tabka guriga. Adiga oo ku arkay badhtamaha magaalada oo heesta Buluugga. Daawo adigoo goobaabinaya bulaacada. Maxaad iigu diidaysaa inaan ku joojiyo? culus waa madaxa xidha taajka. Haah, waxaynu ka qaylinaynaa malaa'igaha, Oo dhulka kor uga soo da'aya. Waxaan rabaa inaan ku arko bandhigga 3D, filim. Weligaa ma dareentay, ma dareemaysaa in warqad khafiif ah. Waa haa ama maya, maya malaha.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

Isticmaalka sifooyinka xogta

Waxaad dhaqaajin kartaa tab ama kaniiniga navigation adoon qorin wax JavaScript ah adiga oo si fudud u qeexaya data-toggle="tab"ama data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Waxaad u dhaqaajin kartaa tabs shaqsiyeed dhowr siyaabood:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

Saamaynta libdhi

Si aad tabsku u libdhaan, ku dar .fademid kasta .tab-pane. Shabakadda tab ee 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 .

$() tab

Wuxuu hawlgeliyaa curiyaha tab iyo weelka ka kooban. Tabku waa inuu lahaadaa mid data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('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).

$('#someTab').tab('show')

.tab('ka tuur')

Burburiyaa tabka curiyaha.

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 shidan tahay bandhiga tab, laakiin ka hor intaan tab cusub la muujin. Isticmaal `event.target`oo `event.relatedTarget`si aad u beegsato tab firfircoon iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan.
la tusay.bs.tab	Dhacdadani waxay ku gubanaysaa bandhiga tab ka dib marka tab la muujiyo. Isticmaal `event.target`oo `event.relatedTarget`si aad u beegsato tab firfircoon iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan.
qari.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`si aad u beegsato tab fir fircoon ee hadda jirta iyo tabka cusub ee dhawaan hawl-fulin doono, siday u kala horreeyaan.
qarsoon.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 tabka cusub ee firfircoon, siday u kala horreeyaan.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})