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.

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

<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

html

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

CSS

Variablat

Shtuar në v5.2.0

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, navistët tani përdorin variabla lokale CSS në .nav, .nav-tabs, dhe .nav-pillspër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

Në .navklasën bazë:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Në .nav-tabsklasën e modifikuesve:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Në .nav-pillsklasën e modifikuesve:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Variablat Sass

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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.

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.

Kjo është një përmbajtje vendmbajtëse, përmbajtja e lidhur me skedën e "Profilit" . 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 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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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.

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 Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Shtojca e skedave funksionon gjithashtu me pilula.

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Dhe me pilula vertikale. Në mënyrë ideale, për skedat vertikale, duhet të shtoni gjithashtu aria-orientation="vertical"në kontejnerin e listës së skedave.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Aksesueshmëria

Ndërfaqet dinamike me skeda, siç përshkruhet në modelin e skedave të Udhëzuesit të Praktikave të Autorizimit 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.

Në përputhje me modelin e praktikave të autorizimit ARIA, vetëm skeda aktualisht aktive merr fokusin e tastierës. Kur inicializohet shtojca JavaScript, ajo do të vendoset tabindex="-1"në të gjitha kontrollet e skedave joaktive. Pasi skeda aktualisht aktive të ketë fokusin, tastet e kursorit aktivizojnë skedën e mëparshme/tjetër, me shtojcën që ndryshon lëvizjentabindex në përputhje me rrethanat. Megjithatë, vini re se shtojca JavaScript nuk bën dallim midis listave të skedave horizontale dhe vertikale kur bëhet fjalë për ndërveprimet e çelësave të kursorit: pavarësisht nga orientimi i listës së skedave, si kursori lart ashtu edhe ai i majtë shkojnë në skedën e mëparshme dhe kursori poshtë dhe djathtas shkojnë te skedën tjetër.

Në përgjithësi, për të lehtësuar navigimin me tastierë, rekomandohet që të fokusohen edhe vetë panelet e skedave, përveç nëse elementi i parë që përmban përmbajtje kuptimplote brenda panelit të skedës është tashmë i fokusueshëm. Shtojca JavaScript nuk përpiqet të trajtojë këtë aspekt - aty ku është e përshtatshme, do t'ju duhet t'i bëni në mënyrë eksplicite panelet e skedave tuaja të fokusueshme duke shtuar tabindex="0"shënimin tuaj.

Shtojca e skedës JavaScript nuk mbështet ndërfaqet me skeda që përmbajnë menytë rënëse, pasi këto shkaktojnë 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.

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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Përmes JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

const 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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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 .

Aktivizon përmbajtjen tuaj si një element skede.

Mund të krijoni një shembull skedash me konstruktorin, për shembull:

const bsTab = new bootstrap.Tab('#myTab')

Metoda	Përshkrim
`dispose`	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, mund ta përdorni si kjo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Metoda statike e cila kthen një shembull skedash të lidhur me një element DOM ose krijon një të ri në rast se nuk ishte inicializuar. Mund ta përdorni si kjo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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.tab`ndodhë ngjarja).

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

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