گروپی لیست

گروپەکانی لیست پێکهاتەیەکی نەرم و بەهێزن بۆ پیشاندانی زنجیرەیەک ناوەڕۆک. دەستکاری بکە و درێژیان بکە بۆ پشتگیریکردن لە تەنها نزیکەی هەر ناوەڕۆکێک لە ناوەوە.

نموونەی بنەڕەتی

بنەڕەتیترین گروپی لیست لیستێکی بێ ڕێکخستنە کە بابەتە لیستەکان و پۆلە گونجاوەکانی تێدایە. لەسەری بنیات بنێ بەو بژاردانەی کە لە دوای ئەوە دێن، یان بە 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بۆ a .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بۆ a .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>بۆ دروستکردنی شتەکانی گروپی لیستی کردار بە هۆڤەر، لەکارخراو و باری چالاک بە زیادکردنی .list-group-item-action. ئێمە ئەم پۆلە ساختانە جیا دەکەینەوە بۆ ئەوەی دڵنیا بین لەوەی کە گروپەکانی لیست کە لە توخمە ناکارلێککارەکان دروستکراون (وەک <li>s یان <div>s) توانای کلیککردن یان پەنجەدانێک دابین ناکەن.

دڵنیابە لێرەدا پۆلە ستانداردەکان بەکارنەهێنە.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>

هەروەها بە <button>s دەتوانیت disabledلەبری .disabledپۆلەکە سوود لە تایبەتمەندییەکە وەربگریت. بەداخەوە <a>s پشتگیری لە تایبەتمەندی لەکارخراو ناکات.

<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-horizontalبۆ گۆڕینی شێوازی بابەتە گروپەکانی لیست لە ڕاستەوە بۆ ئاسۆیی لە سەرانسەری هەموو خاڵەکانی شکاندن. یانیش، جۆرێکی وەڵامدەرەوە هەڵبژێرە .list-group-horizontal-{sm|md|lg|xl}بۆ ئەوەی گروپێکی لیست بە ئاسۆیی بکەیت کە لەو خاڵە شکاندنەوە دەست پێدەکات min-width. لە ئێستادا گروپەکانی لیستی ئاسۆیی ناتوانرێت لەگەڵ گروپەکانی لیستی فڵش تێکەڵ بکرێت.

ProTip: دەتەوێت بابەتی گروپی لیستی پانایی یەکسان کاتێک ئاسۆیی بێت؟ زیاد بکە .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">
  <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>

گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان

بەکارهێنانی ڕەنگ بۆ زیادکردنی مانا تەنیا ئاماژەیەکی بینراو دەدات، کە ناگەیەنرێتە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە. دڵنیابە لەوەی کە ئەو زانیاریانەی کە بە ڕەنگەکە دیاری دەکرێن یان لە خودی ناوەڕۆکەکەوە دیارن (بۆ نموونە دەقی بینراو)، یان لە ڕێگەی ئامرازی بەدیلەوە جێگیر دەکرێن، وەک دەقی زیادە کە لەگەڵ .sr-onlyپۆلەکەدا شاراوەتەوە.

بە نیشانە

زیادکردنی نیشانەکان بۆ هەر بابەتێکی گروپی لیست بۆ پیشاندانی ژمارە نەخوێندراوەکان، چالاکییەکان و زۆر شتی تر بە یارمەتی هەندێک لە سوودمەندەکان .

بابەتی لیستێک14. 14
بابەتی دووەمی لیست2. 2
بڕگەی سێیەمی لیست1. 1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

ناوەڕۆکی تایبەت بەخۆت

نزیکەی هەر HTMLێک لە ناوەوە زیاد بکە، تەنانەت بۆ گروپەکانی لیستی بەستراو وەک ئەوەی خوارەوە، بە یارمەتی سوودمەندییەکانی flexbox .

سەردێڕی بابەتی گروپ بنووسە

٣ رۆژ پێش ئێستا

هەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا.

وە هەندێک چاپی بچووک.

سەردێڕی بابەتی گروپ بنووسە

٣ رۆژ پێش ئێستا

هەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا.

وە هەندێک چاپی بچووکی بێدەنگ.

سەردێڕی بابەتی گروپ بنووسە

٣ رۆژ پێش ئێستا

هەندێک ناوەڕۆکی شوێنگرەوە لە بڕگەیەکدا.

وە هەندێک چاپی بچووکی بێدەنگ.

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

<div role="tabpanel">
  <!-- 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>
</div>

لە ڕێگەی جاڤاسکڕێپتەوە

بابەتی لیستی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر بابەتێکی لیستەکە پێویستە بە تاک چالاک بکرێت):

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

شێوازەکان

$().tab

توخمێکی بابەتی لیست و دەفری ناوەڕۆک چالاک دەکات. تاب دەبێت یان گرێیەکی کۆنتێنەر لە 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>

.tab('نیشاندان')

بابەتی لیستی پێدراو هەڵدەبژێرێت و پەنجەرەی پەیوەندیدار پیشان دەدات. هەر بابەتێکی تری لیست کە پێشتر هەڵبژێردرابێت هەڵنەبژێردرابێت و پەنجەرەی پەیوەندیدارەکەی دەشاردرێتەوە. پێش ئەوەی لە ڕاستیدا پەنجەرەی تابەکە پیشان بدرێت دەگەڕێتەوە بۆ بانگکەر (بۆ نموونە پێش ئەوەی shown.bs.tabڕووداوەکە ڕووبدات).

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

ڕووداوەکان

لە کاتی پیشاندانی تابێکی نوێدا، ڕووداوەکان بەم ڕیزبەندییەی خوارەوە ئاگر دەکەون:

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`بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
نیشان دراوە.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 (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})