فہرست گروپ
فہرست گروپ مواد کی ایک سیریز کی نمائش کے لیے ایک لچکدار اور طاقتور جز ہیں۔ ان میں ترمیم کریں اور ان میں توسیع کریں تاکہ ان کے اندر موجود کسی بھی مواد کو سپورٹ کیا جا سکے۔
بنیادی مثال
سب سے بنیادی فہرست گروپ ایک غیر ترتیب شدہ فہرست ہے جس میں فہرست اشیاء اور مناسب کلاسز ہیں۔ اس پر عمل کرنے والے اختیارات کے ساتھ، یا ضرورت کے مطابق اپنے سی ایس ایس کے ساتھ تعمیر کریں۔
- ایک آئٹم
- ایک دوسری چیز
- تیسری چیز
- چوتھی چیز
- اور پانچواں
<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
کرنے کے لیے اس میں شامل کریں ۔ نوٹ کریں کہ کچھ عناصر کے ساتھ بھی حسب ضرورت جاوا اسکرپٹ کی ضرورت ہوگی تاکہ وہ اپنے کلک ایونٹس (مثلاً لنکس) کو مکمل طور پر غیر فعال کریں۔.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 کا استعمال کریں ۔ ہم ان چھدم کلاسوں کو اس بات کو یقینی بنانے کے لیے الگ کرتے ہیں کہ غیر متعامل عناصر (جیسے s یا s) سے بنے لسٹ گروپس کلک یا ٹیپ کی سہولت فراہم نہیں کرتے ہیں۔<button>
.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>
کا استعمال بھی کر سکتے ہیں ۔ افسوس کی بات ہے کہ s معذور وصف کی حمایت نہیں کرتا ہے۔disabled
.disabled
<a>
<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
۔ فی الحال افقی فہرست گروپس کو فلش لسٹ گروپس کے ساتھ جوڑا نہیں جا سکتا۔
پرو ٹپ: افقی ہونے پر مساوی چوڑائی والے گروپ آئٹمز چاہتے ہیں؟ .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 کو شامل کریں، یہاں تک کہ لنکڈ لسٹ گروپس کے لیے بھی، جیسا کہ نیچے دیا گیا ہے ۔
گروپ آئٹم کی سرخی کی فہرست بنائیں
3 دن پہلےپیراگراف میں پلیس ہولڈر کا کچھ مواد۔
اور کچھ چھوٹا پرنٹ۔گروپ آئٹم کی سرخی کی فہرست بنائیں
3 دن پہلےپیراگراف میں پلیس ہولڈر کا کچھ مواد۔
اور کچھ خاموش چھوٹے پرنٹ۔گروپ آئٹم کی سرخی کی فہرست بنائیں
3 دن پہلےپیراگراف میں پلیس ہولڈر کا کچھ مواد۔
اور کچھ خاموش چھوٹے پرنٹ۔<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 پلگ ان کا استعمال کریں — اسے انفرادی طور پر یا مرتب کردہ 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
DOM 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 پچھلے فعال ٹیب (اگر دستیاب ہو) کو نشانہ بنانے کے لیے استعمال کریں ۔ |
دکھایا گیا بی ایس ٹیب | یہ ایونٹ ٹیب کے دکھائے جانے کے بعد ٹیب شو پر فائر ہوتا ہے۔ 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
})