فهرست گروپ
لسٽ گروپ هڪ لچڪدار ۽ طاقتور جزو آهن مواد جي هڪ سيريز کي ڏيکارڻ لاءِ. تبديل ڪريو ۽ وڌايو انھن کي سپورٽ ڪرڻ لاءِ صرف ڪنھن مواد جي اندر.
بنيادي مثال
سڀ کان وڌيڪ بنيادي فهرست گروپ ھڪڙي غير ترتيب ڏنل فهرست آھي جنھن ۾ لسٽ شيون ۽ مناسب ڪلاس شامل آھن. ان تي تعمير ڪريو اختيارن سان جيڪي پيروي ڪريو، يا ضرورت مطابق پنھنجي سي ايس ايس سان.
- هڪ شيءِ
- ٻي شيءِ
- ٽيون مضمون
- چوٿون مضمون
- ۽ هڪ پنجون
<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
لاءِ شامل ڪريو ..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
ان کي غير فعال ڪرڻ .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>
لسٽ گروپ شيون ٺاھڻ لاء ھوور، معذور، ۽ فعال رياستن سان شامل ڪندي . اسان انهن pseudo-ڪلاسن کي الڳ ڪريون ٿا انهي ڳالهه کي يقيني بڻائڻ لاءِ ته فهرستن جا گروپ جيڪي غير متضاد عنصرن مان ٺهيل آهن (جهڙوڪ s يا s) هڪ ڪلڪ يا ٽيپ ڪرڻ جي صلاحيت مهيا نه ڪن..list-group-item-action
<li>
<div>
پڪ ڪريو ته هتي معياري .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>
s سان <button>
، توھان پڻ استعمال ڪري سگھوٿا ڪلاس 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
- هڪ ٻي فهرست جي شيء2
- هڪ ٽيون فهرست شيون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>
JavaScript رويي
استعمال ڪريو ٽيب JavaScript پلگ ان- ان کي انفرادي طور تي يا مرتب ڪيل 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
.
<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
چالو ڪري ٿو ھڪڙي فهرست جي شيءِ عنصر ۽ مواد ڪنٽينر. ٽئب ۾ هجڻ گهرجي يا ته هڪ 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('ڏسو')
ڏنل فهرست جي شين کي چونڊيو ۽ ان سان لاڳاپيل پين ڏيکاري ٿو. ٻيو ڪو به فهرست شيون جيڪو اڳ ۾ چونڊيو ويو هو غير منتخب ٿيل آهي ۽ ان سان لاڳاپيل پين لڪيل آهي. ڪالر ڏانھن واپسي کان اڳ ٽيب پين اصل ۾ ڏيکاريو ويو آھي (مثال طور، 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
واقعا فائر نه ڪيا ويندا.
واقعي جو قسم | وصف |
---|---|
ڏيکاريو.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 (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})