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ክፍሎችን አለመጠቀምዎን እርግጠኛ ይሁኑ .

Cras justo odio Dapibus ac facilisis in ሞርቢ ሊዮ ሪስ Porta ac consectetur ac Vestibulum እና eros 
<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">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ግዛት ነው; በአውድ ዝርዝር የቡድን ንጥል ላይ ንቁ ምርጫን ለማመልከት ይተግብሩ።

Dapibus ac facilisis in ቀላል ዋና ዝርዝር ቡድን ንጥል ቀላል ሁለተኛ ደረጃ ዝርዝር ቡድን ንጥል ቀላል የስኬት ዝርዝር የቡድን ንጥል ቀላል የአደጋ ዝርዝር ቡድን ንጥል ቀላል የማስጠንቀቂያ ዝርዝር የቡድን ንጥል ቀላል የመረጃ ዝርዝር የቡድን ንጥል ነገር ቀላል የብርሃን ዝርዝር የቡድን ንጥል ቀላል የጨለማ ዝርዝር ቡድን ንጥል 
<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 ያክሉ ።

የዝርዝር ቡድን ንጥል ርዕስ
ከ 3 ቀናት በፊት

Donec id elit non mi porta gravida እና eget metus። Maecenas sed diam eget risus varius blandit.

Donec መታወቂያ elit non mi porta
የዝርዝር ቡድን ንጥል ርዕስ
ከ 3 ቀናት በፊት

Donec id elit non mi porta gravida እና eget metus። Maecenas sed diam eget risus varius blandit.

Donec መታወቂያ elit non mi porta
የዝርዝር ቡድን ንጥል ርዕስ
ከ 3 ቀናት በፊት

Donec id elit non mi porta gravida እና eget metus። Maecenas sed diam eget risus varius blandit.

Donec መታወቂያ elit non mi porta 
<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በተጠናቀረ ፋይል በኩል - የዝርዝር ቡድናችንን ለማራዘም የአካባቢያዊ ይዘቶችን ሊታዩ የሚችሉ ንጣፎችን ለመፍጠር።

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. ቮልፕታቴ ዴሴሩንት ሲት ሱንት ኒሲ አሊኳ ፉጊያት ፕሮኢደንት ኢአ ውት። Mollit Voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incidident consectetur culpa aliquip eiusmod dolor. አኒም አድ ሎሬም አሊኳ ኢን ኩፒዳታት ኒሲ ኢኒም ኢዩ ኖስትሩድ ዶ አሊኩፕ ቪኒያም ሚኒም።

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

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