گروه لیست
گروه های لیست یک جزء منعطف و قدرتمند برای نمایش یک سری محتوا هستند. آنها را تغییر دهید و گسترش دهید تا تقریباً از هر محتوایی پشتیبانی شود.
مثال اساسی
ابتدایی ترین گروه لیست یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است. با گزینه های بعدی یا در صورت نیاز با 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" aria-disabled="true">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
در اینجا استفاده نکنید .
<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" tabindex="-1" aria-disabled="true">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>
افقی
.list-group-horizontal
برای تغییر طرح بندی آیتم های گروه لیست از عمودی به افقی در تمام نقاط شکست، اضافه کنید. از طرف دیگر، یک نوع پاسخگو را انتخاب کنید .list-group-horizontal-{sm|md|lg|xl}
تا یک گروه لیست به صورت افقی در آن نقطه شکست شروع شود min-width
. در حال حاضر گروههای فهرست افقی را نمیتوان با گروههای فهرست همسطح ترکیب کرد.
نکته: آیا میخواهید در حالت افقی، آیتمهای فهرست با عرض یکسان را گروهبندی کنید؟ .flex-fill
به هر یک از موارد گروه لیست اضافه کنید .
- Cras justo odio
- Dapibus ac facilisis in
- موربی لئو ریسوس
<ul class="list-group list-group-horizontal">
<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>
</ul>
- Cras justo odio
- Dapibus ac facilisis in
- موربی لئو ریسوس
<ul class="list-group list-group-horizontal-sm">
<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>
</ul>
- Cras justo odio
- Dapibus ac facilisis in
- موربی لئو ریسوس
<ul class="list-group list-group-horizontal-md">
<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>
</ul>
- Cras justo odio
- Dapibus ac facilisis in
- موربی لئو ریسوس
<ul class="list-group list-group-horizontal-lg">
<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>
</ul>
- Cras justo odio
- Dapibus ac facilisis in
- موربی لئو ریسوس
<ul class="list-group list-group-horizontal-xl">
<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>
</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
دولت پشتیبانی می شود. آن را برای نشان دادن یک انتخاب فعال در یک آیتم گروه فهرست متنی اعمال کنید.
<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>
محتوای دلخواه
تقریباً هر 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 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">
<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">
<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>
مواد و روش ها
تب $().
یک عنصر فهرست و محفظه محتوا را فعال می کند. 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')
مناسبت ها
هنگام نمایش یک برگه جدید، رویدادها به ترتیب زیر فعال می شوند:
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 برای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید. |
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
})