የዝርዝር ቡድን

የዝርዝር ቡድኖች ተከታታይ ይዘትን ለማሳየት ተለዋዋጭ እና ኃይለኛ አካል ናቸው። በውስጡ ማንኛውንም ይዘት ለመደገፍ ያሻሽሏቸው እና ያራዝሙ።

በዚህ ገጽ ላይ

መሰረታዊ ምሳሌ

በጣም መሠረታዊው የዝርዝር ቡድን ከዝርዝር እቃዎች እና ትክክለኛ ክፍሎች ጋር ያልተያዘ ዝርዝር ነው. በእሱ ላይ በሚቀጥሉት አማራጮች ወይም እንደ አስፈላጊነቱ በራስዎ 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አክል ።.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 ወደ አክል ። አንዳንድ አባላቶች ያላቸው የጠቅ ክስተቶቻቸውን (ለምሳሌ አገናኞችን) ሙሉ ለሙሉ ለማሰናከል ብጁ ጃቫስክሪፕት እንደሚያስፈልጋቸው ልብ ይበሉ።.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 ወይም 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>መጠቀም ይችላሉ ። በሚያሳዝን ሁኔታ፣ የአካል ጉዳተኞችን ባህሪ አይደግፉም።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-numberedየመቀየሪያ ክፍልን (እና እንደ አማራጭ አንድ አካል ይጠቀሙ) ያክሉ ። <ol>ቁጥሮች በCSS በኩል ይፈጠራሉ (ከ <ol>s ነባሪ የአሳሽ ዘይቤ በተቃራኒ) ለተሻለ የዝርዝር ቡድን ንጥሎች አቀማመጥ እና ለተሻለ ማበጀት ያስችላል።

ቁጥሮች የሚመነጩት በ counter-resetላይ ነው <ol>፣ እና ከዚያም ቅጥ ተዘጋጅተው በ እና ላይ ባለው የውሸት ኤለመንት ::beforeይቀመጣሉ ።<li>counter-incrementcontent

ዝርዝር ንጥል
ዝርዝር ንጥል
ዝርዝር ንጥል

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

እነዚህ በብጁ ይዘትም ጥሩ ይሰራሉ።

ንዑስ ርዕስ
ለዝርዝር ንጥል ይዘት
14
ንዑስ ርዕስ
ለዝርዝር ንጥል ይዘት
14
ንዑስ ርዕስ
ለዝርዝር ንጥል ይዘት
14

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

አግድም

.list-group-horizontalየዝርዝር ቡድን ንጥሎችን አቀማመጥ በሁሉም መግቻ ነጥቦች ላይ ከቋሚ ወደ አግድም ለመቀየር ያክሉ ። .list-group-horizontal-{sm|md|lg|xl|xxl}በአማራጭ፣ የዝርዝር ቡድንን ከዚያ መግቻ ነጥብ ጀምሮ አግድም ለማድረግ ምላሽ ሰጪ ተለዋጭ ይምረጡ min-width። በአሁኑ ጊዜ አግድም ዝርዝር ቡድኖች ከብልጭታ ዝርዝር ቡድኖች ጋር ሊጣመሩ አይችሉም።

ፕሮቲፕ ፡ በአግድም ሲሆኑ የእኩል ስፋት ዝርዝር የቡድን እቃዎች ይፈልጋሉ? .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 list-group-horizontal-xxl">
  <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>

ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ (ለምሳሌ ከሚታየው ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .visually-hiddenከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።

ባጃጆች ጋር

በአንዳንድ መገልገያዎች እገዛ ያልተነበቡ ቆጠራዎችን፣ እንቅስቃሴዎችን እና ሌሎችንም ለማሳየት ባጆችን ወደ ማንኛውም የዝርዝር ቡድን ንጥል ነገር ያክሉ ።

ዝርዝር ንጥል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 bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

ብጁ ይዘት

በ flexbox መገልገያዎች እገዛ ከታች እንዳለው ላሉ የተገናኙ የዝርዝር ቡድኖችም ቢሆን በውስጡ ማንኛውንም HTML ያክሉ ።

የዝርዝር ቡድን ንጥል ርዕስ

ከ 3 ቀናት በፊት

አንዳንድ የቦታ ያዥ ይዘት በአንቀጽ ውስጥ።

እና ትንሽ ህትመት።

የዝርዝር ቡድን ንጥል ርዕስ

ከ 3 ቀናት በፊት

አንዳንድ የቦታ ያዥ ይዘት በአንቀጽ ውስጥ።

እና አንዳንዶቹ ድምጸ-ከል አድርገዋል ትንሽ ህትመት።

የዝርዝር ቡድን ንጥል ርዕስ

ከ 3 ቀናት በፊት

አንዳንድ የቦታ ያዥ ይዘት በአንቀጽ ውስጥ።

እና አንዳንዶቹ ድምጸ-ከል አድርገዋል ትንሽ ህትመት።

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <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ን አመልካች ሳጥኖች እና ሬዲዮዎች በቡድን ዝርዝር ውስጥ ያስቀምጡ እና እንደ አስፈላጊነቱ ያብጁ። ያለ s ሊጠቀሙባቸው ይችላሉ <label>፣ ግን እባክዎን aria-labelለተደራሽነት ባህሪ እና እሴት ማካተትዎን ያስታውሱ።

የመጀመሪያው አመልካች ሳጥን
ሁለተኛ አመልካች ሳጥን
ሦስተኛው አመልካች ሳጥን
አራተኛው አመልካች ሳጥን
አምስተኛው አመልካች ሳጥን

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

<label>እና እንደ ትልቅ የተጠቁ አካባቢዎች ከፈለጉ .list-group-item፣ እርስዎም እንዲሁ ማድረግ ይችላሉ።

የመጀመሪያው አመልካች ሳጥን ሁለተኛ አመልካች ሳጥን ሦስተኛው አመልካች ሳጥን አራተኛው አመልካች ሳጥን አምስተኛው አመልካች ሳጥን

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

ሳስ

ተለዋዋጮች

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

ቅልቅል

ለ ዎች የአውድ ተለዋጭ ክፍሎችን$theme-colors ለማመንጨት ከ ጋር በማጣመር ጥቅም ላይ ይውላል ።.list-group-item

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

ሉፕ

የመቀየሪያ ክፍሎችን ከድብልቅ ጋር የሚያመነጭ ሉፕ list-group-item-variant()።

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

የጃቫስክሪፕት ባህሪ

ትር ጃቫ ስክሪፕት ተሰኪን ተጠቀም - በተናጥል ወይም 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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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>

በጃቫስክሪፕት በኩል

በጃቫ ስክሪፕት ሊታዘር የሚችል የዝርዝር ንጥልን አንቃ (እያንዳንዱ የዝርዝር ንጥል በተናጠል መንቃት አለበት)

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

የግለሰብ ዝርዝር ንጥልን በተለያዩ መንገዶች ማግበር ይችላሉ፡-

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
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">...</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>

ዘዴዎች

constructor

የዝርዝር ንጥል ነገር እና የይዘት መያዣን ያነቃል። ትር በ DOM ውስጥ የእቃ መያዣ መስቀለኛ መንገድ data-bs-targetወይም ኢላማ ማድረግ አለበት።href

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-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>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

አሳይ

የተሰጠውን የዝርዝር ንጥል ይመርጣል እና የተያያዘውን መቃን ያሳያል። ከዚህ ቀደም የተመረጠ ማንኛውም ሌላ የዝርዝር ንጥል ነገር ያልተመረጠ ይሆናል እና ከእሱ ጋር የተያያዘው መቃን ይደበቃል። የትር መቃን በትክክል ከመታየቱ በፊት (ለምሳሌ shown.bs.tabክስተቱ ከመከሰቱ በፊት) ወደ ደዋይ ይመለሳል።

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  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 tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}