Source

Navs

Matsalwa na swikombiso swa ndlela yo tirhisa swiphemu swa ku famba-famba leswi katsekaka swa Bootstrap.

Xiseketelo xa nav

Ku fambafamba loku kumekaka eka Bootstrap ku avelana ku fungha hi ku angarhela na switayele, ku suka eka .navtlilasi ya le hansi ku ya eka swiyimo leswi tirhaka na leswi nga tirhiki. Cincana titlilasi ta mucinci ku cinca exikarhi ka xitayili xin’wana na xin’wana.

Xiphemu xa le hansi .navxi akiwile hi flexbox naswona xi nyika masungulo yo tiya yo aka tinxaka hinkwato ta swiphemu swa ku famba-famba. Yi katsa ku tlula swin’wana swa switayele (ku tirha na minxaxamelo), ku hlanganisiwa kun’wana ka swihlanganisi swa tindhawu letikulu leti hlaseriweke, na switayele swa xisekelo leswi nga tirhiki.

Xiphemu xa le hansi .nava xi katsi .activexiyimo xihi na xihi. Swikombiso leswi landzelaka swi katsa tlilasi, ngopfungopfu ku kombisa leswaku tlilasi leyi yo karhi a yi pfuxi ku endliwa ka xitayili xo hlawuleka.

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

Titlilasi ti tirhisiwa hinkwako, kutani markup ya wena yi nga va super flexible. Tirhisa <ul>s ku fana na laha henhla, kutani u roll ya wena hi say <nav>element. Hikuva .navmatirhiselo display: flex, swihlanganisi swa nav swi tikhoma ku fana ni leswi swilo swa nav a swi ta tikhoma ha swona, kambe handle ka ku fungha loku engetelekeke.

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

Switayili leswi kumekaka

Cinca xitayili xa .navxiphemu xa s hi swihundzuluxi na switirhisiwa. Hlanganisa u tlhela u hlanganisa hilaha swi lavekaka hakona, kutani u aka ya wena.

Ku ringanisa loku nga etlhelo

Cinca ku ringanana ka horizontal ka nav ya wena hi switirhisiwa swa flexbox . Hi ku tiyimisela, ti- nav ti ringanisiwa hi tlhelo ra ximatsi, kambe u nga ti cinca hi ku olova ti va leti ringanisiweke exikarhi kumbe exineneni.

Ku hlanganisiwa na .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>

Ku ringanisiwa hi xinene na .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>

Ololoka

Stack navigation ya wena hi ku cinca flex item direction na .flex-columnutility. Xana u lava ku ti stack eka ti viewport tin’wana kambe ku nga ri tin’wana? Tirhisa tivhidiyo leti hlamulaka (xikombiso, .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>

Tanihi minkarhi hinkwayo, ku famba-famba loku yimisiweke ka koteka handle ka <ul>s, na kona.

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

Tithebhu

Yi teka nav ya xisekelo ku suka ehenhla yi engetela .nav-tabstlilasi ku tumbuluxa interface ya tabbed. Ti tirhise ku endla swifundzha swa tithebhu hi plugin ya hina ya JavaScript ya thebhu .

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

Tiphilisi

Teka HTML yoleyo leyi fanaka, kambe tirhisa .nav-pillsematshan’weni ya sweswo:

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

Tata u tlhela u lulamisa

Sindzisa swilo swa wena swa .nav's ku andlala ku anama loku heleleke loku kumekaka yin'wana ya titlilasi timbirhi ta swicinci. Ku tata hi ku ringana ndhawu hinkwayo leyi nga kona hi .nav-items ya wena, tirhisa .nav-fill. Xiya leswaku ndhawu hinkwayo leyi nga etlhelo yi tekiwa, kambe a hi nchumu wun’wana ni wun’wana wa nav lowu nga ni ku anama loku fanaka.

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

Loko u tirhisa ku <nav>famba-famba loku sekeriweke eka -, tiyiseka leswaku u katsa .nav-itemeka ti- anchor.

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

Eka swiaki swa ku anama loku ringanaka, tirhisa .nav-justified. Ndhawu hinkwayo ya horizontal yi ta tekiwa hi swihlanganisi swa nav, kambe ku hambana na leswi .nav-fillnga laha henhla, nchumu wun’wana na wun’wana wa nav wu ta va na ku anama loku fanaka.

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

Ku fana na .nav-fillxikombiso lexi tirhisaka <nav>-based navigation, tiyisisa leswaku u katsa .nav-itemeka ti anchor.

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

Ku tirha na switirhisiwa swa flex

Loko u lava ku cinca-cinca ka nav loku hlamulaka, anakanya hi ku tirhisa nxaxamelo wa switirhisiwa swa flexbox . Hambi leswi swi nga na marito yo tala, switirhisiwa leswi swi nyika ku cinca lokukulu eka tindhawu to wisa leti hlamulaka. Eka xikombiso lexi nga laha hansi, nav ya hina yi ta hlanganisiwa eka breakpoint ya le hansi swinene, kutani yi pfumelelana na layout ya horizontal leyi tataka ku anama loku nga kona ku sukela eka breakpoint leyitsongo.

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

Malunghana na ku fikelela

Loko u tirhisa navs ku nyika barhi ya ku famba-famba, tiyisisa leswaku u engetela a role="navigation"eka xikhomela-ndhawu xa mutswari lexi twisisekaka swinene xa <ul>, kutani u phutsela <nav>elemente ku rhendzela ku famba-famba hinkwako. U nga engeteli xiphemu eka xona <ul>hi xoxe, tanihileswi leswi swi nga ta sivela ku tivisiwa tanihi nxaxamelo wa xiviri hi thekinoloji yo pfuneta.

Xiya leswaku tibara to famba-famba, hambiloko ti endliwe hi ndlela leyi vonakaka tanihi tithebhu leti nga ni .nav-tabstlilasi, a ti fanelanga ti nyikiwa role="tablist", role="tab"kumbe role="tabpanel"swihlawulekisi. Leswi swi faneleka ntsena eka swihlanganisi swa tithebhu leswi cinca-cincaka, tanihilaha swi hlamuseriweke hakona eka Maendlelo ya Vutsari ya WAI ARIA . Vona mahanyelo ya JavaScript ya swihlanganisi swa tithebhu leswi cinca-cincaka eka xiyenge lexi ku kuma xikombiso.

Ku tirhisa swilo leswi nga ehansi

Engetela timenyu leti nga ehansi hi HTML leyi engetelekekenyana ni xiengetelo xa JavaScript lexi nga ehansi .

Tithebhu leti nga ni swilo leswi nga ehansi

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

Tiphilisi leti nga ni swilo leswi nga ehansi

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

Mahanyelo ya JavaScript

Tirhisa thebhu ya JavaScript plugin—yi katsa hi yoxe kumbe hi ku tirhisa bootstrap.jsfayili leyi hlengeletiweke—ku ndlandlamuxa tithebhu ta hina to famba-famba ni tiphilisi leswaku u endla tipheji leti nga ni tithebhu ta swilo swa laha kaya, hambi ku ri hi ku tirhisa timenyu leti nga ehansi.

Loko u aka JavaScript ya hina ku suka eka xihlovo, swi lavautil.js .

Swihlanganisi swa tithebhu leswi cinca-cincaka, tanihilaha swi hlamuseriweke hakona eka Maendlelo ya Vutsari ya WAI ARIA , swi lava role="tablist", role="tab", role="tabpanel", na swihlawulekisi swo engetela aria-leswaku swi ta hundzisela xivumbeko xa swona, ntirho na xiyimo xa sweswi eka vatirhisi va thekinoloji yo pfuneta (ku fana na swihlaya swa xikirini).

Xiya leswaku swihlanganisi swa tithebhu leswi cinca-cincaka a swi fanelanga ku va na timenyu leti nga ehansi, tanihileswi leswi swi vangaka swiphiqo swa ku tirhiseka na ku fikelela. Hi ku ya hi langutelo ra ku tirhiseka, mhaka ya leswaku elemente ya trigger ya thebhu leyi kombisiweke sweswi a yi vonaki hi ku hatlisa (tanihi leswi yi nga endzeni ka menyu leyi pfalekeke leyi rhetaka) yi nga vanga ku pfilunganyeka. Ku suka eka langutelo ra ku fikelela, sweswi a ku na ndlela leyi twisisekaka yo mepa muxaka lowu wa ku akiwa eka xivumbeko xa WAI ARIA xa ntolovelo, leswi vulaka leswaku a wu nge endliwi leswaku wu twisiseka hi ku olova eka vatirhisi va thekinoloji yo pfuneta.

Raw denim kumbexana a wu se twa hi vona jean shorts Austin. Nesciunt tofu stumptown aliqua, ku basisiwa ka n’wini wa synth ya retro. Xikhovha xa malebvu xa nkarhinyana, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga. Xisuti xa cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga. Seitan aliquip quis cardigan swiambalo swa le Amerika, muxavisi wa nyama 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>

Ku pfuneta ku fambisana na swilaveko swa wena, leswi swi tirha hi <ul>-based markup, tanihilaha swi kombisiweke hakona laha henhla, kumbe hi ku tihlawulela kwihi na kwihi ka “roll your own” markup. Xiya leswaku loko u tirhisa <nav>, a wu fanelanga ku engetela role="tablist"hi ku kongoma eka yona, tanihileswi leswi swi nga ta tlula ntirho wa ntumbuluko wa elemente tanihi xikombiso xa ndhawu ya ku famba-famba. Ematshan’weni ya sweswo, cincela eka xiaki xin’wana (eka xikombiso lexi nga laha hansi, lexi olovaka <div>) ivi u phutsela lexi <nav>xi xi rhendzeleke.

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

Plugin ya ti tabs yi tlhela yi tirha na tiphilisi.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure xiendlakalo lexi nga riki xa xiviri lexi nga ni vutomi. Fugiat velit proident aliquip nisi incididunt ku endla vutiolori bya nostrud lebyi nga ni khombo. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud tshama cupidatat eka veniam xitiviso. Eiusmod consequat eu adipisicing xiharhi lexitsongo xa xiharhi lexi nga ni xivunguvungu lexi nga ni khombo handle ka quis. Occaecat tshama eu ku endla vutiolori 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>

Naswona hi tiphilisi leti yimisiweke.

Cillum ad ut irure nkarhinyana velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt yi endla esse magna mollit handle ka laborum qui. Id id reprehenderit tshama ehansi eu aliqua occaecat quis na velit handle ka laborum mollit dolore eiusmod. Ipsum dolor eka occaecat commodo na xitsongwatsongwana xa xitsongwatsongwana xa xitsonga. Deserunt non laborum enim et cillum eu xihlangi lexi nga riki xa xiendlakalo lexi nga ni khombo lexitsongo xa 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>

Ku tirhisa swihlawulekisi swa data

U nga tirhisa ku famba-famba ka thebhu kumbe philisi handle ko tsala JavaScript yihi na yihi hi ku boxa ntsena data-toggle="tab"kumbe data-toggle="pill"eka elemente. Tirhisa swihlawulekisi leswi swa datha eka .nav-tabskumbe .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>

Hi ku tirhisa JavaScript

Endla leswaku tithebhu ta tithebhu ti tirha hi ku tirhisa JavaScript (thebhu yin’wana ni yin’wana yi lava ku tirhisiwa hi yoxe):

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

U nga tirhisa tithebhu ha yin’we-yin’we hi tindlela to hlayanyana:

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

Ku endla leswaku tithebhu ti nyamalala, engetela .fadeeka yin’wana ni yin’wana .tab-pane. Phejini yo sungula ya thebhu yi fanele ku tlhela yi va na .showku endla leswaku nhundzu yo sungula yi vonaka.

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

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala.

$().thebhu ya kona

Ku tirhisa xiaki xa thebhu na xigwitsirisi xa nhundzu. Tab yi fanele ku va na a data-targetkumbe ku hrefkongomisa eka node ya xikhomela eka DOM.

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

Hlawula thebhu leyi nyikiweke ivi yi kombisa phejini ya yona leyi fambisanaka na yona. Thebhu yin’wana ni yin’wana leyi a yi hlawuriwile khale yi va leyi nga hlawuriwa naswona phejini ya yona leyi fambisanaka na yona ya tumbetiwa. Ku tlhelela eka mufoyini loko phejini ya thebhu yi nga si kombisiwa hakunene (i.e. shown.bs.tabxiendlakalo xi nga si humelela).

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

.tab('lahla') .

Ku herisa thebhu ya elemente.

Swiendlakalo

Loko u kombisa thebhu leyintshwa, swiendlakalo swi pfurha hi ku landzelelana loku landzelaka:

  1. hide.bs.tab(eka thebhu leyi tirhaka sweswi)
  2. show.bs.tab(eka thebhu leyi nga ta kombisiwa)
  3. hidden.bs.tab(eka thebhu leyi tirhaka leyi hundzeke, leyi fanaka ni ya hide.bs.tabxiendlakalo)
  4. shown.bs.tab(eka thebhu leyi tirhaka leyintshwa leyi kombisiweke ntsena, leyi fanaka ni ya show.bs.tabxiendlakalo)

Loko ku nga ri na thebhu leyi se a yi tirha, kutani hide.bs.tabswiendlakalo swa na hidden.bs.taba swi nge tirhisiwi.

Muxaka wa Xiendlakalo Nhlamuselo
kombisa.bs.tab Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu, kambe thebhu leyintshwa yi nga si kombisiwa. Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
ku kombisiwile.bs.tab Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu endzhaku ka loko thebhu yi kombisiwile. Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
fihla.bs.tab Xiendlakalo lexi xi pfurha loko ku fanele ku kombisiwa thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale yi fanele ku fihliwa). Tirhisa event.targetna event.relatedTargetku kongomisa thebhu ya sweswi leyi tirhaka na thebhu leyintshwa leyi nga ta tirha ku nga ri khale, hi ku landzelelana.
thebhu ya.bs. leyi fihliweke Xiendlakalo lexi xi pfurha endzhaku ka loko ku kombisiwile thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale yi fihliwile). Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka ya khale na thebhu leyintshwa leyi tirhaka, hi ku landzelelana. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})