Source

گروه لیست

گروه های لیست یک جزء منعطف و قدرتمند برای نمایش یک سری محتوا هستند. آنها را تغییر دهید و گسترش دهید تا تقریباً از هر محتوایی پشتیبانی شود.

مثال اساسی

ابتدایی ترین گروه لیست یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است. با گزینه های بعدی یا در صورت نیاز با CSS خود بر روی آن بسازید.

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربی لئو ریسوس
  • Porta ac consectetur ac
  • دهلیزی در اروس
<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

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربی لئو ریسوس
  • Porta ac consectetur ac
  • دهلیزی در اروس
<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جاوا اسکریپت سفارشی نیز برای غیرفعال کردن رویدادهای کلیکی آنها (مثلاً پیوندها) نیاز دارند.

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربی لئو ریسوس
  • Porta ac consectetur ac
  • دهلیزی در اروس
<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 یا <button>s برای ایجاد موارد گروهی لیست قابل اجرا با حالت شناور، غیرفعال و فعال با افزودن .list-group-item-actionاستفاده کنید. ما این شبه کلاس‌ها را از هم جدا می‌کنیم تا مطمئن شویم گروه‌های فهرست ساخته شده از عناصر غیر تعاملی (مانند <li>s یا <div>s) امکان کلیک یا ضربه را فراهم نمی‌کنند.

مطمئن شوید که از کلاس های استاندارد.btn در اینجا استفاده نکنید .

Cras justo odio Dapibus ac facilisis in موربی لئو ریسوس Porta ac consectetur ac دهلیزی در اروس 
<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کنید تا برخی از حاشیه‌ها و گوشه‌های گرد را حذف کنید تا موارد گروهی فهرست به صورت لبه به لبه در ظرف اصلی (مثلاً کارت‌ها) ارائه شود.

  • Cras justo odio
  • Dapibus ac facilisis in
  • موربی لئو ریسوس
  • Porta ac consectetur ac
  • دهلیزی در اروس
<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دولت پشتیبانی می شود. آن را برای نشان دادن یک انتخاب فعال در یک آیتم گروه فهرست متنی اعمال کنید.

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

محتوای دلخواه

تقریباً هر HTML را در داخل اضافه کنید، حتی برای گروه های لیست پیوندی مانند زیر، با کمک ابزارهای flexbox .

عنوان مورد گروه را فهرست کنید
3 روز پیش

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

Donec id elit non mi porta.
عنوان مورد گروه را فهرست کنید
3 روز پیش

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

Donec id elit non mi porta.
عنوان مورد گروه را فهرست کنید
3 روز پیش

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

Donec id 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. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. ولوپتات را قبول نمی‌کند و نمی‌تواند زمانی را به حداقل برساند. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

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 باید دارای یک data-targetیا یک hrefگره کانتینری در DOM باشد.

<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 ('show')

مورد لیست داده شده را انتخاب می کند و صفحه مربوط به آن را نشان می دهد. هر مورد دیگری از لیست که قبلا انتخاب شده بود، غیرانتخاب می شود و صفحه مرتبط با آن پنهان می شود. قبل از اینکه صفحه برگه واقعاً نشان داده شود (مثلاً قبل از 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رویدادها فعال نمی شوند.

نوع رویداد شرح
show.bs.tab این رویداد در نمایش برگه فعال می شود، اما قبل از اینکه برگه جدید نشان داده شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید.
نشان داده شده.bs.tab این رویداد پس از نمایش یک برگه در نمایش برگه فعال می شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید.
hide.bs.tab این رویداد زمانی فعال می شود که یک برگه جدید نشان داده شود (و بنابراین باید برگه فعال قبلی پنهان شود). به ترتیب از برگه فعال فعلی و برگه جدید که به زودی فعال می شود استفاده کنید event.targetو آن را هدف قرار دهید.event.relatedTarget
hidden.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
})