in English

Navs ye

Sɛbɛnw ani misaliw baara kɛcogo kan Bootstrap ka navigatiɔn yɔrɔw la minnu bɛ a kɔnɔ.

Base nav

Navigation min bɛ sɔrɔ Bootstrap kɔnɔ, o bɛ taamasiyɛn caman ni cogoyaw tila ɲɔgɔn na, k’a ta basigi .navkalasi la ka se active ani disabled states ma. Swap modifier classes ka ɲɔgɔn falen-falen cogoya kelen-kelen bɛɛ cɛ.

Basi .navyɔrɔ in bɛ jɔ ni flexbox ye ani ka jusigilan barikama di ka ɲɛsin navigatiɔn yɔrɔ suguya bɛɛ jɔli ma. A bɛ cogoya dɔw 'kɔnɔ (ka baara Kɛ ni lisiw ye), 'jyɛn-yɔrɔ dɔw bɛ yen minnu bɛ Kɛ 'yɔrɔbaw la minnu bɛ 'sèn Bɔ, ani 'sènfɛ-sɛbɛnni basigilenw.

Basi .navyɔrɔ in tɛ .activejamana si la. Misali nataw bɛ kalansen in na, kɛrɛnkɛrɛnnenya la walasa k’a jira ko nin kalan kɛrɛnkɛrɛnnen in tɛ cogoya kɛrɛnkɛrɛnnen si daminɛ. 
<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>

Kalanso bɛ baara kɛ ni a bɛɛ ye, o la i ka markup bɛ se ka kɛ super flexible ye. Baara kɛ ni <ul>s ye i n’a fɔ a fɔra cogo min na sanfɛ, <ol>ni aw ka fɛnw sigicogo nafa ka bon, walima aw bɛ aw yɛrɛ ta wuli ni <nav>fɛn dɔ ye. Sabula .navbaarakɛcogo display: flex, nav jɛgɛnw bɛ taamacogo kelen na i n’a fɔ nav fɛnw bɛna kɛ cogo min na, nka ni taamasiyɛn wɛrɛ tɛ.

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

Styles minnu bɛ sɔrɔ

s component cogoya Changer .navni modifiers ani utilités ye. Aw bɛ a ɲagami ka a fara ɲɔgɔn kan ni aw mago bɛ a la, walima aw bɛ aw yɛrɛ ta jɔ.

Alignment horizontal (Jɛɲɔgɔnya tilennen).

aw ka nav ka alignment horizontal Changer ni flexbox utilités ye . Ka da a kan, navs bɛ kɛ kinin fɛ, nka i bɛ se k’u Changer nɔgɔya la ka kɛ cɛmancɛ walima kinin fɛ.

Cɛmancɛ la ni .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>

A kinin fɛ ni .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>

Jɔ̀len

Stack i ka navigation ni flex item direction caman cili ye ni .flex-columnutilité ye. Aw mago bɛ u la ka u dalajɛ viewport dɔw kan nka dɔw tɛ wa? Baara kɛ ni jaabiw ye (misali la, .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>

I n’a fɔ a bɛ Kɛ cogo min na tuma bɛɛ, navigatiɔn jɔlen bɛ Se ka Kɛ ni <ul>s tɛ, o fana.

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

Tablow

A bɛ nav basigilen ta ka bɔ san fɛ ka .nav-tabskalasi fara a kan walasa ka tabbed interface (dakun) dɔ Lawuli. baara kɛ n' u ye walasa ka tabali maraw dilan ni an ka tablo JavaScript plugin ye .

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

Furakisɛw

Aw bɛ o HTML kelen in ta, nka aw bɛ baara kɛ n’a .nav-pillsnɔ na:

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

Fa ani ka jo di a ma

Force your .nav's kɔnɔkow ka janya dafalen sɔrɔlen bonya kelen la modifier classes fila la. Walasa ka yɔrɔ sɔrɔlenw bɛɛ fa ka kɛɲɛ ni aw ka .nav-items ye, aw bɛ baara kɛ ni .nav-fill. A kɔlɔsi ko yɔrɔ tilennen bɛɛ minɛna, nka nav fɛn bɛɛ bonya tɛ kelen ye.

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

Ni i bɛ baara Kɛ ni <nav>-based navigation ye, i bɛ Se k'a Bɔ lafiya la .nav-itemi n'a fɔ dɔrɔn .nav-linkde wajibiyalen dòn styling <a>elements (fɔlifɛnw) la.

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

Walasa ka fɛnw sɔrɔ minnu bonya bɛ bɛn ɲɔgɔn ma, aw bɛ baara kɛ ni .nav-justified. Yɔrɔ tilennen bɛɛ bɛna Minɛ nav jɛgɛnsira fɛ, nka a tɛ i n’a fɔ .nav-fillsanfɛtaw, nav fɛn bɛɛ bɛna Kɛ bonya kelen ye.

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

A bɛ tali kɛ .nav-fillmisali la min bɛ baara kɛ ni <nav>-based navigation ye.

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

Baara kɛli ni flex utilities ye

Ni aw mago bɛ jaabi nav variations la, aw bɛ a lajɛ ka baara kɛ ni flexbox utilités ye . Hali n’a y’a sɔrɔ ko kumasenw ka ca, o nafalanw bɛ ladamuni caman di jaabi-ka-bɔ-yɔrɔw bɛɛ la. Misali min bɛ duguma, an ka nav bɛna Sìgi ɲɔgɔn kan kariyɔrɔ dɔgɔmannin kan, o kɔ fɛ a bɛ Labɛn ka Kɛɲɛ ni labɛncogo tilennen ye min bɛ bonya sɔrɔlen Fa k’a daminɛ kariyɔrɔ fitinin na.

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

Ka ɲɛsin sɔrɔli ma

N’i ​​bɛ baara Kɛ ni navs ye walasa ka navigatiɔn-yɔrɔ Di, i k’i jija ka a Fàra role="navigation"parent container kan min bɛ hakili sɔrɔ kosɛbɛ <ul>, walima ka <nav>fɛn dɔ siri navigatiɔn bɛɛ la. Aw kana jɔyɔrɔ in fara a <ul>yɛrɛ kan, bawo o bɛna a bali ka laseli kɛ ko a ye lisi yɛrɛ ye dɛmɛni fɛɛrɛw fɛ.

Aw k’a kɔlɔsi ko navigatɛriw, hali ni u labɛnna yecogo la i n’a fɔ tablo ni .nav-tabskalasi, u man kan ka di role="tablist", role="tab"walima ka role="tabpanel"fɛnw di. Ninnu bɛ bɛn dɔrɔn tablɛtiw ka ɲɔgɔndanw ma minnu bɛ wuli, i n’a fɔ a ɲɛfɔlen bɛ cogo min na ARIA sɛbɛnnikɛlanw ka gafe taabolow misali kɔnɔ . Aw ye JavaScript kɛcogo lajɛ tablo-interface dinamikiw kan nin yɔrɔ in na misali la.

Baara kɛ ni fɛnw ye minnu bɛ jigin

menu dɔw fara a kan ni HTML dɔ faralen ye ɲɔgɔn kan ani JavaScript plugin min bɛ jigin .

Tablo minnu bɛ ni fɛnw ye minnu bɛ jigin

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

Furakisɛw ni furakisɛw

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

JavaScript kɛcogo

Baara kɛ ni JavaScript plugin tab ye—aw k’a don a kelen-kelen na walima ka tɛmɛ bootstrap.jsdosiye lajɛlen fɛ—walasa ka an ka navigatiɔn tabw ni furakisɛw janya walasa ka sigida kɔnɔkow tablɛtiw dilan.

N'i bɛ an ka JavaScript jɔ ka bɔ source la, a bɛ wajibiyautil.js .

Dynamic tabbed interfaces, i n’a fɔ a ɲɛfɔlen don cogo min na ARIA Authoring Practices Guide tabs pattern kɔnɔ, olu bɛ role="tablist", role="tab", role="tabpanel", ani fɛn wɛrɛw de wajibiya aria-walasa k’u jɔcogo, u baarakɛcogo ani u cogoya lase dɛmɛni fɛɛrɛw baarakɛlaw ma (i n’a fɔ ɛkran kalanbagaw). O kɛcogo ɲuman na, an b’a ɲini aw fɛ aw ka baara kɛ ni <button>fɛnw ye tablow kama, bawo olu ye kɔrɔsilifɛnw ye minnu bɛ fɛn caman Changement dynamique daminɛ, sanni ka kɛ jɛgɛnw ye minnu bɛ taa ɲɛ walima yɔrɔ kura la.

A kɔlɔsi ko tab JavaScript plugin tɛ tab-interfaces dɛmɛ minnu bɛ ni dropdown menus ye, bawo o bɛ na ni baarakɛcogo ni sɔrɔli gɛlɛyaw ye. Baarakɛcogo siratigɛ la, ni tab min bɛ jira sisan, o ka trigger element tɛ Ye joona (i n’a fɔ a bɛ 'fɛn min bɛ 'kɔnɔna na min dagalen dòn) o bɛ Se ka hakilijagabɔ Kɛ. Ka bɔ sɔrɔli siratigɛ la, sisan, fɛɛrɛ hakilitigi si tɛ yen min bɛ se ka nin jɔli sugu in kariti kɛ ka kɛɲɛ ni WAI ARIA misali sariyalen ye, o kɔrɔ ye ko a tɛ se ka kɛ fɛn ye min bɛ se ka faamuya nɔgɔya la dɛmɛnfɛɛrɛw baarakɛlaw fɛ.

Yɔrɔw kɔnɔkow ka ɲɛsin tablo panneau ma. Nin kelen in bɛ tali kɛ so tab la. A bɛ taa ni i ye kilomɛtɛrɛ caman sanfɛ, sanfɛ ten, 'sababu a ye o nisɔndiya kelen in sɔrɔ diɲɛ kɔnɔ. Dunan dɔ bɛ n ka dilan kan, gosili bɛ n kun na. Oh, ayi. Ɲɛnamaya wɛrɛ la ne tun bɛna i bila ka to yen. 'Cause ne, ne bɛ se fɛn o fɛn na. Suiting up for ne ka masafugulan kɛlɛ. A tun bɛ to ka i bangebagaw ka dɔlɔ sonya ka wuli ka taa so sanfɛ. Tone, tan fit ani labɛn, turn it up sababu a gettin' heavy. A ka kanuya bɛ i ko dɔrɔgu. N hakili la, n ɲinɛna ko sugandili bɛ n bolo.

Yɔrɔw kɔnɔkow ka ɲɛsin tablo panneau ma. Nin kelen in bɛ tali kɛ profil tab la. I ye architecture ɲuman sɔrɔ. Pasipɔri timbrew, a ye cosmopolite ye. Fine, fresh, fierce, an y’a sɔrɔ lock kan. Never planned ko don dɔ n bɛna bɔnɛ i la. A bɛ i dusukun dun ka bɔ kɛnɛ kan. I ka susuli ye cosmique ye, move bɛɛ ye magique ye. N b'a Fɔ minnu ye, n b'a Fɔ i n'a fɔ ale de ye kelen ye. Foli bɛ kanubagaw ye an ka taama dɔ kɛ. Su in yɛrɛ ta dɔrɔn i n'a fɔ zuluyekalo tile 4! Nka a ka fisa i ma ka tiɲɛni kɛ.

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>

Walasa ka dɛmɛ don ka bɛn i magow ma, o bɛ baara kɛ ni <ul>-based markup ye, i n’a fɔ a jiralen bɛ cogo min na sanfɛ, walima ni “roll your own” taamasiyɛn suguya o suguya ye. A kɔlɔsi ko n’i bɛ baara Kɛ ni <nav>, i man kan ka dɔ Fàra a kan role="tablist"k’a ɲɛsin a ma, bari o bɛna fɛn in jɔyɔrɔ fɔlɔ Bɔ a la i n’a fɔ navigatiɔn taamaʃyɛn. O nɔ na, ​​aw bɛ wuli ka taa fɛn wɛrɛ la (misali la min bɛ duguma, a nɔgɔn <div>) ka a <nav>lamini.

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

Tabs plugin fana bɛ baara kɛ ni furakisɛw ye.

Yɔrɔw kɔnɔkow ka ɲɛsin tablo panneau ma. Nin kelen in bɛ tali kɛ so tab la. A bɛ taa ni i ye kilomɛtɛrɛ caman sanfɛ, sanfɛ ten, 'sababu a ye o nisɔndiya kelen in sɔrɔ diɲɛ kɔnɔ. Dunan dɔ bɛ n ka dilan kan, gosili bɛ n kun na. Oh, ayi. Ɲɛnamaya wɛrɛ la ne tun bɛna i bila ka to yen. 'Cause ne, ne bɛ se fɛn o fɛn na. Suiting up for ne ka masafugulan kɛlɛ. A tun bɛ to ka i bangebagaw ka dɔlɔ sonya ka wuli ka taa so sanfɛ. Tone, tan fit ani labɛn, turn it up sababu a gettin' heavy. A ka kanuya bɛ i ko dɔrɔgu. N hakili la, n ɲinɛna ko sugandili bɛ n bolo.

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.

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

Ani ni furakisɛ jɔlenw ye.

Yɔrɔw kɔnɔkow ka ɲɛsin tablo panneau ma. Nin kelen in bɛ tali kɛ so tab la. A ye i ye dugu cɛmancɛ la ka Blues dɔnkili da. Aw ye aw kɔlɔsi aw bɛ jibolisira lamini. Mun na i t'a to ne ka n jɔ yen? Kunkolo min bɛ masafugulan don, o ka gɛlɛn. Ɔwɔ, an bɛ mɛlɛkɛw kasi, sanji bɛ na dugukolo kan ka bɔ san fɛ. Wanna ye show in 3D la, filimu dɔ. Yala aw bɛ deli ka a ye, aw bɛ a ye ko papier fin. O ye ɔwɔ walima ayi, ayi laala.

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>

Baara kɛ ni data attributes ye

I bɛ se ka tab walima pill navigation dɔ baara k’a sɔrɔ i ma JavaScript si sɛbɛn ni i ye element dɔ jira dɔrɔn data-toggle="tab"walima a kan. data-toggle="pill"Baara kɛ ni nin kunnafonidilanw ye .nav-tabswalima .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>

JavaScript fɛ

Tabable tabw daminɛ JavaScript fɛ (tab kelen-kelen bɛɛ ka kan ka baara kɛ kelen-kelen):

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

Aw bɛ se ka tablo kelen-kelen bɛɛ baara cogo caman na:

$('#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

Fade nɔ ye

Walisa ka tablow ka fade in kɛ, i ka dɔ fara .fadeu kelen-kelen bɛɛ .tab-panekan . Tablo fɔlɔ fana ka kan .showka kɛ sababu ye ka kɔnɔko fɔlɔw kɛ fɛn yetaw ye.

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

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

$().tab ye

A bɛ tab element ni kɔnɔkow minɛn dɔ baara. Tab ka kan ka kɛ ni a ye data-targetwalima ni a bɛ baara kɛ ni jɛgɛnsira ye, fɛn dɔ hrefmin bɛ minɛn node dɔ laɲini DOM kɔnɔ.

<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(' jira')

A bɛ tab dilen sugandi ani k’a ni ɲɔgɔn cɛ panne jira. Tab wɛrɛ o wɛrɛ min tun sugandira ka tɛmɛ, o bɛ kɛ sugandibali ye ani a ni a ni ɲɔgɔn cɛ panneau bɛ dogo. A bɛ segin welebaga ma sani tab pane ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.tabin ka kɛ).

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

.tab('ka fili')

A bɛ element dɔ ka tab tiɲɛ.

Ko minnu kɛra

Ni tab kura jira, ko kɛlenw bɛ tasuma don nin cogo la:

  1. hide.bs.tab(tab min bɛ baara la sisan)
  2. show.bs.tab(tabu min bɛna jira, o kan)
  3. hidden.bs.tab(tab active tɛmɛnen kan, o ni hide.bs.tabko kɛlen ta ye kelen ye)
  4. shown.bs.tab(tab min jirala sisan, o min bɛ baara kura kɛ, o ni show.bs.tabko kɛlen ta ye kelen ye)

Ni tab si tun tɛ baara la kaban, o tuma na hide.bs.tabani hidden.bs.tabko kɛlenw tɛna ci.

Ko kɛlen suguya Cogojirali
jira.bs.tab la Nin ko in bɛ tasuma don tab jirali la, nka sanni tab kura ka jira. Baara kɛ event.targetni ani event.relatedTargetye walasa ka tablo active ani tab active tɛmɛnen (ni o bɛ sɔrɔ) laɲini.
jiralen.bs.tab ye Nin ko in bɛ tasuma don tab jirali la tab jiralen kɔfɛ. Baara kɛ event.targetni ani event.relatedTargetye walasa ka tablo active ani tab active tɛmɛnen (ni o bɛ sɔrɔ) laɲini.
dogo.bs.tab ye O ko in bɛ tasuma Bɔ ni tablo kura dɔ ka kan ka jira (wa o cogo la tab baarakɛta tɛmɛnen ka kan ka dogo). Baara kɛ event.targetni ani event.relatedTargetye walasa ka tab min bɛ baara la sisan ani tab kura min bɛna kɛ sɔɔni, o laɲini, o cogo kelen na.
dogolen.bs.tab ye O ko in bɛ tasuma Bɔ tab kura jiralen kɔ (wa o cogo la tab baarakɛta tɛmɛnen bɛ dogo). Baara kɛ event.targetni ani event.relatedTargetye walasa ka tab baarakɛta tɛmɛnen ni tab baarakɛta kura laɲini, o cogo kelen na. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})