ዝርዝር ጉጅለ

ዝርዝር ጉጅለታት ንተኸታታሊ ትሕዝቶ ንምርኣይ ተዓጻጻፍን ሓያልን ባእታ እዩ። ዳርጋ ዝኾነ ኣብ ውሽጢ ዘሎ ትሕዝቶ ንምድጋፍ ኣዐርዮምን ኣስፍሕዎምን።

መሰረታዊ ኣብነት

እቲ ኣዝዩ መሰረታዊ ዝኾነ ዝርዝር ጉጅለ፡ ዝርዝር ነገራትን ግቡእ ክፍልታትን ዘለዎ ዘይተሰርዐ ዝርዝር እዩ። ኣብ ልዕሊኡ በቶም ዝስዕቡ ኣማራጺታት ምህናጽ፣ ወይ ከም ኣድላይነቱ ብናይ ገዛእ ርእስኻ 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.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 ናይ ዝርዝር ጉጅለ ነገራት ምስ ሆቨር፣ disabledን ንጡፋትን ኩነታት ምፍጣር ። ነዞም ስውር-ክፍልታት ንፈላልዮም፡ ብዘይ መስተጋብራዊ ባእታታት (ከም <li>s ወይ <div>s) ዝተሰርሑ ናይ ዝርዝር ጉጅለታት ንሓደ ጠውቂ ወይ ምጥዋይ ዓቕሚ ከምዘይህቡ ንምርግጋጽ።

ኣብዚ ነቶም መደበኛ .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>

ፍላሽ ምግባር

.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. ኣብዚ ኣብቲ ዝሓለፈ ኣብነት ዘይተረኽቡ ቅዲታት ምውሳኽ ኣስተውዕል። መንግስቲ እውን ዝድገፍ እዩ .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 utilities .

ኣርእስቲ ናይ ጉጅለ ኣቕሓ ዝርዝር

ቅድሚ 3 መዓልቲ

ገለ ትሕዝቶታት ቦታ ኣብ ሓደ ሕጡበ-ጽሑፍ።

ገለ ንኣሽቱ ሕትመታት ድማ።

ኣርእስቲ ናይ ጉጅለ ኣቕሓ ዝርዝር

ቅድሚ 3 መዓልቲ

ገለ ትሕዝቶታት ቦታ ኣብ ሓደ ሕጡበ-ጽሑፍ።

ገለ ድማ ንኣሽቱ ፊደላት ድምጺ ኣልቦ።

ኣርእስቲ ናይ ጉጅለ ኣቕሓ ዝርዝር

ቅድሚ 3 መዓልቲ

ገለ ትሕዝቶታት ቦታ ኣብ ሓደ ሕጡበ-ጽሑፍ።

ገለ ድማ ንኣሽቱ ፊደላት ድምጺ ኣልቦ።

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

ባህሪ ጃቫስክሪፕት።

ነቲ ትብ ጃቫስክሪፕት ፕላግ-ኢን ተጠቐም-ብውልቂ ወይ ብመንገዲ እቲ ዝተጠርነፈ 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>

ናይ ዳታ ባህርያት ምጥቃም

ዝኾነ ጃቫስክሪፕት ከይጸሓፍካ ናይ ዝርዝር ጉጅለ ምድህሳስ ብቐሊሉ ብምግላጽ 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>

ብመንገዲ ጃቫስክሪፕት።

ብመንገዲ ጃቫስክሪፕት ኣቢልካ ናይ tabbable ዝርዝር ኣቕሓ ኣንቅሕ (ነፍሲ ወከፍ ናይ ዝርዝር ኣቕሓ ብውልቂ ክነጥፍ ኣለዎ)፤

$('#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>

ኣገባባት

$().tab ዝብል ጽሑፍ ኣሎ።

ንሓደ ናይ ዝርዝር ኣቕሓ ባእታን ትሕዝቶ መትሓዚን የነቓቕሕ። Tab ኣብ DOM ወይ a 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('ኣርእይ')

ነቲ ዝተዋህበ ናይ ዝርዝር ኣቕሓ ይመርጽ እሞ ምስኡ ዝተኣሳሰር ሸነኽ የርኢ። ዝኾነ ካልእ ኣቐዲሙ ዝተመርጸ ናይ ዝርዝር ኣቕሓ ዘይተመርጸ ይኸውን እሞ ምስኡ ዝተኣሳሰር መስኮት ይሕባእ። ቅድሚ እቲ ትብ መስኮት ብጭቡጥ ምርኣይ (ንኣብነት ቅድሚ እቲ shown.bs.tabፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።

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

ፍጻሜታት

ሓድሽ ትብ ኣብ እተርኢ እዋን፡ እቶም ፍጻመታት በዚ ዝስዕብ ቅደም ተኸተል ይትኩሱ፤

hide.bs.tab(ኣብቲ ሕጂ ዘሎ ንጡፍ ትብ)
show.bs.tab(ኣብቲ ክረአ ዘለዎ ትብ)
hidden.bs.tab(ኣብቲ ዝሓለፈ ንጡፍ ትብ፡ ከምቲ ናይቲ hide.bs.tabፍጻመ)
shown.bs.tab(ኣብቲ ሓድሽ-ንጡፍ ገና ዝተራእየ ትብ፡ ከምቲ ናይቲ show.bs.tabፍጻመ)

ድሮ ንጡፍ ዝኾነ ትብ እንተዘይኮይኑ፡ እቲ hide.bs.taband hidden.bs.tabevents ኣይክተኮስን እዩ።

ዓይነት ፍጻመ	መግለፂ
show.bs.tab ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ ኣብ tab show ይትኩስ፣ ግን ቅድሚ እቲ ሓድሽ tab ምርኣይ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ `event.target`ንምግባርን ተጠቐም ።`event.relatedTarget`
shown.bs.tab ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ ድሕሪ ሓደ ትብ ምርኣይ ኣብ tab show ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ `event.target`ንምግባርን ተጠቐም ።`event.relatedTarget`
hide.bs.tab ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ ሓድሽ ትብ ክረአ ከሎ ይትኩስ (በዚ ኸኣ እቲ ዝሓለፈ ንጡፍ ትብ ክሕባእ ኣለዎ)። ነቲ ሕጂ ዘሎ ንጡፍ ትብን ነቲ ኣብ ቀረባ እዋን ንጡፍ ዝኸውን ሓድሽ ትብን ብቕደም ተኸተል ዕላማ `event.target`ንምግባርን ተጠቐም ።`event.relatedTarget`
ሕቡእ.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
})