ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ዝርዝር ጉጅለ

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

ኣብዚ ገጽ

መሰረታዊ ኣብነት

እቲ ኣዝዩ መሰረታዊ ዝኾነ ዝርዝር ጉጅለ፡ ዝርዝር ነገራትን ግቡእ ክፍልታትን ዘለዎ ዘይተሰርዐ ዝርዝር እዩ። ኣብ ልዕሊኡ በቶም ዝስዕቡ ኣማራጺታት ምህናጽ፣ ወይ ከም ኣድላይነቱ ብናይ ገዛእ ርእስኻ CSS።

  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
  • ራብዓይ ንጥረ ነገር
  • ሓሙሻይ ድማ
html ዝብል ጽሑፍ ኣሎ። 
<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

  • ንጡፍ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
  • ራብዓይ ንጥረ ነገር
  • ሓሙሻይ ድማ
html ዝብል ጽሑፍ ኣሎ። 
<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

  • ስንኩል ዝኾነ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
  • ራብዓይ ንጥረ ነገር
  • ሓሙሻይ ድማ
html ዝብል ጽሑፍ ኣሎ። 
<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ክፍልታት ዘይምጥቃምካ ኣረጋግጽ ።

እቲ ናይ ሕጂ ሊንክ ኣርእስቲ ካልኣይ ናይ ሊንክ ኣቕሓ ሳልሳይ ናይ ሊንክ ኣቕሓ ራብዓይ ሊንክ ኣርእስቲ ዝተሰናኸለ ናይ መላግቦ ኣቕሓ
html ዝብል ጽሑፍ ኣሎ። 
<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>

html ዝብል ጽሑፍ ኣሎ። 
<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 button 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ገለ ዶባት ንምእላይን ክቡባት ኩርናዓትን ዝርዝር ጉጅለ ነገራት ካብ ወሰን ናብ ወሰን ኣብ ወላዲ መትሓዚ (ንኣብነት፡ ካርድታት) ንምቕራብ ምውሳኽ ።

  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
  • ራብዓይ ንጥረ ነገር
  • ሓሙሻይ ድማ
html ዝብል ጽሑፍ ኣሎ። 
<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

  1. ናይ ዝርዝር ኣቕሓ
  2. ናይ ዝርዝር ኣቕሓ
  3. ናይ ዝርዝር ኣቕሓ
html ዝብል ጽሑፍ ኣሎ። 
<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>

እዚኦም ምስ ብሕታዊ ትሕዝቶ እውን ብሉጽ ስራሕ ይሰርሑ።

  1. ንኡስ ኣርእስቲ
    ትሕዝቶ ንዝርዝር ኣቕሓ
    14
  2. ንኡስ ኣርእስቲ
    ትሕዝቶ ንዝርዝር ኣቕሓ
    14
  3. ንኡስ ኣርእስቲ
    ትሕዝቶ ንዝርዝር ኣቕሓ
    14
html ዝብል ጽሑፍ ኣሎ። 
<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። ኣብዚ እዋን እዚ ኣግማድ ዝርዝር ጉጅለታት ምስ ፍሉሽ ዝርዝር ጉጅለታት ክውሃሃዱ ኣይክእሉን።

ProTip: ማዕረ ስፍሓት ዘለዎም ናይ ዝርዝር ጉጅለ ነገራት ልኡም ኣብ ዝኾኑሉ እዋን ትደሊ? ኣብ ነፍሲ ወከፍ ዝርዝር ጉጅለ ኣቕሓ ወስኹ .flex-fill።

  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
html ዝብ�� ጽሑፍ ኣሎ። 
<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>

ዓውደ-ጽሑፋዊ ክፍልታት

ቅዲ ዝርዝር ዘለዎም ነገራት ምስ ኩነታት ዘለዎ ድሕረ ባይታን ሕብርን ንምዝርዛር ዓውደ-ጽሑፋዊ ክፍልታት ተጠቐም።

  • ቀሊል ነባሪ ዝርዝር ጉጅለ ኣቕሓ
  • ቀሊል ቀዳማይ ዝርዝር ጉጅለ ኣቕሓ
  • ቀሊል ካልኣይ ደረጃ ዝርዝር ጉጅለ ኣቕሓ
  • ቀሊል ናይ ዓወት ዝርዝር ጉጅለ ኣቕሓ
  • ቀሊል ናይ ሓደጋ ዝርዝር ጉጅለ ኣቕሓ
  • ቀሊል ናይ መጠንቀቕታ ዝርዝር ጉጅለ ኣቕሓ
  • ቀሊል ናይ ሓበሬታ ዝርዝር ጉጅለ ኣቕሓ
  • ቀሊል ናይ ብርሃን ዝርዝር ጉጅለ ኣቕሓ
  • ቀሊል ጸሊም ዝርዝር ጉጅለ ኣቕሓ
html ዝብል ጽሑፍ ኣሎ። 
<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፤ ኣብ ሓደ ዓውደ-ጽሑፍ ዝርዝር ጉጅለ ኣቕሓ ንጡፍ ምርጫ ንምምልካት ተግባራዊ ግበሮ።

ቀሊል ነባሪ ዝርዝር ጉጅለ ኣቕሓ ቀሊል ቀዳማይ ዝርዝር ጉጅለ ኣቕሓ ቀሊል ካልኣይ ደረጃ ዝርዝር ጉጅለ ኣቕሓ ቀሊል ናይ ዓወት ዝርዝር ጉጅለ ኣቕሓ ቀሊል ናይ ሓደጋ ዝርዝር ጉጅለ ኣቕሓ ቀሊል ናይ መጠንቀቕታ ዝርዝር ጉጅለ ኣቕሓ ቀሊል ናይ ሓበሬታ ዝርዝር ጉጅለ ኣቕሓ ቀሊል ናይ ብርሃን ዝርዝር ጉጅለ ኣቕሓ ቀሊል ጸሊም ዝርዝር ጉጅለ ኣቕሓ
html ዝብል ጽሑፍ ኣሎ። 
<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.
html ዝብል ጽሑፍ ኣሎ። 
<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 utilities .

ኣርእስቲ ናይ ጉጅለ ኣቕሓ ዝርዝር
ቅድሚ 3 መዓልቲ

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

ገለ ንኣሽቱ ሕትመታት ድማ።
ኣርእስቲ ናይ ጉጅለ ኣቕሓ ዝርዝር
ቅድሚ 3 መዓልቲ

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

ገለ ድማ ንኣሽቱ ፊደላት ድምጺ ኣልቦ።
ኣርእስቲ ናይ ጉጅለ ኣቕሓ ዝርዝር
ቅድሚ 3 መዓልቲ

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

ገለ ድማ ንኣሽቱ ፊደላት ድምጺ ኣልቦ።
html ዝብል ጽሑፍ ኣሎ። 
<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ባህርን ዋጋን ከተካትት ኣይትረስዕ።

html ዝብል ጽሑፍ ኣሎ። 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>
html ዝብል ጽሑፍ ኣሎ። 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

ምሉእ ዝርዝር ጉጅለ ኣቕሓ ንኽጥወቕ .stretched-linkኣብ s ክትጥቀመሉ ትኽእል ኢኻ ።<label>

html ዝብል ጽሑፍ ኣሎ። 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ Bootstrap ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ ዝርዝር ጉጅለታት ሕጂ .list-groupንዝተዓጻጸፈ ናይ ሓቂ ግዜ ምምዕርራይ ከባብያዊ CSS ተለዋዋጢ on ይጥቀሙ። ክብርታት ናይ CSS ተቐያየርቲ ብመንገዲ Sass ይቕመጡ፣ ስለዚ Sass ምምዕርራይ ጌና ይድገፍ እዩ፣ ንሱ እውን።

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

ሳስ ተለዋዋጢ ረቛሒታት

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

ሚክሲን ዝበሃሉ ምዃኖም ይፍለጥ

ምስ ተደሚሩ ን s ዝኸውን ዓውደ-ጽሑፋዊ ፍልልያት ክፍልታት$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>

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

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

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

ንውልቃዊ ዝርዝር ኣቕሓ ብብዙሕ መንገድታት ከተነቓቕሖ ትኽእል ኢኻ፤

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

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

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .

ንዝያዳ ሓበሬታ ኣብ ሰነድ ጃቫስክሪፕትና ርአ ።

ትሕዝቶኻ ከም ናይ ትብ ባእታ የነቓቕሖ።

ምስቲ ሃናጺ ናይ ትብ ምሳሌ ክትፈጥር ትኽእል ኢኻ፣ ንኣብነት፤

const bsTab = new bootstrap.Tab('#myTab')
ሜላ መግለፂ
dispose ናይ ሓደ ባእታ ትብ የጥፍኦ።
getInstance ምስ ሓደ DOM element ዝተኣሳሰር tab instance ክትረክብ ዘኽእለካ Static method፣ ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ: bootstrap.Tab.getInstance(element).
getOrCreateInstance ምስ ሓደ DOM element ዝተኣሳሰር tab instance ዝመልስ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ዝፈጥር ስታትቲክ ሜላ። ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ bootstrap.Tab.getOrCreateInstance(element)፡ .
show ነቲ ዝተዋህበ ትብ ይመርጽ እሞ ምስኡ ዝተኣሳሰር ሸነኽ የርኢ። ዝኾነ ካልእ ኣቐዲሙ ዝተመርጸ ትብ ዘይተመርጸ ይኸውን እሞ ምስኡ ዝተኣሳሰር ሸነኽ ይሕባእ። ቅድሚ እቲ ትብ ፓን ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ shown.bs.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.taband hidden.bs.tabevents ኣይክተኮስን እዩ።

ዓይነት ፍጻመ መግለፂ
hide.bs.tab እዚ ፍጻመ ሓድሽ ትብ ክረአ ከሎ ይትኩስ (በዚ ኸኣ እቲ ዝሓለፈ ንጡፍ ትብ ክሕባእ ኣለዎ)። ነቲ ሕጂ ዘሎ ንጡፍ ትብን ነቲ ኣብ ቀረባ እዋን ንጡፍ ዝኸውን ሓድሽ ትብን ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
hidden.bs.tab እዚ ፍጻመ ሓድሽ ትብ ምስ ተራእየ ይትኩስ (በዚ ኸኣ እቲ ዝሓለፈ ንጡፍ ትብ ይሕባእ)። ነቲ ዝሓለፈ ንጡፍ ትብን ነቲ ሓድሽ ንጡፍ ትብን ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
show.bs.tab እዚ ፍጻመ ኣብ tab show ይትኩስ፣ ግን ቅድሚ እቲ ሓድሽ tab ምርኣይ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
shown.bs.tab እዚ ፍጻመ ድሕሪ ሓደ ትብ ምርኣይ ኣብ tab show ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget 
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})