in English

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 swihundzuluxi 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">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, <ol>loko ku landzelelana ka swilo swa wena swi ri swa nkoka, kutani u rhendzeleka na swa wena hi <nav>elemente. 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">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">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">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">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">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">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">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="#">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>

Loko u tirhisa ku <nav>famba-famba loku sekeriweke eka -, u nga tshika hi ku hlayiseka .nav-itemtanihi leswi .nav-linkku lavekaka ntsena eka <a>swiaki swa xitayili.

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

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.

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

Ku fana na .nav-fillxikombiso hi ku tirhisa ku <nav>famba-famba loku sekeriweke eka -.

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

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="#">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>

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 xivumbeko xa tithebhu ta ARIA Authoring Practices Guide . 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-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>

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

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.

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

Swihlanganisi swa tithebhu leswi cinca-cincaka, tanihilaha swi hlamuseriweke hakona eka xivumbeko xa tithebhu ta ARIA Authoring Practices Guide , swi lava role="tablist", role="tab", role="tabpanel", na swihlawulekisi swo engetela aria-leswaku ku ta hundziseriwa xivumbeko xa swona, ntirho na xiyimo xa sweswi eka vatirhisi va thekinoloji yo pfuneta (ku fana na swihlaya swa xikirini). Tanihi endlelo lerinene, hi ringanyeta ku tirhisa <button>swiaki swa tithebhu, tanihileswi leswi ku nga swilawuri leswi pfuxaka ku cinca loku cinca-cincaka, ku tlula swihlanganisi leswi famba-fambaka eka tluka lerintshwa kumbe ndhawu.

Xiya leswaku xiengetelo xa JavaScript xa thebhu a xi seketeli swihlanganisi swa thebhu leswi nga ni timenyu leti nga ehansi, tanihi leswi leswi swi vangaka swiphiqo swa ku tirhiseka ni 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 xivumbeko 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.

Nhundzu ya xikhomela-ndhawu xa phanele ya thebhu. Leyi yi fambelana na thebhu ya le kaya. Swi ku yisa tikhilomitara ehenhla, ehenhla swinene, hikuva u na n’wayitelo wolowo wun’we wa matiko ya misava. Ku na munhu loyi ndzi nga n'wi tiviki emubedweni wa mina, ku na ku ba ka nhloko ya mina. Oho, e-e. Evuton’wini byin’wana a ndzi ta ku endla u tshama. 'Cause mina, ndzi na vuswikoti bya xin'wana na xin'wana.' Ku faneleka nyimpi ya mina ya ku rhwexa harhi. U tolovele ku yiva byala bya vatswari va wena u khandziya ehenhla ka lwangu. Tone, tan fit and ready, yi hundzuluxela ehenhla cause its gettin' heavy. Rirhandzu ra yena ri fana ni xidzidzirisi. Ndzi ehleketa leswaku ndzi rivele leswaku ndzi ni ku hlawula.

Nhundzu ya xikhomela-ndhawu xa phanele ya thebhu. Leyi yi fambelana na thebhu ya profile. U kume vumaki lebyinene ngopfu. Switempe swa mapasi, u cosmopolitan. Fine, fresh, fierce, hi yi kumile eka xilotlelo. A ndzi si tshama ndzi kunguhata leswaku siku rin’wana ndzi ta va ndzi ku lahlekeriwa. U dya mbilu ya wena yi huma. Kiss ya wena i cosmic, ku famba kun'wana na kun'wana i masalamusi. Ndzi vula lava, ndzi vula onge hi yena loyi. Mi xeweta varhandziwa ahi tekeni riendzo. Ntsena n'wini wa vusiku ku fana na siku ra vumune ra July! Kambe u nga tsakela ku tlanga hi mali.

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>

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">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Plugin ya ti tabs yi tlhela yi tirha na tiphilisi.

Nhundzu ya xikhomela-ndhawu xa phanele ya thebhu. Leyi yi fambelana na thebhu ya le kaya. Swi ku yisa tikhilomitara ehenhla, ehenhla swinene, hikuva u na n’wayitelo wolowo wun’we wa matiko ya misava. Ku na munhu loyi ndzi nga n'wi tiviki emubedweni wa mina, ku na ku ba ka nhloko ya mina. Oho, e-e. Evuton’wini byin’wana a ndzi ta ku endla u tshama. 'Cause mina, ndzi na vuswikoti bya xin'wana na xin'wana.' Ku faneleka nyimpi ya mina ya ku rhwexa harhi. U tolovele ku yiva byala bya vatswari va wena u khandziya ehenhla ka lwangu. Tone, tan fit and ready, yi hundzuluxela ehenhla cause its gettin' heavy. Rirhandzu ra yena ri fana ni xidzidzirisi. Ndzi ehleketa leswaku ndzi rivele leswaku ndzi ni ku hlawula.

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>

Naswona hi tiphilisi leti yimisiweke.

Nhundzu ya xikhomela-ndhawu xa phanele ya thebhu. Leyi yi fambelana na thebhu ya le kaya. Ndzi ku vonile exikarhi ka doroba u ri karhi u yimbelela vuyimbeleri bya Blues. Languta u ri karhi u rhendzeleka hi drain. Ha yini u nga ndzi pfumeleli ndzi yima? Nhloko leyi ambalaka harhi ya tika. Ina, hi endla leswaku tintsumi ti rila, ti na mpfula emisaveni yi ri ehenhla. Wanna ku vona show hi 3D, movie. Xana u tshama u titwa, u titwa u ri na phepha ro olova swinene. I ina kumbe e-e, e-e kumbexana.

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>

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

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 button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#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 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. Thebhu yi fanele ku va na data-targetkumbe, loko u tirhisa xihlanganisi, hrefxihlawulekisi lexi kongomisaka node ya xikhomela eka DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('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 ya fihliwile). Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka ya khale na thebhu leyintshwa leyi tirhaka, hi ku landzelelana. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})