Source

ნავები

დოკუმენტაცია და მაგალითები, თუ როგორ გამოიყენოთ 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" href="#">Disabled</a>
  </li>
</ul>

კლასები გამოიყენება მთელ მსოფლიოში, ასე რომ თქვენი მარკირება შეიძლება იყოს სუპერ მოქნილი. გამოიყენეთ <ul>s, როგორც ზემოთ, ან გააფართოვეთ თქვენი, ვთქვათ, <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" href="#">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" href="#">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" href="#">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" href="#">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" href="#">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" href="#">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" href="#">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="#">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" href="#">Disabled</a>
  </li>
</ul>

<nav>დაფუძნებული ნავიგაციის გამოყენებისას აუცილებლად ჩადეთ .nav-itemწამყვანები.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

ნავიგაციის დაფუძნებული ნავიგაციის .nav-fillმაგალითის მსგავსად, აუცილებლად ჩადეთ წამყვანებზე.<nav>.nav-item

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">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="#">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" href="#">Disabled</a>
</nav>

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

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

გაითვალისწინეთ, რომ ნავიგაციის ზოლები, თუნდაც ვიზუალურად იყოს სტილიზებული, როგორც ჩანართები .nav-tabsკლასთან, არ უნდა იყოს მინიჭებული role="tablist"ან ატრიბუტები. ისინი შესაფერისია მხოლოდ დინამიური ჩანართის ინტერფეისებისთვის, როგორც ეს აღწერილია WAI 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-haspopup="true" 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" href="#">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-haspopup="true" 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" href="#">Disabled</a>
  </li>
</ul>

JavaScript ქცევა

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

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

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

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

ნედლი ჯინსი, თქვენ ალბათ არ გსმენიათ მათ შესახებ ჯინსის შორტები Austin. Nesciunt tofu stumptown aliqua, retro synth master წმენდა. ულვაში კლიშე დრო, უილიამსბურგი კარლეს ვეგანური ჰელვეტიკა. Reprehenderit ჯალათიც retro keffiyeh Dreamcatcher synth. Cosby sweater eu banh mi, qui irure ტერი რიჩარდსონი ex squid. აიფონის აბსოლუტური ადგილი. Seitan aliquip quis cardigan ამერიკული სამოსი, ჯალათი voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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>

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

შედეგად occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercise proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa exclusiveeur quis. Occaecat sit eu ვარჯიში irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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>

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

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim lorem sint. Veniam sint duis incididunt do esse magna mollit extraeur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit გარდა laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt გარდა ამისა ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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

ააქტიურებს ჩანართის ელემენტს და კონტენტის კონტეინერს. ჩანართს უნდა ჰქონდეს DOM-ში ან კონტეინერის კვანძი data-targetან სამიზნე.href

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').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მიზნად ისახავს წინა აქტიური ჩანართი და ახალი აქტიური ჩანართი, შესაბამისად. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})