Source

የዝርዝር ቡድን

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

መሰረታዊ ምሳሌ

በጣም መሠረታዊው የዝርዝር ቡድን ከዝርዝር እቃዎች እና ትክክለኛ ክፍሎች ጋር ያልተያዘ ዝርዝር ነው. በእሱ ላይ በሚቀጥሉት አማራጮች ወይም እንደ አስፈላጊነቱ በራስዎ CSS ይገንቡ።

  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
  • Porta ac consectetur ac
  • Vestibulum እና eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ንቁ እቃዎች

የአሁኑን ገባሪ ምርጫ ለማመልከት ወደ .activeአክል ።.list-group-item

  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
  • Porta ac consectetur ac
  • Vestibulum እና eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

የተሰናከሉ እቃዎች

የተሰናከለ ሆኖ እንዲታይ.disabled ወደ አክል ። አንዳንድ አባላቶች ያላቸው የጠቅ ክስተቶቻቸውን (ለምሳሌ አገናኞችን) ሙሉ ለሙሉ ለማሰናከል ብጁ ጃቫስክሪፕት እንደሚያስፈልጋቸው ልብ ይበሉ።.list-group-item.disabled

  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
  • Porta ac consectetur ac
  • Vestibulum እና eros
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

በ s፣ እንዲሁም ከክፍል ይልቅ ባህሪውን <button>መጠቀም ይችላሉ ። በሚያሳዝን ሁኔታ፣ የአካል ጉዳተኞችን ባህሪ አይደግፉም።disabled.disabled<a>

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

ማጠብ

.list-group-flushየቡድን ንጥሎችን ከዳር እስከ ዳር በወላጅ መያዣ (ለምሳሌ ካርዶች) ለማቅረብ አንዳንድ ድንበሮችን እና የተጠጋጋ ማዕዘኖችን ለማስወገድ ያክሉ ።

  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
  • Porta ac consectetur ac
  • Vestibulum እና eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

አግድም

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

ፕሮቲፕ ፡ በአግድም ሲሆኑ የእኩል ስፋት ዝርዝር የቡድን እቃዎች ይፈልጋሉ? .flex-fillወደ እያንዳንዱ የዝርዝር ቡድን ንጥል ያክሉ ።

  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

አውዳዊ ክፍሎች

ሁኔታዊ ዳራ እና ቀለም ያላቸውን የዝርዝር ዝርዝሮችን ለመቅረጽ አውድ ክፍሎችን ተጠቀም።

  • Dapibus ac facilisis in
  • ቀላል ዋና ዝርዝር ቡድን ንጥል
  • ቀላል ሁለተኛ ደረጃ ዝርዝር ቡድን ንጥል
  • ቀላል የስኬት ዝርዝር የቡድን ንጥል
  • ቀላል የአደጋ ዝርዝር ቡድን ንጥል
  • ቀላል የማስጠንቀቂያ ዝርዝር የቡድን ንጥል
  • ቀላል የመረጃ ዝርዝር የቡድን ንጥል ነገር
  • ቀላል የብርሃን ዝርዝር የቡድን ንጥል
  • ቀላል የጨለማ ዝርዝር ቡድን ንጥል
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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">Dapibus ac facilisis in</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ከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።

ባጃጆች ጋር

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

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • ሞርቢ ሊዮ ሪስ1
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

ብጁ ይዘት

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

<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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

የጃቫስክሪፕት ባህሪ

ትር ጃቫ ስክሪፕት ተሰኪን ተጠቀም - በተናጥል ወይም bootstrap.jsበተጠናቀረ ፋይል በኩል - የዝርዝር ቡድናችንን ለማራዘም የአካባቢያዊ ይዘቶችን ሊታዩ የሚችሉ ንጣፎችን ለመፍጠር።

<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

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

በጃቫስክሪፕት በኩል

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

$('#myList a').on('click', function (e) {
  e.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>

ዘዴዎች

$() ትር

የዝርዝር ንጥል ነገር እና የይዘት መያዣን ያነቃል። ትር በ 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>

.ታብ('አሳይ')

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

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

ክስተቶች

አዲስ ትር ሲያሳዩ ክስተቶቹ በሚከተለው ቅደም ተከተል ይቃጠላሉ፡

  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ክስተቶቹ አይባረሩም።

የክስተት አይነት መግለጫ
አሳይ.bs.tab ይህ ክስተት በትር ትዕይንት ላይ ይቃጠላል፣ ነገር ግን አዲሱ ትር ከመታየቱ በፊት። event.targetገባሪውን ትር እና event.relatedTargetየቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
የሚታየው.bs.tab ይህ ክስተት ትር ከታየ በኋላ በትብ ትዕይንት ላይ ይቀጣጠላል። event.targetገባሪውን ትር እና event.relatedTargetየቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
ደብቅ.bs.tab ይህ ክስተት የሚቀጣጠለው አዲስ ትር በሚታይበት ጊዜ ነው (እና ስለዚህ የቀደመው ገቢር ትር መደበቅ አለበት)። እንደቅደም ተከተላቸው የአሁኑን ገቢር ትር እና አዲሱን በቅርቡ የሚሠራውን ትር ይጠቀሙ event.targetእና ለማነጣጠር።event.relatedTarget
የተደበቀ.bs.tab ይህ ክስተት የሚቀጣጠለው አዲስ ትር ከታየ በኋላ ነው (እና ስለዚህ ቀዳሚው ንቁ ትር ተደብቋል)። የቀደመውን ገባሪ ትር እና አዲሱን ገባሪ ትር በቅደም ተከተል ይጠቀሙ event.targetእና event.relatedTargetለማነጣጠር።
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})