in English

گۇرۇپپا

تىزىملىك گۇرۇپپىلىرى بىر يۈرۈش مەزمۇنلارنى كۆرسىتىشنىڭ جانلىق ۋە كۈچلۈك تەركىبىي قىسمى. ئۇلارنى ئۆزگەرتىپ كېڭەيتىپ ، ئىچىدىكى مەزمۇنلارنىلا قوللاڭ.

ئاساسلىق مىسال

ئەڭ ئاساسلىق تىزىملىك گۇرۇپپىسى تىزىملىك تۈرلىرى ۋە مۇۋاپىق دەرسلەر بىلەن تەرتىپسىز تىزىملىك. ئۇنىڭغا ئەگىشىدىغان تاللاشلار ياكى ئېھتىياجغا ئاساسەن ئۆزىڭىزنىڭ CSS ئارقىلىق قۇرۇڭ.

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر
تۆتىنچى تۈر
بەشىنچى

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

ئاكتىپ تۈرلەر

نۆۋەتتىكى ئاكتىپ تاللاشنى كۆرسىتىش .activeئۈچۈن a غا قوشۇڭ ..list-group-item

ئاكتىپ تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر
تۆتىنچى تۈر
بەشىنچى

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

چەكلەنگەن تۈرلەر

ئۇنى چەكلەش.disabled ئۈچۈن a .list-group-itemغا قوشۇڭ . شۇنىڭغا دىققەت قىلىڭكى ، بەزى ئېلېمېنتلار چېكىش ھادىسىلىرىنى (مەسىلەن ، ئۇلىنىشلارنى) تولۇق چەكلەش ئۈچۈن ئىختىيارى JavaScript تەلەپ قىلىدۇ..disabled

چەكلەنگەن تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر
تۆتىنچى تۈر
بەشىنچى

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

ئۇلىنىش ۋە كۇنۇپكىلار

<a>S ياكى <button>s نى ئىشلىتىپ قوشۇش ئارقىلىق چەكلەنگەن ، چەكلەنگەن ۋە ئاكتىپ ھالەتتىكى ھەرىكەتچان گۇرۇپپا تۈرلىرىنى قۇرالايسىز .list-group-item-action. بىز بۇ ساختا دەرسلەرنى ئايرىپ ، ئۆز-ئارا تەسىر قىلمايدىغان ئېلېمېنتلاردىن ياسالغان تىزىملىك گۇرۇپپىلىرىنىڭ چېكىش <li>ياكى <div>چېكىش ھەققى بىلەن تەمىنلىمەسلىكىگە كاپالەتلىك قىلىمىز.

بۇ يەردە ئۆلچەملىك دەرسلەرنى ئىشلەتمەسلىككە.btn كاپالەتلىك قىلىڭ .

نۆۋەتتىكى ئۇلىنىش تۈرى ئىككىنچى ئۇلىنىش تۈرى ئۈچىنچى ئۇلىنىش تۈرى تۆتىنچى ئۇلىنىش تۈرى چەكلەنگەن ئۇلىنىش تۈرى

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

S ئارقىلىق ، سىنىپنىڭ ئورنىغا خاسلىقتىن <button>پايدىلانسىڭىز بولىدۇ . كىشىنى ئەپسۇسلاندۇرىدىغىنى ، s چەكلەنگەن خاسلىقنى قوللىمايدۇ.disabled.disabled<a>

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Flush

.list-group-flushبىر قىسىم چېگرا ۋە يۇمىلاق بۇلۇڭلارنى چىقىرىپ تاشلاپ ، تىزىملىك گۇرۇپپىسىنىڭ تۈرلىرىنى ئانا قاچىدا (مەسىلەن كارتا) كۆرسىتىدۇ .

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر
تۆتىنچى تۈر
بەشىنچى

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

توغرىسىغا

.list-group-horizontalتىزىملىك گۇرۇپپىسىنىڭ تۈرلىرىنىڭ ئورۇنلاشتۇرۇلۇشىنى بارلىق بۆلەكلەردىن توغرىسىغا توغرىسىغا توغرىلاڭ . ئۇنىڭدىن باشقا ، ئىنكاس بۆلىكىنى تاللاڭ ، .list-group-horizontal-{sm|md|lg|xl}بۇ بۆلەكتىن باشلاپ تىزىملىك گۇرۇپپىسىنى توغرىسىغا توغرىلاڭ min-width. ھازىر گورىزونتال تىزىملىك گۇرۇپپىلىرىنى يۇمىلاق تىزىملىك گۇرۇپپىلىرى بىلەن بىرلەشتۈرگىلى بولمايدۇ.

ProTip: توغرىسىغا تەڭ كەڭلىكتىكى تىزىملىك گۇرۇپپىسىنىڭ تۈرلىرىنى خالامسىز؟ .flex-fillھەر بىر گۇرۇپپا گۇرۇپپا تۈرىگە قوشۇڭ .

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

مەزمۇن دەرسلىرى

مەزمۇن خاراكتېرلىك دەرسلەرنى ئىشلىتىپ ، دۆلەت ئارقا كۆرۈنۈشى ۋە رەڭگىدىكى تۈرلەرنى رەتلەڭ.

ئاددىي سۈكۈتتىكى تىزىملىك گۇرۇپپا تۈرى
ئاددىي بىر دەسلەپكى تىزىملىك گۇرۇپپىسىنىڭ تۈرى
ئاددىي ئىككىلەمچى گۇرۇپپا تۈرى
ئاددىي مۇۋەپپەقىيەت تىزىملىكى گۇرۇپپا تۈرى
ئاددىي خەتەر تىزىملىكى گۇرۇپپا تۈرى
ئاددىي ئاگاھلاندۇرۇش تىزىملىكى گۇرۇپپا تۈرى
ئاددىي ئۇچۇر تىزىملىكى گۇرۇپپا تۈرى
ئاددىي يورۇقلۇق تىزىملىكى گۇرۇپپا تۈرى
ئاددىي قاراڭغۇ تىزىملىك گۇرۇپپىسىنىڭ تۈرى

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

مەزمۇن دەرسلىرىمۇ ئىشلەيدۇ .list-group-item-action. ئالدىنقى مىسالدا يوق بۇ يەردىكى hover ئۇسلۇبىنىڭ قوشۇلۇشىغا دىققەت قىلىڭ. دۆلەت قوللايدۇ .active. ئۇنى ئىشلىتىڭ ، مەزمۇن تىزىملىكى گۇرۇپپا تۈرىدىكى ئاكتىپ تاللاشنى كۆرسىتىدۇ.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش

رەڭ ئىشلىتىش ئارقىلىق مەنە قوشۇش پەقەت كۆرۈنۈشلۈك كۆرسەتكۈچ بىلەن تەمىنلەيدۇ ، بۇ ئېكران تېخنىكىلىرىغا ئوخشاش ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە يەتكۈزۈلمەيدۇ. رەڭ بىلەن ئىپادىلەنگەن ئۇچۇرنىڭ مەزمۇننىڭ ئۆزىدىن ئېنىق بولۇشىغا كاپالەتلىك قىلىڭ (مەسىلەن كۆرۈنگەن تېكىست) ، ياكى باشقا ئۇسۇللار ئارقىلىق ئۆز ئىچىگە ئېلىنغان ، مەسىلەن .sr-onlyدەرسكە يوشۇرۇنغان قوشۇمچە تېكىست دېگەندەك.

بەلگە بىلەن

ھەر قانداق تىزىملىك گۇرۇپپىسىنىڭ تۈرلىرىگە بەلگە قوشۇڭ ، بەزى ئاممىۋى مۇلازىمەتلەرنىڭ ياردىمىدە ئوقۇلمىغان سان ، پائالىيەت ۋە باشقىلارنى كۆرسىتىدۇ .

تىزىملىك تۈرى14
ئىككىنچى تىزىملىك تۈرى2
ئۈچىنچى تىزىملىك تۈرى1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

خاس مەزمۇن

Flexbox قورالىنىڭ ياردىمىدە ، تۆۋەندىكى HTML غا ئۇلانغان تىزىملىك گۇرۇپپىلىرىغا ئاساسەن HTML نى قوشۇڭ .

گۇرۇپپا تۈر ماۋزۇسىنى تىزىڭ

3 days ago

بىر ئابزاستىكى بەزى ئورۇن ئىگىلىرى.

يەنە بىر قىسىم كىچىك بېسىش.

گۇرۇپپا تۈر ماۋزۇسىنى تىزىڭ

3 days ago

بىر ئابزاستىكى بەزى ئورۇن ئىگىلىرى.

يەنە بەزىلىرى كىچىك بېسىلىپ قالدى.

گۇرۇپپا تۈر ماۋزۇسىنى تىزىڭ

3 days ago

بىر ئابزاستىكى بەزى ئورۇن ئىگىلىرى.

يەنە بەزىلىرى كىچىك بېسىلىپ قالدى.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

JavaScript ھەرىكىتى

بەتكۈچ JavaScript قىستۇرمىسىنى ئىشلىتىڭ - ئۇنى ئايرىم ياكى تۈزۈلگەن bootstrap.jsھۆججەت ئارقىلىق ئۆز ئىچىگە ئالىدۇ - تىزىملىك گۇرۇپپىمىزنى كېڭەيتىپ ، يەرلىك مەزمۇنلارنىڭ جەدۋەل تاختىسىنى ھاسىل قىلىڭ.

ئۆي ئارخىپ ئۇچۇرلار تەڭشەك

«ئۆي» گە مۇناسىۋەتلىك بىر ئابزاس مەزمۇنى. يەنە بىر قىسىم مەزمۇنلار ، بۇ بەتكۈچ تاختىسىنى تولدۇرۇش ۋە تولدۇرۇش ئۈچۈنلا ئىشلىتىلىدۇ. ئىشلەپچىقىرىشتا ، ئېنىقكى بۇ يەردە تېخىمۇ كۆپ ھەقىقىي مەزمۇنغا ئىگە بولالايسىز. پەقەت تېكىستلا ئەمەس. ئۇ ھەر قانداق ئىش بولۇشى مۇمكىن. تېكىست ، رەسىم ، شەكىل.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

سانلىق مەلۇمات خاسلىقىنى ئىشلىتىش

سىز پەقەت JavaScript نى يازماي تۇرۇپلا بىر گۇرۇپپا گۇرۇپپا يول باشلاشنى قوزغىتالايسىز data-toggle="list". بۇ سانلىق مەلۇمات خاسلىقىنى ئىشلىتىڭ .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

JavaScript ئارقىلىق

JavaScript ئارقىلىق جەدۋەل جەدۋىلىنى قوزغىتىڭ (ھەر بىر تىزىملىك تۈرىنى ئايرىم قوزغىتىش كېرەك):

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

يەككە تىزىملىك تۈرىنى بىر قانچە خىل ئۇسۇلدا قوزغىتالايسىز:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

سۇس ئۈنۈم

بەتكۈچ تاختىسىنىڭ سۇسلىشى ئۈچۈن ، .fadeھەر بىرىگە قوشۇڭ .tab-pane. بىرىنچى بەتكۈچ تاختىسىمۇ .showدەسلەپكى مەزمۇننى كۆرۈنۈشى كېرەك.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

Methods

$ (). بەتكۈچ

تىزىملىك تۈرى ئېلېمېنتى ۋە مەزمۇن قاچىسىنى قوزغىتىدۇ. بەتكۈچتە DOM دىكى قاچا تۈگۈنى data-targetياكى نىشانلانغان بولۇشى كېرەك.href

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab ('show')

بېرىلگەن تىزىملىك تۈرىنى تاللايدۇ ۋە مۇناسىۋەتلىك تاختىنى كۆرسىتىدۇ. ئىلگىرى تاللانغان باشقا تىزىملىك تۈرلىرى تاللانمايدۇ ۋە ئۇنىڭغا مۇناسىۋەتلىك كۆزنەك يوشۇرۇنغان. بەتكۈچ تاختىسى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن تېلېفون ئۇرغۇچىغا قايتىدۇ (مەسىلەن ، shown.bs.tabۋەقە يۈز بېرىشتىن بۇرۇن).

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

Events

يېڭى بەتكۈچنى كۆرسەتكەندە ، ۋەقەلەر تۆۋەندىكى تەرتىپ بويىچە ئوت ئالىدۇ:

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`نىشانلاڭ.

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})