in English

ნავები

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

ბაზის ნავი

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

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

საბაზისო .navკომპონენტი არ შეიცავს რაიმე .activeმდგომარეობას. შემდეგი მაგალითები მოიცავს კლასს, ძირითადად იმის საჩვენებლად, რომ ეს კონკრეტული კლასი არ იწვევს რაიმე განსაკუთრებულ სტილს. 
<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>

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

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

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

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

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

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

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

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

ვერტიკალური

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

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

ჩანართები

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

აბები

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

დაამატეთ ჩამოსაშლელი მენიუები ცოტა დამატებითი HTML-ით და ჩამოსაშლელი JavaScript მოდულით .

ჩანართები ჩამოსაშლელი ღილაკებით

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

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

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

JavaScript ქცევა

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

თუ თქვენ აშენებთ ჩვენს JavaScript-ს წყაროდან, ის მოითხოვსutil.js .

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

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

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

ჩანართის პანელის ჩანაცვლების კონტენტი. ეს ეხება პროფილის ჩანართს. თქვენ გაქვთ საუკეთესო არქიტექტურა. პასპორტის შტამპები, ის კოსმოპოლიტია. კარგი, ახალი, სასტიკი, ჩვენ ის ჩაკეტილი გვაქვს. არასდროს დამიგეგმავს, რომ ერთ დღეს დავკარგავდი. ის შენს გულს ჭამს. შენი კოცნა კოსმოსურია, ყოველი ნაბიჯი ჯადოსნური. ვგულისხმობ მათ, ვგულისხმობ თითქოს ის არის. სალამი საყვარელო მოდი ვიმოგზაუროთ. უბრალოდ გაატარეთ ღამე, როგორც 4 ივლისს! მაგრამ გირჩევნია დაიკარგო.

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>

თქვენი მოთხოვნილებების დასაკმაყოფილებლად, ეს მუშაობს <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-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>

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

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

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>

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

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

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>

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

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

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

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

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

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

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

ჩანართების გაქრობის მიზნით, დაამატეთ .fadeთითოეულს .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 დოკუმენტაცია დამატებითი ინფორმაციისთვის .

$().tab

ააქტიურებს ჩანართის ელემენტს და კონტენტის კონტეინერს. Tab უნდა ჰქონდეს ან data-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-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 ("ჩვენება")

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

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

.tab ('განკარგვა')

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

Ივენთი

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

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

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

ღონისძიების ტიპი აღწერა
show.bs.tab ეს ღონისძიება ჩართულია ჩანართის ჩვენებაზე, მაგრამ სანამ ახალი ჩანართი გამოჩნდება. გამოიყენეთ event.targetდა event.relatedTargetმიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად.
ნაჩვენები.ბს.ჩანართი ეს ღონისძიება ჩართულია ჩანართის ჩვენებაში მას შემდეგ, რაც გამოჩნდება ჩანართი. გამოიყენეთ event.targetდა event.relatedTargetმიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად.
დამალვა.ბს.ჩანართი ეს მოვლენა ირთვება, როდესაც უნდა იყოს ნაჩვენები ახალი ჩანართი (და ამით წინა აქტიური ჩანართი უნდა დაიმალოს). გამოიყენეთ event.targetდა event.relatedTargetმიზნად ისახავს მიმდინარე აქტიური ჩანართი და ახალი მალე აქტიური ჩანართი, შესაბამისად.
დამალული.bs.tab ეს მოვლენა ირთვება მას შემდეგ, რაც გამოჩნდება ახალი ჩანართი (და ამით წინა აქტიური ჩანართი დამალულია). გამოიყენეთ event.targetდა event.relatedTargetმიზნად ისახავს წინა აქტიური ჩანართი და ახალი აქტიური ჩანართი, შესაბამისად. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})