Navs dhe skeda

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

Në këtë faqe

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 lista), 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ë.

Për të përcjellë gjendjen aktive tek teknologjitë ndihmëse, përdorni aria-currentatributin — duke përdorur pagevlerën për faqen aktuale ose truepër artikullin aktual në një grup.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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 e përgjegjshme (p.sh., .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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 më poshtë, navi ynë do të grumbullohet 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" aria-current="page" 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ë siguruar një shirit navigimi, sigurohuni që të shtoni një role="navigation"në kontejnerin më logjik prind të <ul>, ose 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ë praktikat e autorizimit të WAI ARIA . Shikoni sjelljen e JavaScript për ndërfaqet dinamike me skeda në këtë seksion për një shembull. Atributi aria-currentnuk është i nevojshëm në ndërfaqet dinamike me skeda pasi JavaScript ynë trajton gjendjen e zgjedhur duke shtuar aria-selected="true"në skedën aktive.

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

Sass

Variablat

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

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.

Ndërfaqet dinamike me skeda, siç përshkruhet në Praktikat e Autorimit të WAI 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 ndërfaqet dinamike me skeda nuk duhet të përmbajnë menytë rënëse, pasi kjo shkakton probleme të përdorshmërisë dhe 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.

Kjo është një përmbajtje vendmbajtëse, përmbajtja e lidhur me skedën Home. Klikimi i një skede tjetër do të ndryshojë dukshmërinë e kësaj për tjetrën. Skeda JavaScript ndërron klasat për të kontrolluar dukshmërinë dhe stilimin e përmbajtjes. Mund ta përdorni me skeda, pilula dhe çdo .navnavigacion tjetër me fuqi.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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.

<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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</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-bs-toggle="tab"ose data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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 .

constructor

Aktivizon një element skede dhe një kontenier përmbajtjeje. Skeda duhet të ketë ose një data-bs-targetose, nëse përdorni një lidhje, një hrefatribut, duke synuar 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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
  var firstTabEl = document.querySelector('#myTab li:last-child button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

shfaqje

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

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

disponoj

Shkatërron skedën e një elementi.

getInstance

Metoda statike e cila ju lejon të merrni shembullin e skedës së lidhur me një element DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Metoda statike e cila ju lejon të merrni shembullin e skedës të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Ngjarjet

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

hide.bs.tab(në skedën aktuale aktive)
show.bs.tab(në skedën që do të shfaqet)
hidden.bs.tab(në skedën e mëparshme aktive, e njëjta si për hide.bs.tabngjarjen)
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
`show.bs.tab`	Kjo ngjarje aktivizohet në shfaqjen e skedave, por përpara se të shfaqet skeda e re. Përdorni `event.target`dhe `event.relatedTarget`për të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet).
`shown.bs.tab`	Kjo ngjarje ndizet në shfaqjen e skedave pasi të jetë shfaqur një skedë. Përdorni `event.target`dhe `event.relatedTarget`për të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet).
`hide.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.target`dhe `event.relatedTarget`për të synuar përkatësisht skedën aktuale aktive dhe skedën e re që do të aktivizohet së shpejti.
`hidden.bs.tab`	Kjo ngjarje ndizet pasi shfaqet një skedë e re (dhe kështu skeda e mëparshme aktive fshihet). Përdorni `event.target`dhe `event.relatedTarget`për të synuar përkatësisht skedën e mëparshme aktive dhe skedën e re aktive.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})