in English

Navs

Dokumentacioni dhe shembuj për mënyrën e përdorimit të komponentëve të përfshirë të navigimit të Bootstrap.

Navi bazë

Navigimi i disponueshëm në Bootstrap ndan markimin dhe stilet e përgjithshme, nga .navklasa bazë deri te gjendjet aktive dhe të paaftë. Ndërroni klasat e modifikuesve për të kaluar midis secilit stil.

Komponenti bazë .navështë ndërtuar me flexbox dhe ofron një bazë të fortë për ndërtimin e të gjitha llojeve të komponentëve të navigimit. Ai përfshin disa zëvendësime stili (për të punuar me listat), disa mbushje lidhjesh për zona më të mëdha të goditjes dhe stilim bazë me aftësi të kufizuara.

Komponenti bazë .navnuk përfshin asnjë .activegjendje. Shembujt e mëposhtëm përfshijnë klasën, kryesisht për të demonstruar se kjo klasë e veçantë nuk shkakton ndonjë stil të veçantë. 
<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>

Klasat përdoren gjatë gjithë kohës, kështu që shënimi juaj mund të jetë super fleksibël. Përdorni <ul>s si më sipër, <ol>nëse renditja e artikujve tuaj është e rëndësishme, ose rrotulloni tuajin me një <nav>element. Për shkak se .navpërdor display: flex, lidhjet naviguese sillen njësoj si artikujt navigues, por pa shënjimin shtesë.

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

Stilet e disponueshme

Ndryshoni stilin e .navkomponentit s me modifikues dhe shërbime. Përzieni dhe përzieni sipas nevojës, ose ndërtoni tuajin.

Rreshtimi horizontal

Ndryshoni shtrirjen horizontale të navigimit tuaj me shërbimet e flexbox . Si parazgjedhje, navigimet janë të rreshtuara majtas, por mund t'i ndryshoni lehtësisht në linjën qendrore ose djathtas.

Në qendër me .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>

Lidhur djathtas me .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>

Vertikale

Vendosni navigimin tuaj duke ndryshuar drejtimin e artikullit flex me programin .flex-column. Duhet t'i grumbulloni ato në disa porta shikimi, por jo në të tjera? Përdorni versionet reaguese (p.sh., .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>

Si gjithmonë, navigimi vertikal është i mundur <ul>edhe pa s.

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

Skedat

Merr navigimin bazë nga lart dhe shton .nav-tabsklasën për të gjeneruar një ndërfaqe me skeda. Përdorini ato për të krijuar rajone me tabela me shtojcën tonë të skedës JavaScript .

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

Pilula

Merrni të njëjtin HTML, por përdorni .nav-pillsnë vend të kësaj:

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

Plotësoni dhe justifikoni

Detyrojeni .navpërmbajtjen tuaj të zgjerojë gjerësinë e plotë të disponueshme një nga dy klasat e modifikuesve. Për të mbushur në mënyrë proporcionale të gjithë hapësirën e disponueshme me .nav-items tuaj, përdorni .nav-fill. Vini re se e gjithë hapësira horizontale është e zënë, por jo çdo artikull navig ka të njëjtën gjerësi.

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

Kur përdorni një <nav>navigim të bazuar, mund ta lini me siguri .nav-itempasi .nav-linkkërkohet vetëm për <a>elementët e stilimit.

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

Për elementë me gjerësi të barabartë, përdorni .nav-justified. E gjithë hapësira horizontale do të zëhet nga lidhjet e navigimit, por ndryshe nga sa .nav-fillmë sipër, çdo artikull navigimi do të ketë të njëjtën gjerësi.

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

Ngjashëm me .nav-fillshembullin duke përdorur një <nav>navigacion të bazuar.

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

Puna me shërbimet flex

Nëse keni nevojë për variacione të përgjegjshme navigimi, merrni parasysh përdorimin e një sërë shërbimesh të flexbox . Ndërsa janë më të përfolura, këto shërbime ofrojnë personalizim më të madh nëpër pikat e ndërprerjes të përgjegjshme. Në shembullin e mëposhtëm, navi ynë do të vendoset në pikën më të ulët të ndërprerjes, më pas do të përshtatet me një plan urbanistik që plotëson gjerësinë e disponueshme duke filluar nga pika e vogël e ndërprerjes.

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

Në lidhje me aksesueshmërinë

Nëse jeni duke përdorur navigacion për të ofruar një shirit navigimi, sigurohuni që të shtoni një role="navigation"në kontejnerin më logjik prind të <ul>, ose të mbështillni një <nav>element rreth të gjithë navigimit. Mos e shtoni rolin në <ul>vetvete, pasi kjo do të pengonte që ajo të shpallet si një listë aktuale nga teknologjitë ndihmëse.

Vini re se shiritat e navigimit, edhe nëse stilohen vizualisht si skeda me .nav-tabsklasën, nuk duhet të jepen role="tablist", role="tab"ose role="tabpanel"atribute. Këto janë të përshtatshme vetëm për ndërfaqet dinamike me skeda, siç përshkruhet në modelin e skedave të Udhëzuesit të praktikave të autorizimit ARIA . Shikoni sjelljen e JavaScript për ndërfaqet dinamike me skeda në këtë seksion për një shembull.

Përdorimi i pikave me rënie

Shtoni menytë rënëse me pak HTML shtesë dhe shtojcën JavaScript me zbritje .

Skedat me zbritje

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

Pilula me pika

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

Sjellja JavaScript

Përdorni shtojcën JavaScript të skedës—përfshijeni atë individualisht ose përmes bootstrap.jsskedarit të përpiluar—për të zgjeruar skedat dhe pilulat tona të lundrimit për të krijuar panele me tabela të përmbajtjes lokale.

Nëse po ndërtoni JavaScript-in tonë nga burimi, ai kërkonutil.js .

Ndërfaqet dinamike me skeda, siç përshkruhet në modelin e skedave të Udhëzuesit të Praktikave të Autorimit ARIA , kërkojnë role="tablist", role="tab", role="tabpanel"dhe aria-atribute shtesë për të përcjellë strukturën, funksionalitetin dhe gjendjen e tyre aktuale te përdoruesit e teknologjive ndihmëse (të tilla si lexuesit e ekranit). Si praktikë më e mirë, ne rekomandojmë përdorimin <button>e elementeve për skedat, pasi këto janë kontrolle që shkaktojnë një ndryshim dinamik, në vend të lidhjeve që lundrojnë në një faqe ose vendndodhje të re.

Vini re se shtojca JavaScript e skedës nuk mbështet ndërfaqet me skeda që përmbajnë menytë rënëse, pasi këto shkaktojnë probleme si të përdorshmërisë ashtu edhe të aksesueshmërisë. Nga këndvështrimi i përdorshmërisë, fakti që elementi i aktivizimit të skedës së shfaqur aktualisht nuk është menjëherë i dukshëm (pasi është brenda menysë së mbyllur me zbritje) mund të shkaktojë konfuzion. Nga pikëpamja e aksesueshmërisë, aktualisht nuk ka asnjë mënyrë të arsyeshme për të hartuar këtë lloj konstruksioni në një model standard WAI ARIA, që do të thotë se ai nuk mund të bëhet lehtësisht i kuptueshëm për përdoruesit e teknologjive ndihmëse.

Përmbajtja e mbajtësit të vendeve për panelin e skedave. Kjo lidhet me skedën e shtëpisë. Të çon milje lart, aq lart, sepse ajo ka një buzëqeshje ndërkombëtare. Ka një të huaj në shtratin tim, ka një goditje në kokë. Oh, jo. Në një jetë tjetër do të bëja të qëndroni. Sepse unë, unë jam i aftë për çdo gjë. Përshtatem për betejën time të kurorëzimit. Përdoret për të vjedhur pije alkoolike të prindërve tuaj dhe për t'u ngjitur në çati. Toni, i nxirë dhe i gatshëm, kthejeni atë duke bërë që të bëhet i rëndë. Dashuria e saj është si një drogë. Mendoj se harrova se kisha një zgjedhje.

Përmbajtja e mbajtësit të vendeve për panelin e skedave. Kjo lidhet me skedën e profilit. Ju keni arkitekturën më të mirë. Vula e pasaportës, ajo është kozmopolite. Mirë, e freskët, e ashpër, e morëm në kyçje. Nuk e kisha planifikuar kurrë që një ditë do të të humbja. Ajo të ha zemrën. Puthja juaj është kozmike, çdo lëvizje është magji. Dua të them ato, dua të them sikur ajo është ajo. Përshëndetje të dashur, le të bëjmë një udhëtim. Mjafton të zotëroni natën si 4 korriku! Por ju më mirë do të humbisni.

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>

Për t'iu përshtatur nevojave tuaja, kjo funksionon me shënjimin e <ul>bazuar, siç tregohet më sipër, ose me ndonjë shënim arbitrar "rrotulloni tuajin". Vini re se nëse jeni duke përdorur <nav>, nuk duhet të shtoni role="tablist"direkt në të, pasi kjo do të anashkalonte rolin bazë të elementit si pikë referimi navigimi. Në vend të kësaj, kaloni te një element alternativ (në shembullin më poshtë, një i thjeshtë <div>) dhe mbështilleni <nav>rreth tij.

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

Shtojca e skedave funksionon gjithashtu me pilula.

Përmbajtja e mbajtësit të vendeve për panelin e skedave. Kjo lidhet me skedën e shtëpisë. Të çon milje lart, aq lart, sepse ajo ka një buzëqeshje ndërkombëtare. Ka një të huaj në shtratin tim, ka një goditje në kokë. Oh, jo. Në një jetë tjetër do të bëja të qëndroni. Sepse unë, unë jam i aftë për çdo gjë. Përshtatem për betejën time të kurorëzimit. Përdoret për të vjedhur pije alkoolike të prindërve tuaj dhe për t'u ngjitur në çati. Toni, i nxirë dhe i gatshëm, kthejeni atë duke bërë që të bëhet i rëndë. Dashuria e saj është si një drogë. Mendoj se harrova se kisha një zgjedhje.

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>

Dhe me pilula vertikale.

Përmbajtja e mbajtësit të vendeve për panelin e skedave. Kjo lidhet me skedën e shtëpisë. Të pashë në qendër të qytetit duke kënduar Blues. Shikoni se si rrethoni kanalin. Pse nuk më lejoni të ndalem? E rëndë është koka që mban kurorën. Po, ne i bëjmë engjëjt të qajnë, duke rënë shi mbi tokë nga lart. Dëshiron ta shoh shfaqjen në 3D, një film. A ndiheni ndonjëherë, ndiheni kaq të hollë letre. Është një po ose jo, ndoshta jo.

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>

Përdorimi i atributeve të të dhënave

Ju mund të aktivizoni navigimin e një skede ose pilule pa shkruar ndonjë JavaScript thjesht duke specifikuar data-toggle="tab"ose data-toggle="pill"mbi një element. Përdorni këto atribute të dhënash në .nav-tabsose .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>

Përmes JavaScript

Aktivizo skedat me skeda përmes JavaScript (secila skedë duhet të aktivizohet individualisht):

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

Ju mund të aktivizoni skedat individuale në disa mënyra:

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

Efekti i zbehjes

Për të zbehur skedat, shtoni .fadenë secilën .tab-pane. Paneli i parë i skedës duhet gjithashtu .showtë bëjë të dukshme përmbajtjen fillestare.

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

Metodat

Metodat dhe tranzicionet asinkrone

Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .

Shikoni dokumentacionin tonë JavaScript për më shumë informacion .

$().tab

Aktivizon një element skede dhe një kontenier përmbajtjeje. Skeda duhet të ketë ose një data-targetose, nëse përdorni një lidhje, një hrefatribut që synon një nyje kontejneri në 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 ('shfaq')

Zgjedh skedën e dhënë dhe tregon panelin e lidhur me të. Çdo skedë tjetër që është përzgjedhur më parë bëhet e pazgjedhur dhe paneli i lidhur me të fshihet. Kthehet te thirrësi përpara se të shfaqet paneli i skedës (dmth. përpara se të shown.bs.tabndodhë ngjarja).

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

.tab ('dispose')

Shkatërron skedën e një elementi.

Ngjarjet

Kur shfaqet një skedë e re, ngjarjet shfaqen në rendin e mëposhtëm:

  1. hide.bs.tab(në skedën aktuale aktive)
  2. show.bs.tab(në skedën që do të shfaqet)
  3. hidden.bs.tab(në skedën e mëparshme aktive, e njëjta si për hide.bs.tabngjarjen)
  4. shown.bs.tab(në skedën e saposhfaqur të sapoaktive, e njëjta si për show.bs.tabngjarjen)

Nëse asnjë skedë nuk ishte tashmë aktive, atëherë ngjarjet hide.bs.tabdhe hidden.bs.tabnuk do të hapen.

Lloji i ngjarjes Përshkrim
shfaq.bs.tab Kjo ngjarje aktivizohet në shfaqjen e skedave, por përpara se të shfaqet skeda e re. Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet).
treguar.bs.tab Kjo ngjarje ndizet në shfaqjen e skedave pasi të jetë shfaqur një skedë. Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet).
fsheh.bs.tab Kjo ngjarje ndizet kur duhet të shfaqet një skedë e re (dhe kështu skeda e mëparshme aktive duhet të fshihet). Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën aktuale aktive dhe skedën e re që do të aktivizohet së shpejti.
fshehur.bs.tab Kjo ngjarje ndizet pasi shfaqet një skedë e re (dhe kështu skeda e mëparshme aktive fshihet). Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën e mëparshme aktive dhe skedën e re aktive. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})