Source

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" href="#">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ɔ sanfɛ, walima ka i yɛrɛ ta wuli ni say a <nav>element 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" href="#">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" href="#">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" href="#">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" href="#">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" href="#">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" href="#">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" href="#">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="#">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="#">Disabled</a>
  </li>
</ul>

Ni aw bɛ baara kɛ ni <nav>-based navigation ye, aw ye aw jija ka a don .nav-itemankɔriw kan.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">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.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

I n’a fɔ .nav-fillmisali min bɛ baara kɛ ni <nav>-based navigation ye, aw ye aw jija ka a don .nav-itemankɔriw kan.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">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="#">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="#">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. Olu 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 WAI ARIA sɛbɛnnikɛcogo 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-haspopup="true" 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" href="#">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-haspopup="true" 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" href="#">Disabled</a>
  </li>
</ul>

JavaScript kɛcogo

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

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 bɛ cogo min na WAI ARIA Authoring Practices 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ɛ fɛɛrɛw baarakɛlaw ma (i n’a fɔ ɛkran kalanbagaw).

A kɔlɔsi ko dynamic tabbed interfaces man kan ka kɛ 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ɛ.

Raw denim i bɛ se ka u ma mɛn u jean shorts Austin. Nesciunt tofu stumptown aliqua, retro sinteti master saniya. Moustache cliche tempor, williamsburg carles ka helvetica sogo-minɛ. Reprehenderit butcher retro keffiyeh sugo minɛbaga synth. Cosby sweater eu banh mi, qui irure terry richardson ex calmar. Bamako, Mali. Aliquip placeat ka baara kɛ ni iphone ye. Seitan aliquip quis cardigan ameriki fini, sogo feerela voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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.

O kɔsɔn occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nugu ka farikoloɲɛnajɛ kɛcogo proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sigi cupidat la veniam ad. Eiusmod consequat eu adipisicing minim ani aliquip cupidatat culpa excepteur quis. Occaecat sigi eu farikoloɲɛnajɛ irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua ani Lorem sint. Veniam sint duis incididunt do esse magna mollit ka bɔ laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor bɛ occaecat commodo ni voluptate minim reprehenderit mollit pariatur kɔnɔ. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</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>

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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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 hreftargeting a container node ye DOM kɔnɔ.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').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. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})