Source

Navs

Nuŋlɔɖiwo kple kpɔɖeŋuwo na alesi woazã Bootstrap ƒe mɔfiame ƒe akpa siwo le eme.

Base nav

Navigation si li le Bootstrap me ma dzesi kple atsyãwo le xexeame katã, tso gɔmeɖoanyi .navƒe klass dzi va ɖo nɔnɔme siwo le dɔ wɔm kple esiwo me nuwɔametɔ le dzi. Trɔ asi le tɔtrɔ ƒe hatsotsowo ŋu be nàtrɔ ɖe atsyã ɖesiaɖe dome.

Wotu gɔmeɖoanyi .navƒe akpaa kple flexbox eye wònaa gɔmeɖoanyi sesẽ aɖe na mɔfiame ƒe akpa ƒomevi ɖesiaɖe tutu. Elɔ atsyã ƒe tɔtrɔ aɖewo ɖe eme (hena dɔwɔwɔ kple xexlẽdzesiwo), kadodo ƒe padding aɖewo na teƒe siwo lolo wu siwo woƒo, kple atsyã vevi siwo wowɔ le nuwɔametɔwo ŋu.

Gɔmeɖoanyi .navƒe akpaa melɔ .activenɔnɔme aɖeke ɖe eme o. Kpɔɖeŋu siwo gbɔna la lɔ klass la ɖe eme, vevietɔ be woaɖee afia be klass sia koŋ meʋãa atsyã tɔxɛ aɖeke o.

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

Wozãa klasswo katã, eyata wò markup ate ŋu anye super flexible. Zã <ul>s abe etame ene, alo ƒo tɔwò kple gblɔ <nav>element aɖe. Elabena the .navuses display: flex, nav kadodoawo wɔa nu abe alesi nav nuawo awɔ nui ene, gake dzesidede kpeɖeŋutɔa manɔmee.

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

Atsyã siwo li

Trɔ .navs component ƒe atsyã kple modifiers kple utilities. Tsɔe tsaka eye nàtsɔe asɔ kple wo nɔewo ne ehiã, alo nàtu tɔwò.

Nusiwo woɖo ɖe ɖoɖo nu le tsia dzi

Trɔ wò nav ƒe ɖoɖo si le tsia dzi kple flexbox dɔwɔnuwo . Le gɔmedzedzea me la, navs le miame, gake àteŋu atrɔ wo bɔbɔe be woaɖo titina alo ɖusime.

Le titina kple .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>

Woɖoe ɖe ɖusime kple .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>

Tsi tsitre

Stack wò navigation to asitɔtrɔ le flex item ƒe mɔfiame kple .flex-columnutility la me. Ðe wòhiã be nàƒo wo nu ƒu ɖe nukpɔkpɔmɔ̃ aɖewo dzi gake menye ɖe bubuwo dzi oa? Zã gɔmeɖeɖe siwo ɖoa nya ŋu (le kpɔɖeŋu me, .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>

Abe alesi wònɔna ɖaa ene la, mɔzɔzɔ le tsitrenu ate ŋu adzɔ <ul>s manɔmee, hã.

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

Tabwo ƒe ƒuƒoƒo

Exɔa nav vevi la tso dziƒo eye wòtsɔa .nav-tabsklass la kpena ɖe eŋu be wòawɔ tabbed interface. Zã wo nàtsɔ awɔ tabbable nutowo kple míaƒe 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" href="#">Disabled</a>
  </li>
</ul>

Atikekuiwo

Tsɔ HTML ma ke, gake zãe .nav-pillsboŋ:

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

Kpe ɖo eye nàɖo kpe edzi

Zi wò .nav's emenyawo dzi be woakeke kekeme bliboa si li la ɖe enu le tɔtrɔɖenu ƒe hatsotso eve dometɔ ɖeka me. .nav-itemBe nàtsɔ wò s ayɔ teƒe siwo katã li la ɖe ɖoɖo nu la, zã .nav-fill. De dzesii be woxɔ teƒe siwo katã le tsia dzi, gake menye nav nu ɖesiaɖe ƒe kekeme sɔ o.

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

Ne èle <nav>mɔfiame si wotu ɖe -dzi zãm la, kpɔ egbɔ be yede .nav-itemsekeawo me.

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

Ne èdi nusiwo ƒe kekeme sɔ la, zã .nav-justified. Nav kadodowo axɔ teƒe siwo katã le tsia dzi, gake to vovo na esiwo le .nav-filletame la, nav nu ɖesiaɖe ƒe kekeme anɔ ɖeka.

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

Abe alesi wòle le .nav-fillkpɔɖeŋu si zã <nav>-si wotu ɖe mɔfiame dzi ene la, kpɔ egbɔ be yede eme .nav-itemɖe sekeawo dzi.

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

Dɔwɔwɔ kple flex utilities

Ne èhiã nav tɔtrɔ siwo ɖoa nya ŋu la, bu flexbox dɔwɔnu siwo kplɔ wo nɔewo ɖo zazã ŋu . Togbɔ be nyagbɔgblɔ geɖe wu hã la, dɔwɔnu siawo naa asitɔtrɔ geɖe wu le breakpoints siwo ɖoa nya ŋu me. Le kpɔɖeŋu si le ete me la, míaƒe nav la aƒo ƒu ɖe gbagbãƒe si bɔbɔ wu dzi, emegbe woatrɔ ɖe ɖoɖo si le tsia dzi si ayɔ kekeme si li la me adze egɔme tso gbagbãƒe sue la dzi.

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

Ku ɖe alesi woate ŋu aɖoe ŋu

Ne èle navs zãm tsɔ le mɔfiame ƒe ʋuƒo nam la, kpɔ egbɔ be yetsɔ a kpe role="navigation"ɖe dzila ƒe nugoe si me susu le wu ŋu le <ul>, alo nàxatsa nu <nav>aɖe ɖe mɔfiame bliboa ŋu. Mègatsɔ akpaa akpe ɖe <ul>eya ŋutɔ ŋu o, elabena esia axe mɔ na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu be woaɖe gbeƒãe be enye xexlẽdzesi ŋutɔŋutɔ o.

De dzesii be mele be woana mɔfiamewo, ne wowɔ wo le nukpɔkpɔ me abe tabwo kple .nav-tabsklass la ene gɔ̃ hã la , , alo nɔnɔmewo o. Esiawo sɔ na dynamic tabbed interfaces ko, abe alesi woɖe eme le WAI ARIA Authoring Practices me ene. Kpɔ JavaScript ƒe nuwɔna na dynamic tabbed interfaces le akpa sia me hena kpɔɖeŋu.role="tablist"role="tab"role="tabpanel"

Nusiwo wotsɔna ƒua gbe zazã

Tsɔ nu siwo le tsia dzi kple HTML vi aɖe kpee kple JavaScript ƒe kpeɖeŋutɔ siwo le tsia dzi la kpe ɖe eŋu .

Tab siwo dzi woŋlɔ nu ɖo

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

Atikekui siwo me wotsɔa atikekuiwo ƒua gbe ɖo

<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 ƒe nuwɔna

Zã tab JavaScript plugin—de eme ɖekaɖeka alo to bootstrap.jsfaɛl si woƒo ƒu la dzi—be nàkeke míaƒe mɔfiamewo ƒe tabwo kple atikekuiwo ɖe enu be nàwɔ teƒea me nyatakakawo ƒe akpa siwo woate ŋu atsɔ awɔ tabba, to menu siwo le tsia dzi gɔ̃ hã dzi.

Ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia beutil.js .

Dynamic tabbed interfaces, abe alesi woɖe eme le WAI ARIA Authoring Practices me ene la, bia role="tablist", role="tab", role="tabpanel", kple aria-nɔnɔme bubuwo be woatsɔ agblɔ woƒe wɔwɔme, dɔwɔwɔ kple nɔnɔme si li fifia na kpekpeɖeŋu mɔ̃ɖaŋunuwo (abe screen readers ene) zãlawo.

De dzesii be mele be dynamic tabbed interfaces nakpɔ dropdown menus o, elabena esia hea zazã kple mɔɖeɖe siaa ƒe kuxiwo vɛ . Le zazã ƒe nukpɔsusu nu la, nyateƒe si wònye be tab si woɖe fia fifia ƒe trigger element medzena enumake o (abe alesi wòle le dropdown menu si wotu la me ene) ateŋu ahe tɔtɔ vɛ. Le mɔnukpɔkpɔ ƒe nukpɔsusu nu la, mɔ si me susu le aɖeke meli fifia si dzi woato awɔ xɔtuɖoɖo sia ƒomevi ƒe nɔnɔmetata ɖe WAI ARIA ƒe ɖoɖo si sɔ nu o, si fia be womate ŋu ana kpekpeɖeŋu mɔ̃ɖaŋunuwo zazãlawo nase egɔme bɔbɔe o.

Raw denim ɖewohĩ mèse wo ŋkɔ kpɔ o jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth aƒetɔ kɔklɔ. Aɖatsiwo ƒe nyagbɔgblɔ ɣeyiɣi kpui aɖe, williamsburg carles vegan helvetica. Reprehenderit lãwula retro keffiyeh drɔ̃ekukula synth. Cosby ƒe awudziwui eu banh mi, qui irure terry richardson ex squid. Aliquip placeat lãwo ƒe lãmesẽfefewɔlawo ƒe iphone. Seitan aliquip quis cardigan amerikatɔwo ƒe awudodo, lãwula 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>

Be wòakpe ɖe ŋuwò wòasɔ ɖe wò hiahiãwo nu la, esia wɔa dɔ kple dzesi si wotu ɖe <ul>-dzi, abe alesi woɖee fia le etame ene, alo kple dzesi ɖesiaɖe si nèdi be yeaƒo “ƒo wò ŋutɔ wò” nu. De dzesii be ne èle , zãm <nav>la, mele be nàtsɔe akpe ɖe eŋu role="tablist"tẽ o, elabena esia agblẽ nu le element la ƒe akpa si wòwɔna ŋutɔŋutɔ abe mɔzɔzɔ ƒe dzesi ene ŋu. Ke boŋ trɔ ɖe nu bubu aɖe ŋu (le kpɔɖeŋu si le ete me la, bɔbɔe aɖe <div>) eye nàxatsa ɖe <nav>eŋu.

<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 la hã wɔa dɔ kple atikekuiwo.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure nudzɔdzɔwo ƒe ɣeyiɣi si me wowɔa dɔ le. Fugiat velit proident aliquip nisi incididunt ŋɔti ƒe kamedede proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud bɔbɔ nɔ anyi cupidat le veniam ad. Eiusmod consequat eu adipisicing minim lã ƒomevi aɖe si nye cupidatat culpa excepteur quis. Occaecat nɔ anyi eu kamedede 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>

Eye kple atikekui siwo le tsitrenu.

Cillum ad ut irure ɣeyiɣi kpui aɖe ƒe velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit negbe laborum qui. Id id reprehenderit nɔ anyi ɖe eu aliqua occaecat quis kple velit negbe laborum mollit dolore eiusmod. Ipsum dolor le occaecat commodo kple voluptate nu suetɔ kekeake si nye reprehenderit mollit pariatur me. Deserunt non laborum enim kple cillum eu deserunt negbe nusi dzɔna le lãme na ame suetɔ kekeake 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="row">
  <div class="col-3">
    <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>
  <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>

Nyatakaka ƒe nɔnɔmewo zazã

Àte ŋu awɔ tab alo pill navigation ŋudɔ JavaScript aɖeke maŋlɔ to element aɖe gbɔgblɔ data-toggle="tab"alo ɖe edzi ko me. data-toggle="pill"Zã nyatakaka ƒe nɔnɔme siawo le .nav-tabsalo .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>

To JavaScript dzi

Na tabbable tabs nawɔ dɔ to JavaScript dzi (ele be woawɔ tab ɖesiaɖe ŋudɔ ɖekaɖeka):

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

Àte ŋu awɔ tab ɖekaɖekawo ŋudɔ le mɔ vovovowo nu:

$('#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 ƒe ŋusẽkpɔɖeamedzi

Be nàna tabwo naɖiɖi la, tsɔe kpe .fadeɖe wo dometɔ ɖesiaɖe .tab-paneŋu . Ele be tab ƒe akpa gbãtɔ hã .shownana nya siwo le gɔmedzedzea me la nadze.

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

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

Kpɔ míaƒe JavaScript nuŋlɔɖiwo hena nyatakaka bubuwo.

$().tab ƒe ƒuƒoƒo

Ewɔa tab element kple emenyawo ƒe nugoe ŋudɔ. Ele be tab nanye a data-targetalo hreftaɖodzinu si nye container node le DOM la me.

<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('ɖee fia')

Tia tab si wona eye wòaɖe eƒe akpa si do ƒome kplii afia. Tab bubu ɖesiaɖe si wotia va yi la va zua esi wometia o eye eƒe akpa si do ƒome kplii la ɣlana. Trɔ yi yɔla gbɔ hafi woɖe tab ƒe akpaa fia ŋutɔŋutɔ (si nye hafi shown.bs.tabnudzɔdzɔa nadzɔ).

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

.tab('tsɔe ƒu gbe')

Egblẽa nu le element aɖe ƒe tab ŋu.

Nudzɔdzɔwo

Ne èle tab yeye aɖe ɖem fia la, nudzɔdzɔawo dzona le ɖoɖo si gbɔna nu:

  1. hide.bs.tab(le tab si le dɔ wɔm fifia dzi)
  2. show.bs.tab(le tab si woaɖe afia la dzi)
  3. hidden.bs.tab(le tab si le dɔ wɔm va yi dzi la, esi le hide.bs.tabnudzɔdzɔa gome la ke)
  4. shown.bs.tab(le tab si woɖe fia teti koe nye ema si le dɔ wɔm yeyee la dzi la, esi sɔ kple esi wowɔ na show.bs.tabwɔnaa tɔ)

Ne tab aɖeke menɔ dɔ wɔm xoxo o la, ekema womaɖe asi le hide.bs.tabkple nudzɔdzɔawo ŋu o.hidden.bs.tab

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
ɖee fia.bs.tab Nudzɔdzɔ sia dzona le tab show dzi, gake hafi woaɖe tab yeyea afia. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
woɖe fia.bs.tab Nudzɔdzɔ sia dzona le tab ɖeɖefia me ne woɖe tab aɖe fia vɔ. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
ɣla.bs.tab la Nudzɔdzɔ sia doa dzo ne woaɖe tab yeye aɖe afia (eye to esia me la, woaɣla tab si le dɔ wɔm va yi). Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm fifia kple tab yeye si awɔ dɔ kpuie la, ɖe wo nɔewo yome.
ɣaɣla.bs.tab Nudzɔdzɔ sia dzona ne woɖe tab yeye aɖe fia vɔ (eye to esia me la, woɣla tab si le dɔ wɔm va yi). Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm va yi kple tab yeye si le dɔ wɔm la, ɖe wo nɔewo yome. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})