ნავიგაცია და ჩანართები

დოკუმენტაცია და მაგალითები, თუ როგორ გამოიყენოთ Bootstrap-ის ნავიგაციის კომპონენტები.

ამ გვერდზე

ბაზის ნავი

Bootstrap-ში ხელმისაწვდომი ნავიგაცია იზიარებს ზოგად მარკირებას და სტილებს, საბაზისო .navკლასიდან აქტიურ და გამორთული მდგომარეობებამდე. შეცვალეთ მოდიფიკატორის კლასები თითოეულ სტილს შორის გადასართავად.

საბაზისო .navკომპონენტი აგებულია flexbox-ით და უზრუნველყოფს ძლიერ საფუძველს ყველა სახის სანავიგაციო კომპონენტის შესაქმნელად. მასში შედის რამდენიმე სტილის უგულებელყოფა (სიებთან მუშაობისთვის), ბმულების ბალიშები უფრო დიდი დარტყმისთვის და ძირითადი გათიშული სტილისტიკა.

საბაზისო .navკომპონენტი არ შეიცავს რაიმე .activeმდგომარეობას. შემდეგი მაგალითები მოიცავს კლასს, ძირითადად იმის საჩვენებლად, რომ ეს კონკრეტული კლასი არ იწვევს რაიმე განსაკუთრებულ სტილს.

აქტიური მდგომარეობის დამხმარე ტექნოლოგიებზე გადასაცემად გამოიყენეთ aria-currentატრიბუტი — pageმიმდინარე გვერდის მნიშვნელობის ან trueნაკრების მიმდინარე ელემენტისთვის.

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

კლასები გამოიყენება მთელ მსოფლიოში, ასე რომ თქვენი მარკირება შეიძლება იყოს სუპერ მოქნილი. გამოიყენეთ <ul>s როგორც ზემოთ, <ol>თუ თქვენი ნივთების თანმიმდევრობა მნიშვნელოვანია, ან გააფართოვეთ თქვენი <nav>ელემენტი. იმის გამო, რომ .navიყენებს display: flex, nav-ის ბმულები იქცევა ისევე, როგორც ნავი ელემენტები, მაგრამ დამატებითი მარკირების გარეშე.

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

ხელმისაწვდომი სტილები

შეცვალეთ .navs კომპონენტის სტილი მოდიფიკატორებით და კომუნალური საშუალებებით. შეურიეთ და შეადარეთ საჭიროებისამებრ, ან შექმენით საკუთარი.

ჰორიზონტალური განლაგება

შეცვალეთ თქვენი ნავიგაციის ჰორიზონტალური განლაგება flexbox-ის კომუნალური საშუალებებით . ნაგულისხმევად, ნავიგები არის მარცხნივ გასწორებული, მაგრამ თქვენ შეგიძლიათ მარტივად შეცვალოთ ისინი ცენტრში ან მარჯვნივ.

ცენტრშია .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>

მარჯვნივ გასწორებული .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>

ვერტიკალური

.flex-columnმოაწყეთ თქვენი ნავიგაცია უტილიტის საშუალებით მოქნილი ელემენტის მიმართულების შეცვლით . გჭირდებათ მათი დაწყობა ზოგიერთ ხედზე, მაგრამ არა? გამოიყენეთ საპასუხო ვერსიები (მაგ., .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>

როგორც ყოველთვის, ვერტიკალური ნავიგაცია შესაძლებელია <ul>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>

ჩანართები

იღებს საბაზისო ნავიგს ზემოდან და ამატებს .nav-tabsკლასს ჩანართიანი ინტერფეისის შესაქმნელად. გამოიყენეთ ისინი ჩანართის რეგიონების შესაქმნელად ჩვენი ჩანართის 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>

აბები

აიღეთ იგივე HTML, მაგრამ .nav-pillsამის ნაცვლად გამოიყენეთ:

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

შეავსე და გაამართლე

აიძულეთ თქვენი .navშიგთავსი გააფართოვოს მოდიფიკატორის ორი კლასიდან ერთ-ერთი სრული ხელმისაწვდომი სიგანე. იმისათვის, რომ პროპორციულად შეავსოთ ყველა არსებული სივრცე თქვენი .nav-items-ით, გამოიყენეთ .nav-fill. ყურადღება მიაქციეთ, რომ მთელი ჰორიზონტალური სივრცე დაკავებულია, მაგრამ ნავიგაციის ყველა ელემენტს არ აქვს იგივე სიგანე.

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

დაფუძნებული ნავიგაციის გამოყენებისას <nav>, შეგიძლიათ უსაფრთხოდ გამოტოვოთ .nav-item, რადგან .nav-linkსაჭიროა მხოლოდ სტილის <a>ელემენტები.

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

თანაბარი სიგანის ელემენტებისთვის გამოიყენეთ .nav-justified. მთელ ჰორიზონტალურ სივრცეს დაიკავებს ნავი ბმულები, მაგრამ .nav-fillზემოაღნიშნულისგან განსხვავებით, ნავიგაციის ყველა ელემენტი იგივე სიგანე იქნება.

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

.nav-fillმაგალითის მსგავსად <nav>ნავიგაციის გამოყენებით.

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

მუშაობა flex utilities-თან

თუ თქვენ გჭირდებათ საპასუხო ნავიგაციის ვარიაციები, განიხილეთ flexbox უტილიტების სერიის გამოყენება . მიუხედავად იმისა, რომ უფრო ვრცელი, ეს უტილიტები გვთავაზობენ უფრო მეტ პერსონალიზაციას საპასუხო წყვეტის წერტილებში. ქვემოთ მოყვანილ მაგალითში, ჩვენი ნავი განლაგდება ყველაზე დაბალ წყვეტის წერტილზე, შემდეგ მოერგება ჰორიზონტალურ განლაგებას, რომელიც ავსებს ხელმისაწვდომ სიგანეს მცირე წყვეტის წერტილიდან დაწყებული.

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

რაც შეეხება ხელმისაწვდომობას

თუ თქვენ იყენებთ ნავიგაციას ნავიგაციის ზოლის უზრუნველსაყოფად, დარწმუნდით, რომ დაამატეთ A- role="navigation"ს ყველაზე ლოგიკურ მშობელ კონტეინერში <ul>, ან გადაიტანეთ <nav>ელემენტი მთელ ნავიგაციაზე. არ დაამატოთ როლი <ul>თავისთავად, რადგან ეს ხელს შეუშლის მის გამოცხადებას დამხმარე ტექნოლოგიების მიერ რეალურ სიაში.

გაითვალისწინეთ, რომ ნავიგაციის ზოლები, თუნდაც ვიზუალურად იყოს სტილიზებული, როგორც ჩანართები .nav-tabsკლასთან, არ უნდა იყოს მინიჭებული role="tablist"ან ატრიბუტები. ისინი შესაფერისია მხოლოდ დინამიური ჩანართის ინტერფეისებისთვის, როგორც ეს აღწერილია WAI ARIA ავტორინგის პრაქტიკაში . მაგალითად, იხილეთ JavaScript-ის ქცევა დინამიური ჩანართი ინტერფეისებისთვის ამ განყოფილებაში. ატრიბუტი საჭირო არ არის დინამიურ ჩანართის ინტერფეისებზე, რადგან ჩვენი JavaScript ამუშავებს შერჩეულ მდგომარეობას აქტიური ჩანართის დამატებით.role="tab"role="tabpanel" aria-currentaria-selected="true"

ჩამოსაშლელი მენიუს გამოყენება

დაამატეთ ჩამოსაშლელი მენიუები ცოტა დამატებითი HTML-ით და ჩამოსაშლელი 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 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>

აბები წვეთებით

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

სას

ცვლადები

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

JavaScript ქცევა

გამოიყენეთ ჩანართის JavaScript მოდული — ჩართეთ იგი ინდივიდუალურად ან შედგენილი bootstrap.jsფაილის მეშვეობით — ჩვენი სანავიგაციო ჩანართებისა და აბების გასაფართოვებლად, რათა შევქმნათ ადგილობრივი შინაარსის ჩანართის პანელები.

დინამიური ჩანართი ინტერფეისები, როგორც აღწერილია WAI ARIA ავტორინგის პრაქტიკაში , მოითხოვს role="tablist", role="tab", role="tabpanel"და დამატებით aria-ატრიბუტებს, რათა გადასცეს მათი სტრუქტურა, ფუნქციონალი და მიმდინარე მდგომარეობა დამხმარე ტექნოლოგიების მომხმარებლებს (როგორიცაა ეკრანის წამკითხველები). როგორც საუკეთესო პრაქტიკა, ჩვენ გირჩევთ გამოიყენოთ <button>ელემენტები ჩანართებისთვის, რადგან ეს არის კონტროლი, რომელიც იწვევს დინამიურ ცვლილებას, ვიდრე ბმულები, რომლებიც გადადიან ახალ გვერდზე ან მდებარეობაზე.

გაითვალისწინეთ, რომ დინამიური ჩანართის ინტერფეისები არ უნდა შეიცავდეს ჩამოსაშლელ მენიუებს, რადგან ეს იწვევს როგორც გამოყენებადობის, ასევე ხელმისაწვდომობის პრობლემებს. გამოყენებადობის პერსპექტივიდან, იმ ფაქტმა, რომ ამჟამად ნაჩვენები ჩანართის გამომწვევი ელემენტი დაუყოვნებლივ არ ჩანს (რადგან ის დახურულ ჩამოსაშლელ მენიუშია) შეიძლება გამოიწვიოს დაბნეულობა. ხელმისაწვდომობის თვალსაზრისით, ამჟამად არ არსებობს გონივრული გზა ამ ტიპის კონსტრუქციის სტანდარტული WAI ARIA-ს შაბლონზე გადასატანად, რაც იმას ნიშნავს, რომ ის ადვილად გასაგები არ იქნება დამხმარე ტექნოლოგიების მომხმარებლებისთვის.

ეს არის გარკვეული ჩანაცვლების შიგთავსი მთავარი ჩანართთან დაკავშირებული კონტენტი. სხვა ჩანართზე დაწკაპუნება გადართავს ამ ჩანართის ხილვადობას შემდეგისთვის. ჩანართი JavaScript ცვლის კლასებს კონტენტის ხილვადობისა და სტილის გასაკონტროლებლად. თქვენ შეგიძლიათ გამოიყენოთ ის ჩანართებით, აბებით და ნებისმიერი სხვა .navნავიგაციის საშუალებით.

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>

თქვენი მოთხოვნილებების დასაკმაყოფილებლად, ეს მუშაობს <ul>დაფუძნებული მარკირებით, როგორც ეს ზემოთ არის ნაჩვენები, ან ნებისმიერი თვითნებური „დააბრუნეთ საკუთარი“ მარკირებით. გაითვალისწინეთ, რომ თუ იყენებთ <nav>, არ უნდა დაამატოთ role="tablist"პირდაპირ მასში, რადგან ეს გადალახავს ელემენტის, როგორც ნავიგაციის ღირშესანიშნაობის მთავარ როლს. ამის ნაცვლად, გადაერთეთ ალტერნატიულ ელემენტზე (ქვემოთ მოცემულ მაგალითში, მარტივი <div>) და შემოიხვიეთ <nav>გარშემო.

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

ჩანართების მოდული ასევე მუშაობს აბებით.

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

და ვერტიკალური აბებით.

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>

მონაცემთა ატრიბუტების გამოყენება

თქვენ შეგიძლიათ გაააქტიუროთ ჩანართების ან აბების ნავიგაცია JavaScript-ის დაწერის გარეშე უბრალოდ ელემენტის მითითებით data-bs-toggle="tab"ან მასზე. data-bs-toggle="pill"გამოიყენეთ ეს მონაცემთა ატრიბუტები .nav-tabsან .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>

JavaScript-ის საშუალებით

ჩანართის ჩანართების ჩართვა JavaScript-ის საშუალებით (თითოეული ჩანართი ინდივიდუალურად უნდა გააქტიურდეს):

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()
  })
})

თქვენ შეგიძლიათ გაააქტიუროთ ინდივიდუალური ჩანართები რამდენიმე გზით:

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

გაქრობის ეფექტი

ჩანართების გაქრობის მიზნით, დაამატეთ .fadeთითოეულს .tab-pane. პირველი ჩანართის პანელს ასევე უნდა ჰქონდეს .showთავდაპირველი შინაარსი ხილული.

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

მეთოდები

ასინქრონული მეთოდები და გადასვლები

ყველა API მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .

იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .

constructor

ააქტიურებს ჩანართის ელემენტს და კონტენტის კონტეინერს. Tab უნდა ჰქონდეს ან, data-bs-targetან, თუ იყენებთ ბმულს, hrefატრიბუტი, რომელიც მიზნად ისახავს კონტეინერის კვანძს 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>

შოუ

ირჩევს მოცემულ ჩანართს და აჩვენებს მის დაკავშირებულ პანელს. ნებისმიერი სხვა ჩანართი, რომელიც ადრე იყო არჩეული, გაუქმდება და მასთან დაკავშირებული პანელი იმალება. უბრუნდება აბონენტს ჩანართების პანელის რეალურად ჩვენებამდე (ანუ shown.bs.tabმოვლენის დადგომამდე).

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

  tab.show()

განკარგავს

ანადგურებს ელემენტის ჩანართს.

getInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან დაკავშირებული ჩანართის მაგალითი

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

getOrCreateInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან ასოცირებული ჩანართის მაგალითი, ან შექმნათ ახალი, თუ ის არ იყო ინიციალიზებული

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

Ივენთი

ახალი ჩანართის ჩვენებისას, მოვლენები ჩნდება შემდეგი თანმიმდევრობით:

hide.bs.tab(მიმდინარე აქტიურ ჩანართზე)
show.bs.tab(გამოსაჩენ ჩანართზე)
hidden.bs.tab(წინა აქტიურ ჩანართზე, იგივე რაც hide.bs.tabღონისძიებისთვის)
shown.bs.tab(ახლად აქტიურ ახლად ნაჩვენები ჩანართზე, იგივე რაც show.bs.tabღონისძიებისთვის)

თუ არცერთი ჩანართი არ იყო აქტიური, მაშინ hide.bs.tabდა hidden.bs.tabმოვლენები არ გაიხსნება.

ღონისძიების ტიპი	აღწერა
`show.bs.tab`	ეს ღონისძიება ჩართულია ჩანართის ჩვენებაზე, მაგრამ სანამ ახალი ჩანართი გამოჩნდება. გამოიყენეთ `event.target`და `event.relatedTarget`მიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად.
`shown.bs.tab`	ეს ღონისძიება ჩართულია ჩანართის ჩვენებაში მას შემდეგ, რაც გამოჩნდება ჩანართი. გამოიყენეთ `event.target`და `event.relatedTarget`მიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად.
`hide.bs.tab`	ეს მოვლენა ირთვება, როდესაც უნდა იყოს ნაჩვენები ახალი ჩანართი (და ამით წინა აქტიური ჩანართი უნდა დაიმალოს). გამოიყენეთ `event.target`და `event.relatedTarget`მიზნად ისახავს მიმდინარე აქტიური ჩანართი და ახალი მალე აქტიური ჩანართი, შესაბამისად.
`hidden.bs.tab`	ეს მოვლენა ირთვება მას შემდეგ, რაც გამოჩნდება ახალი ჩანართი (და ამით წინა აქტიური ჩანართი დამალულია). გამოიყენეთ `event.target`და `event.relatedTarget`მიზნად ისახავს წინა აქტიური ჩანართი და ახალი აქტიური ჩანართი, შესაბამისად.

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