گروپی لیست

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

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

بنەڕەتیترین گروپی لیست لیستێکی بێ ڕێکخستنە کە بابەتە لیستەکان و پۆلە گونجاوەکانی تێدایە. لەسەری بنیات بنێ بەو بژاردانەی کە لە دوای ئەوە دێن، یان بە CSS ی خۆت بەپێی پێویست.

کراس جوستۆ ئۆدیۆ
داپیبوس ac facilisis لە
مۆربی لیۆ ریسوس
پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
ڤێستیبولوم لە ئیرۆس

<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بۆ a .list-group-itemبۆ ئاماژەدان بە هەڵبژاردەی چالاکی ئێستا.

کراس جوستۆ ئۆدیۆ
داپیبوس ac facilisis لە
مۆربی لیۆ ریسوس
پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
ڤێستیبولوم لە ئیرۆس

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

کراس جوستۆ ئۆدیۆ
داپیبوس ac facilisis لە
مۆربی لیۆ ریسوس
پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
ڤێستیبولوم لە ئیرۆس

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

لینك و دوگمەكان

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

دڵنیابە لێرەدا پۆلە ستانداردەکان بەکارنەهێنە.btn .

کراس جوستۆ ئۆدیۆ داپیبوس ac facilisis لە مۆربی لیۆ ریسوس پۆرتا ئەی سی کۆنسێکتێتور ئەی سی ڤێستیبولوم لە ئیرۆس

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

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

<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بۆ لابردنی هەندێک سنوور و گۆشە گوڵاوەکان بۆ ڕەندەری شتەکانی گروپی لیست لە لێوارەوە بۆ لێوار لە دەفرێکی باوکدا (بۆ نموونە، کارتەکان).

کراس جوستۆ ئۆدیۆ
داپیبوس ac facilisis لە
مۆربی لیۆ ریسوس
پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
ڤێستیبولوم لە ئیرۆس

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

پۆلە کۆنتێکستەکان

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

داپیبوس ac facilisis لە
بابەتی گروپی لیستی سەرەتایی سادە
بابەتی گروپی لیستی لاوەکی سادە
بابەتی گروپی لیستی سەرکەوتنی سادە
بابەتی گروپی لیستی مەترسی سادە
بابەتی گروپی لیستی ئاگادارکردنەوەیەکی سادە
بابەتی گروپی لیستی زانیاری سادە
بابەتی گروپی لیستی ڕووناکی سادە
بابەتی گروپی لیستی تاریکی سادە

<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پۆلەکەدا شاراوەتەوە.

بە نیشانە

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

کراس جوستۆ ئۆدیۆ14. 14
داپیبوس ac facilisis لە2. 2
مۆربی لیۆ ریسوس1. 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>

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

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

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

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

Donec id elit non mi porta gravida لە ئیگێت مێتۆس. مایسیناس سێد دیام ئیگێت ریسوس ڤاریۆس بلاندیت.

Donec id elit نا می پۆرتا.

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

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

Donec id elit non mi porta gravida لە ئیگێت مێتۆس. مایسیناس سێد دیام ئیگێت ریسوس ڤاریۆس بلاندیت.

Donec id elit نا می پۆرتا.

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

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

Donec id elit non mi porta gravida لە ئیگێت مێتۆس. مایسیناس سێد دیام ئیگێت ریسوس ڤاریۆس بلاندیت.

Donec id elit نا می پۆرتا.

<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 چەوری وەرزشکردن لە کاتی هەڵاتن. Voluptate deserunt دانیشتن sunt نیسی ئەلیکوا fugiat proident ea ut. مۆلیت ڤۆڵپتات ریپرێهندێریت ئۆکایکات نیسی و نا کەمترین کات sunt voluptate consectetur وەرزشکردن id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur کولپا ئەلیکویپ ئییوسمۆد دۆلۆر. ئەنیم ئاد لۆرێم ئەلیکوا لە کوپیداتات نیسی ئێنیم ئیو نۆسترۆد دۆ ئەلیکویپ ڤینیام مینیم.

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>

شێوازەکان

$().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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})