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

በማንዣበብ፣ በአካል ጉዳተኞች እና በንቁ ግዛቶች ሊተገበሩ የሚችሉ የዝርዝር ዝርዝሮችን ለመፍጠር s <a>ወይም s ይጠቀሙ ። መስተጋብራዊ ካልሆኑ አካላት (እንደ s ወይም ዎች ያሉ) የተሰሩ የዝርዝር ቡድኖች አንድ ጠቅታ እንደማይሰጡ ለማረጋገጥ እነዚህን የውሸት ክፍሎችን እንለያቸዋለን።<button>.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">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>

አውዳዊ ክፍሎች

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

  • 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">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a 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">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a 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 flex-column align-items-start 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 flex-column align-items-start">
    <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 flex-column align-items-start">
    <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
})